CMP unable to populate SuperBoxSelect with saved values

Development
1

Hi,

I have a custom CMP that is using a superBoxSelect, this is working in terms of saving values.

But if I update a row then it’s not populating the values that have been saved in the database.

Code for selectBox

    imagelibrary.combo.Categories = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        xtype: 'superboxselect',
        allowBlank: true,
        msgTarget: 'under',
        allowAddNewData: true,
        addNewDataOnBlur: true,
        pinList: false,
        resizable: true,
        name: config.name + '[]',
        anchor: '100%',
        minChars: 1,
        store: new Ext.data.JsonStore({
            id: 'id',
            root: 'results',
            autoLoad: true,
            autoSave: false,
            totalProperty: 'total',
            fields: ['id','title'],
            url: imagelibrary.config.connectorUrl,
            baseParams: {
                action: 'mgr/categories/getlist'
            }
        }),
        mode: 'remote',
        displayField: 'title',
        valueField: 'id',
        triggerAction: 'all',
        extraItemCls: 'x-tag',
        expandBtnCls: 'x-form-trigger',
        clearBtnCls: 'x-form-trigger',
        hiddenName: config.name || 'id',
    });
    imagelibrary.combo.Categories.superclass.constructor.call(this,config);

    if (config.storeLoadListener) {
        this.store.on('load', config.storeLoadListener, this);
        this.on('render', function() {
            if (!this.getValue()) {
                this.store.load();
            }
        });
    }
};
Ext.extend(imagelibrary.combo.Categories, Ext.ux.form.SuperBoxSelect);
Ext.reg('imagelibrary-combo-categories',imagelibrary.combo.Categories);

And code used for the field in the update window:

{
            xtype: 'imagelibrary-combo-categories'
            ,fieldLabel: _('imagelibrary.item.image_categories')
            ,name: 'image_categories[]'
            ,anchor: '100%'
            ,autoLoad: true
        }

Note values stored in the DB are a comma separated list.
Any ideas?

2

If I add this to the field

,storeLoadListener: function(store, data, request) {
                var cats = [8,6];
                this.setValue(cats);
                return true;
            }

Then it will pre populate, so wonder if there’s a way of getting the values inside that function, but this.getValue seems to be empty.

3

I don’t have a solution (been a long time since I used the superboxselect), but the problem probably comes from the name: image_categories[]. Because that’s indicating an array, it doesn’t match the name of the data in your record (which is likely image_categories) so it doesn’t prefill automatically.

Perhaps you need to manually pass in the value in the update window, like:

value: config.record.image_categories
4

Thanks mark, yeah thought it was likely to do with the name but had to have the array to store more than one value. So what you said got me thinking.
I tried using

hiddenName: 'image_categories'

Which gave some success, once I passed the value back as an array from the getlist process, as it was now populating the correct number of items, but it wasn’t displaying any names, just an empty capsule item.

So instead of doing that and based on your idea of passing the values back I used the storeLoadListener and created an array and set the values from that. Seems to be working, although not sure it’s the correct solutions.

storeLoadListener: function(store, data, request) {
                var cats = config.record.image_categories.split(',');
                this.setValue(cats);
            }

Thanks for pointing me in the right direction.

5

Nice idea!

You could try to send the field value as array in the getlist processor instead of sending a comma separated list.

I often use the opposite way and post a comma separated value in an additional hidden field in the form beforeSubmit handler:

beforeSubmit: function () {
    var f = this.fp.getForm();
    var dataField;
    f.items.each(function (item) {
        if (item.xtype === 'xxx-combo-yyy' || item.xtype === 'xxx-combo-zzz') {
            dataField = f.findField(item.name + 'Data');
            if (dataField) {
                dataField.setValue(item.getValue());
            }
        }
    });
}