ExtJS ComboBox dynamic JSON updates - json

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.

Answer 1

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();
}});