CODEWITHSUNDEEP
javascriptextjscombobox
eRez
eRez

Reputation: 257

EXT-JS combo-box's store reset after expand when data is loaded dynamically

I want to dynamically add items to a combo box item. This is how its defined:

{
      xtype: 'combobox',
      id: 'tierTypeCB',
      fieldLabel: 'Tiers\' type',
      labelWidth: 70,
      editable: false,
      valueField: 'type',
      displayField: 'type',
      store: Ext.create('Ext.data.Store',{
          fields: ['type'],
          data: []
      })
}

In other part of the code, I have this function which is supposed to add the items:

onGetTiersSuccess: function(response) { // this is a 'success' function of an AJAX request
    var decodedResponse = Ext.decode(response.responseText);
    var tierTypeCB =  Ext.getCmp('tierTypeCB');
    var tierTypesStore = tierTypeCB.getStore();
    for (var tierType in decodedResponse){
        tierTypesStore .add({type: tierType});
    }
}

The thing is that when the drop-down is opened its empty. what i've found out, is that my code puts the data into the combo-box's store, but once the combo is expanded the store is emptied. I've done some more testing using chrome's console. I commented-out the 'onGetTiersSuccess' function. Instead I just type into the console Ext.getCmp('tierTypeCB').getStore().add({type: 'abc'}) If I open the combo-box its empty. However, if I first open the combo-box (before adding that item), and only then add the item, once I open the combo-box again I can see there the item I've added. It seems that adding item to the combo-box before opening it, 'resets' the combo-box's store once its opened. I've tried to by-pass it by calling Ext.getCmp('tierTypeCB').expand() and then calling Ext.getCmp('tierTypeCB').collapse() before adding the items, but that didn't help. i've also tried not setting the combo-box's store where i define it, but create a store object and then bind it to the combo-box (using the bindStore() command) and that didn't help either.

At this point I'm clueless, so I'd appreciate it if you have any idea that might help me.

Thanks, eRez

Upvotes: 3

Views: 4194

Answers (2)

Jeff Shaver
Jeff Shaver

Reputation: 3355

Set the queryMode property to local. What is happening is the empty store isn't being created until you try to expand the combobox. The queryMode property is, by default, remote. Setting it to local should fix the issue because it will load the store when the combobox is created.

Upvotes: 6

kevhender
kevhender

Reputation: 4405

You should be able to use the lastQuery config of the combo to keep the store from reloading when first expanded.

{
    xtype: 'combobox',
    lastQuery: '',
    id: 'tierTypeCB',
    fieldLabel: 'Tiers\' type',
    labelWidth: 70,
    editable: false,
    valueField: 'type',
    displayField: 'type',
    store: Ext.create('Ext.data.Store',{
        fields: ['type'],
        data: []
    })
}

See the docs here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-property-lastQuery

Upvotes: 7

Related Questions