Update or Reload Store of ExtJs ComboBox - extjs

Question

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

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

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

Answer 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

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.