View Full Version : Cascading Combo in GridPanel

5 May 2008, 4:11 PM
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;

Looking forward to your suggestions.