Update or Reload Store of ExtJs ComboBox

问题

I'd like to know a way of how to update or reload the list values of a ExtJs ComboBox. For instance, I have a some checkboxes. These checkboxes determine what values the ComboBox should have. So, after selecting some of those, I click the drowndown list (combobox) to see the values.

In short, how can I change the values (store) of a ComboBox already has.

Hope someone can help me

Thanks

回答1:

I've been using this undocumented ExtJs API function to change the store at runtime:

mycombobox.bindStore(newStore);

as stated by the support team in http://www.sencha.com/forum/showthread.php?40749-Change-Combobox-store-data-update.

Edit: If I want to put the new data when the store is populated, I do something like this

storeMyStore = new Ext.data.Store({
    ...
    listeners: {
        load: function(this, records, options) {
            cbMyCombo.bindStore( storeMyStore );
        }
    }
});

回答2:

It goes a little something like this

{
  xtype: 'checkbox',
  //configs
  listeners : {
     checked : function (checkbox, checkedBool) {
         var yourCombo = Ext.getCmp(yourComboID);

         //I'm not sure what params you will need to reload the comboBox from your
         // service but hopfully this will give the jist of things. . .

         yourCombo.store.reload(
                  {   
                     params: 
                         {yourParam : checkedBool},
                         {yourRowID : rowID}
                    });
      }
 }

回答3:

Here I making a combobox that is updated after a selection is made on another ComboBox. Basically, the final user can use the two comboboxes to select a main category and a sub-category, which is based on the selection made on the first combobox.

This is the store for First comboBox:

Ext.define("StoreSubject", {
extend: "Ext.data.Model",
fields: [
{
    name: 'i_Id'
},
{
    name: 's_Value'
}
]
});

var StoreSubject = Ext.create('Ext.data.JsonStore', {
model: 'StoreSubject',
proxy: {

    type: 'ajax',
    url: '../General/AdministrationDefaultXMLDOM.aspx?qid=15',
    reader: {
        type: 'json'
    }
}
});
StoreSubject.load();

This is the store for Second comboBox:

Ext.define("StoreLanguageGroup", {
extend: "Ext.data.Model",
fields: [
{
    name: 'i_Id'
},
{
    name: 's_Value'
}
]
});
var StoreLanguageGroup = Ext.create('Ext.data.JsonStore', {
model: 'StoreLanguageGroup',
proxy: {

    type: 'ajax',
    url: '../General/AdministrationDefaultXMLDOM.aspx?qid=16',
    reader: {
        type: 'json'
    }
}
});

My code for Comobox is looks like this..

First ComboBox :

var cmbSubjectName = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbSubjectName',
fieldLabel: '<b>Subject</b>',
name: 'cmbSubjectName',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreSubject,
queryMode: 'local',
typeAhead: true,
listeners: {
    'select': {
        fn: function (combo, value) {
            var strSubjectName = Ext.getCmp('cmbSubjectName').getValue();
            Ext.getCmp('cmbLanguageType').clearValue();
            Ext.getCmp('cmbLanguageType').getStore().load({
                params: {
                    SubjectName: strSubjectName
                }
            });
        }
    }

},
});

This code is used to call and override the combox store (Impotent otherwise it will keep on loading )

Ext.override(Ext.LoadMask, {
onHide: function () {
    this.callParent();
}
});

//---------------------------

Second ComboBox :

var cmbLanguageType = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbLanguageType',
fieldLabel: '<b>Language</b>',
multipleSelect: false,
name: 'cmbLanguageType',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreLanguageGroup,
queryMode: 'local',
typeAhead: true,
});

Hope this will helps you.. and Please rate my answer

回答4:

In an event listener on the checkboxes, get a reference to the store that your ComboBox is reading from. Then invoke its add or remove functions to update the data in the store based on what check box is checked Once the updates are complete, invoke a doLayout() on the ComboBox component, it should re-render itself based on the current state of the store.

Although I think there is a way to have it automatically update any time the store updates -- I haven't used that yet.

来源：https://stackoverflow.com/questions/4218075/update-or-reload-store-of-extjs-combobox