View Full Version : how can combobox filter other combo inside one gridpanel

6 Dec 2011, 6:35 AM
how can combobox filter other combo inside one gridpanel
My case Is :
I have gridpanel contain 4 rows and 3column
column 1 :is combobox loaded with counties,
column 2 :is combobox loaded with Cities
column 3 :is Text loaded with Names
What i want Is :
when user select county from combobox [ column1] , the cities combobox [column2] filtered by the selected country
The problem is:
when user select from the first row country [column1] , the cities filtered successfully in [column2] ,
but after that when user trying to select from the second row country, the cites does not appear any more

could any one help me
sorry for my bad English,
My code is:

// ============== combobox Country
var comb_country = new Ext.form.ComboBox(
mode: 'local',
allowBlank: false,
triggerAction: 'all',
displayField: 'Country_Name',
valueField: 'Country_Id',
store: CountryStore,
emptyText: 'chose..',
loadingText: 'Loading...',
forceSelection: true,
select: function(combo, record, index)
comb_city.store.filter('Country_Id', combo.getValue());
// =============== combobox City
var comb_city = new Ext.form.ComboBox(
mode: 'local',
store: CityStore,
displayField: 'City_Name',
valueField: 'City_Id',
allowBlank: false,
triggerAction: 'all',
emptyText: 'Select From here',
loadingText: 'Loading',
forceSelection: true

//================ Create grid to display data from store

var sm = Ext.create('Ext.selection.CheckboxModel');

var grid = new Ext.grid.Panel({
store: myStore,
id: 'ss',

autoExpandColumn: 'username',

selModel: sm,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
edit: function(e)

columns: [ // Grid columns

{xtype: 'rownumberer', header: 'No' },

dataIndex: 'Country_Name',
header: 'Country',
editable: true,
renderer: Ext.ux.renderer.Combo(comb_country),
field: comb_country
header: 'City',
field: comb_city,
renderer: Ext.ux.renderer.Combo(comb_city)
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
{dataIndex: 'address', header: 'address', editor: 'textfield' },
{ dataIndex: 'email', header: 'E-mail', editor: 'textfield' },
{ dataIndex: 'hdate', header: 'Date', renderer: Ext.util.Format.dateRenderer('d/m/Y'), editor: 'datefield' }

renderTo: 'dvViewData',
width: 600,
height: 300,
tbar: [
text: "Add User",
handler: function()
//make a new empty User and stop any current editing
var newUser = new User({});
// rowEditor.stopEditing();
//add our new record as the first row, select it
grid.store.insert(0, newUser);

//start editing our new User


6 Dec 2011, 9:21 AM
Please use [CODE] tags when posting code.

I don't think your current approach will work. You're assuming that users will edit cells in a certain order. If someone edits the country in one row then tries to edit the city in a totally different row the filtering will carry across.

I think your best bet is to use a beforeedit listener for the city:


In that listener you have full access to the current record, so you can pull out the relevant country details and apply the filter.

Remember that filters are cumulative. You need to call clearFilter before you set a new filter.