ExtJS ComboBox dynamic JSON updates

Question

I have found numerous issues explaining why the JSON store is not updated in an Ext JS comboBox.

We have made a re-usable ExtJS combobox control, this is the source code for it.

Ext.define('ReusableComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.Reusablecombobox',
queryMode: 'local',
forceSelection: true,
valueField: 'id',
displayField: 'displayField',
autoLoad: false,
initComponent: function () {

    if (!this.store) {
        var store = Ext.create('Ext.data.Store', {
            autoLoad: this.autoLoad,
            fields:['id', 'displayField', 'Id', 'Code', 'Description', 'IsIncluded', 'IsActive'],
            proxy: {
                type: 'ajax',
                url: urlContent('validurl/getcodes'),
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        });

        store.on('load', this.handler_StoreLoad, this);

        Ext.apply(this, {
            store: store
        });

    }
    this.callParent();
},

handler_StoreLoad: function (store, records, successful, options) {

    addFieldsToList(records, function (item) {
        item.data['id'] = item.data.Id;
        item.data['displayField'] = item.data.Code + ' | ' + item.data.Description;
    });
},

addFieldsToList: function( list, buildDisplayFieldFunc ){
    if( list ){
        for( var i=0, j=list.length; i<j; i++ ){
            buildDisplayFieldFunc( list[i] );
        }
        return list;
    }
}

});

When I dynamically add another item to the comboBox store, the comboBox does not refresh. I have tried the following things.

The following tries comes up with blank elements in the comboBox

Call the removeAll(), clearValue() functions on the store and re-initialize using the bindStore(model), it comes up with empty list items.
comboBox.store.reload(model);

The following tries adds the new item as a blank element in the comboBox

var data = []; data.push(new Ext.data.Record({id: options[0].Id, displayField : options[0].Code + ' | ' + options[0].Description})); comboBox.store.add(data);
comboBox.store.loadData(data, true);

Has anyone seen and struggled with what I am talking about ?

Thanks in advance for your help.

objectone objectone · Accepted Answer · 2013-08-22T22:35:45

I tried your code and it works with the below change and it is not required to call store.loadData

var data = []; data.push({id: options[0].Id, displayField : options[0].Code + ' | ' +   options[0].Description}); 
comboBox.store.add(data);

What you have done is not the best way to map the returned JSON to your store, I have modified your code for the mappings which is the best way to do and it doesn't require you to call the load listener and manually add the records.

Ext.define('ReusableComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.reusablecombobox',
queryMode: 'local',
forceSelection: true,
valueField: 'id',
displayField: 'displayField',
autoLoad: false,

initComponent: function () {

  if (!this.store) {
    var store = Ext.create('Ext.data.Store', {
        autoLoad: this.autoLoad,
        fields:[ 'Id', 'Code', 'Description', 'IsIncluded', 'IsActive', 
                    {
                        name: 'displayField',
                        convert: function(v, record) {
                            return record.get('Code') + ' | ' + record.get('Description');
                        }
                    },
                    {name: 'id', mapping: 'Id'}
        ],
        proxy: {
            type: 'ajax',
            url: urlContent('validurl/getcodes'),
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });

    Ext.apply(this, {
        store: store
    });

}
this.callParent();

}});

ExtJS ComboBox dynamic JSON updates

1 Answers