13

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

user512514
  • 161
  • 1
  • 1
  • 10
  • Did some answer solved your problem? Accept the best answer clicking on the check-mark, please. – Roberto Apr 22 '14 at 16:17

4 Answers4

14

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 );
        }
    }
});
Roberto
  • 2,115
  • 24
  • 32
7

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}
                    });
      }
 }
It Grunt
  • 3,300
  • 3
  • 21
  • 35
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

Santosh
  • 33
  • 6
0

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.

VMAtm
  • 27,943
  • 17
  • 79
  • 125
Macy Abbey
  • 3,877
  • 1
  • 20
  • 30
  • Do you think it is possible to update the combobox inside of one of its events? For example, I want to click the combobox (the down arrow), then before it displays, a function get the values based on the selected checkboxes. – user512514 Nov 18 '10 at 20:29
  • Actually, I have a gridPanel with checkboxes. I am getting some values from records obtained by getSelections. I'd like to find a way to do this process once instead of doing it each time I select a row (or select the checkbox). That is why I got the idea of doing it by clicking the ComboBox. – user512514 Nov 18 '10 at 20:38
  • It's definitely possible to do it inside the combobox's internal events, extend the ComboBox object and add your own js before calling the parent's event handler. As to the gridPanel, it's a bit hard to conceptualize without the code. – Macy Abbey Nov 18 '10 at 23:39