PDA

View Full Version : Combo box - reset problem



renganathan
1 Nov 2012, 10:10 PM
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
5 Nov 2012, 6:10 AM
Is the select event always firing for you?

lukasz.sudol
5 Nov 2012, 12:08 PM
Hi renganathan (http://www.sencha.com/forum/member.php?284974-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.