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

admin管理员组

文章数量:1279083

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

{
      xtype: 'bobox',
      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 bo-box's store, but once the bo is expanded the store is emptied. I've done some more testing using chrome's console. I mented-out the 'onGetTiersSuccess' function. Instead I just type into the console Ext.getCmp('tierTypeCB').getStore().add({type: 'abc'}) If I open the bo-box its empty. However, if I first open the bo-box (before adding that item), and only then add the item, once I open the bo-box again I can see there the item I've added. It seems that adding item to the bo-box before opening it, 'resets' the bo-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 bo-box's store where i define it, but create a store object and then bind it to the bo-box (using the bindStore() mand) 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

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

{
      xtype: 'bobox',
      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 bo-box's store, but once the bo is expanded the store is emptied. I've done some more testing using chrome's console. I mented-out the 'onGetTiersSuccess' function. Instead I just type into the console Ext.getCmp('tierTypeCB').getStore().add({type: 'abc'}) If I open the bo-box its empty. However, if I first open the bo-box (before adding that item), and only then add the item, once I open the bo-box again I can see there the item I've added. It seems that adding item to the bo-box before opening it, 'resets' the bo-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 bo-box's store where i define it, but create a store object and then bind it to the bo-box (using the bindStore() mand) 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

• javascript
• extjs
• bobox

Share Improve this question Follow edited Jul 31, 2013 at 14:20 Jeff Shaver 3,3552020 silver badges1919 bronze badges asked Jul 31, 2013 at 14:02 eRezeRez 2571010 silver badges2424 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

{
    xtype: 'bobox',
    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./extjs/4.2.1/#!/api/Ext.form.field.ComboBox-property-lastQuery

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

本文标签： javascriptEXTJS combobox39s store reset after expand when data is loaded dynamicallyStack Overflow