PDA

View Full Version : Same form with 2 combobox .



rolltoheaven
13 Dec 2013, 10:02 AM
I have a form with 2 combobox. Both combobox has multiple option, I want the second combo box to populate on the first combobox selection. I am kind of lost where do I start. I mean I know I have to update the listener on first box but how do I load the store in second combo box in real time. Any idea will be appretiated.

Thanks,

scottmartin
17 Dec 2013, 10:25 AM
See if this will help:




Ext.onReady(function() {

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});

var cities = Ext.create('Ext.data.Store', {
fields: ['state', 'abbr', 'name'],
data: [{
"state": "AL",
"abbr": "BIR",
"name": "Birmingham"
}, {
"state": "AL",
"abbr": "BLU",
"name": "Blue Springs"
},

{
"state": "AK",
"abbr": "KOD",
"name": "Kodiak"
}, {
"state": "AK",
"abbr": "NOP",
"name": "North Pole"
},

{
"state": "AZ",
"abbr": "FLG",
"name": "Flagstaff"
}, {
"state": "AZ",
"abbr": "PAV",
"name": "Paradise Valley"
}]
});

// Create the combo box, attached to the states data store
var combo1 = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),

listeners: {
select: function(combo) {
cities.clearFilter(true);
cities.filter({
property: 'state',
value: combo.value
});
}
}
});

// combo filtered on selection of states
var combo2 = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose City',
store: cities,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});

});