Combo box - reset problem

[renganathan]

Hi All,

I want to achieve chained combo box . I mean 3 level combo boxes,

Level 1 - Country

Level 2 - State

Level 3 - City.

It works fine.


But the problem is if user try to change the country name, the state and city combo box is not getting reset

var Country = new Ext.form.ComboBox(
    {
        name            : 'Country',
        editable        : false,
        id                : 'Country',
        fieldLabel        : 'Country '+mandatoryField,
        store            : CountryStore,
        bodyStyle        : 'padding:15px',
        loadmask        : false,
        displayField    : 'countryname',
        valueField        : 'countryid',
        allowBlank        : false,
        anchor            : '95%',
        typeAhead        : true,
        forceSelection    : true,
        queryMode        : 'local',
        triggerAction    : 'all',
        listeners         : 
        {  
            select: function(combo, record, index) 
            {
                var val = Ext.getCmp('Country').getValue();
                var record = Ext.getCmp('Country').findRecord(Ext.getCmp('Country').displayField, val); 
                var ctry = record.get('countryid');
                Ext.getCmp("State").getStore().removeAll();
                Ext.getCmp("State").setValue('');
                Ext.getCmp("City").getStore().removeAll();
                Ext.getCmp("City").setValue('');
            } 
        }    
    });
    CountryStore.load();
    
    
    var State = new Ext.form.ComboBox(
    {
        name            :'State',
        id                :'State',
        fieldLabel        :'State'+mandatoryField,
        store            : StateStore,
        mode            : 'remote',
        displayField    : 'statename',
        valueField        : 'stateid',
        allowBlank        : false,
        editable           : false,
        anchor            :'95%',
        triggerAction    : 'all',
        typeAhead        : true,
        queryMode        : StoreQueryMode,
        forceSelection    : true,
        listeners    : 
        {
            select: function(combo, record, index) 
            {
                var val = Ext.getCmp('Country').getValue();
                var record = Ext.getCmp('Country').findRecord(Ext.getCmp('Country').displayField, val); 
                var ctry = record.get('countryid');
                
                var val = Ext.getCmp('State').getValue();
                var record = Ext.getCmp('State').findRecord(Ext.getCmp('State').displayField, val); 
                var stat = record.get('stateid');
                
                Ext.getCmp("City").getStore().removeAll();
                Ext.getCmp("City").setValue('');

            }
        }
    });
    StateStore.load();
    

    var City = new Ext.form.ComboBox(
    {
        name            : 'City',
        id                : 'City',
        fieldLabel        : 'City'+mandatoryField,
        store            : CityStore,
        loadmask        : true,
        mode            : 'remote',
        displayField    : 'cityname',
        valueField        : 'cityid',
        allowBlank        : false,
        typeAhead        : true,
        forceSelection    : true,
        queryMode        : 'local',
        anchor            : '95%',
        triggerAction    : 'all'
    });
    CityStore.load();

Please help me to fix this issue

[mitchellsimoens]

Is the select event always firing for you?

[lukasz.sudol]

Hi renganathan,

I read your post and I think you are getting this issue because of problem with your store in Country combobox. I can't see your store and model configuration, but there is a problem with:

valueField: 'countryid'

If this configuration is wrong, event 'select' or 'change' will not work for you, I think event 'select' will fire only once.

Please check your model for Country store and I think this should helps. And by the way, you can simply clear comoboxes using this:

Ext.getCmp("City").reset();
Ext.getCmp("State").reset();

Please, be careful with removeAll() method, if your store will fire sync with database, it will remove your all data.

Thanks.