Cascading ExtJs combobox
I had to create cascading combo-boxes for country / city selection. I looked at sample tutorial on extjs page. However there is an example for local store and I have my values stored in the database.
At first I set store and combo box separately and add a select listener on country box - so that when countries field changes it updates city field. It worked when user made their first selection. Then it just didn't refresh combo box values although ajax request was made and proper json response was provided.
The that wasn't working looked something like that:
//function that gets city store
function getCityStore(countryIdVar)
{
var store = new Ext.data.JsonStore({
url: 'get-city-by-country-id',
baseParams: countryId:countryIdVar,
fields: [
{name:'cityId', type:'int'},
'cityName'
]
});
return store;
}
//than I have a countries combo
var countries = new Ext.form.ComboBox({
id:'country',
store: getCountryStore,
typeAhead: true,
triggerAction: 'all',
emptyText: '...',
listeners: {
select: {
fn:function(combo, value) {
var modelDest = Ext.getCmp('city');
//set and disable cities
modelDest.setDisabled(true);
modelDest.setValue('');
modelDest.store.removeAll();
modelDest.store = getCityStore( combo.getValue() );
modelReg.setDisabled(false);
}
}
}
})
The code that works - dynamically cascading ExtJs combo-boxes
After a day worth researching I found out that this is incorrect way of doing things. And I still don't know why - is it a bug or is just my knowledge of JavaScript and ExtJs so bad that I cannot understand it.
//function that gets city store
function getCityStore()
{
var store = new Ext.data.JsonStore({
url: 'get-city-by-country-id',
//baseParams: countryId:countryIdVar,
fields: [
{name:'cityId', type:'int'},
'cityName'
]
});
return store;
}
//than I have a countries combo
var countries = new Ext.form.ComboBox({
id:'country',
store: getCountryStore(),
typeAhead: true,
triggerAction: 'all',
emptyText: '...',
listeners: {
select: {
fn:function(combo, value) {
var modelDest = Ext.getCmp('city');
//set and disable cities
modelDest.setDisabled(true);
modelDest.setValue('');
modelDest.store.removeAll();
//reload region store and enable region
modelDest.store.reload({
params: { countryId: combo.getValue() }
});
modelReg.setDisabled(false);
}
}
}
})
Hope this will help someone ... :)
| < Prev |
|---|