Cascading Combo in GridPanel

[durlabh]

In many cases, in grid also, we have cases where there are inter-dependent combo boxes. For example, let us assume a grid where State is dependent on Country selection. There are a few examples on forum on how to handle this situation by apply "filter" if the Dependent combo has a local store. However, if the dependent combo is remote, then you need to reload the store. Here is how we have been doing:



// Example usage:
// grid.on('beforeedit', Ext.ux.grid.CascadingCombo, {'State': 'CountryId'});
// In this, state is the field name and CountryId is the parent value

Ext.ux.grid.CascadingCombo = function(e) {
var field = e.field;
var record = e.record;

var options = this;

if(options[field]) {
var combo = e.grid.getColumnModel().getCellEditor(e.column, e.row).field;
var parentValue = record.get(options[field]);
var store = combo.store;

// If a different country, reload the store
if(store.baseParams.ScopeId != parentValue) {
store.baseParams.ScopeId = parentValue;
store.load();
}
}
};


Looking forward to your suggestions.