I'm new to ExtJS and I'm working on a address book in which admins can edit the users' address by pick the listed states and cities from two combobox.
I need to build some linkage comboboxes in grid panel so that after admin pick one state in the first drop-down, the relatives cities will be listed in the second drop-down automatically.
If it's only a simple panel I can update the cityStore after state been selected with following code:
{
xtype:"combo",
name:'state',
id:'state',
displayField:'name',
valueField:'id',
store:storeState,
triggerAction:'all',
queryMode:'local',
selecOnFocus:true,
forceSelection:true,
allowBlank:false,
editable:true,
//using select listener for updating city store
listeners:{
select:function(combo,record,index){
try{
var city = Ext.getCmp('city');
city.clearValue();
city.store.load(
{
params:{
paramId:combo.getValue()
}
}
);
}catch(ex){
alert("Failed to load data");
}
}
}
},
However in GridPanel if I update the cityStore with same way, the whole column will changed. Is there anyway to only address the column in the same row in Grid panel? Thanks!
You need to use validateedit
& beforeedit
events of grid to update the city store.
listeners: {
validateedit: { // to check if state value is changed & clearing city value
fn: function(event,editor){
switch (editor.field) {
case 'state':
if(editor.value!=editor.record.getData().state)
editor.record.set('city',null);
break;
}
return true;
}
},
beforeedit: { // to update the city store based the state value of corresponding row
fn: function(event,editor){
switch (editor.field) {
case 'city':
var cityStore = Ext.data.StoreManager.lookup('cityStore');
cityStore.load({
params:{
paramId:editor.value
}
});
break;
}
return true;
}
}
}
Here is a working example where i am using two local stores state & city. Filtering the city store whenever it is edited with the value of state given in same row.There are three states A,B,C with 1-5,6-10 & 11-15 cities respectively.