I had to create cascading combo-boxes for country / city selection. I looked at sample tutorial on extjs page. However there is 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.

---

Code looked something like that:
it DOESN'T WORK

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

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.

Below is the way it works.

//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 it will help someone ... :)

February 04, 2009     

...

I've this scripts will help another person too
Henry | 203.148.85.174

June 02, 2009     

...

Thanks! It's works for me !
Ronaldo | 201.82.14.75

July 04, 2009     

...

Thanks for posting this. After looking for 6 hours, it's the first post I found that showed how to pass params to a function and that the combo xtype store config could take a function name--which I needed to understand to make my cascading combo box problem work. Brilliant!
Robert Williams | 64.219.21.17

July 04, 2009     

Thanks for the post. The bit showing how to pass params to a function was the first I found. That and discovering here that the combo store config could take a function call was the key to working out my cascading combo box problem. Brilliant!
Robert Williams | 64.219.21.17

August 27, 2009     

Please provide code

Can you please provide whole code, I am not able to understand how function getCityStore() is called?
Anurag | 12.47.208.34

November 08, 2009     

Thanks!

Thank you very much for posting this thread. Was really helpfull! Sometimes ExtJs API docs are not as illustrative as the examples people like you post.
Juan Antonio | 190.154.8.40