PDA

View Full Version : Auto render of comboboxes



Santosh Dhumale
21 Aug 2012, 1:05 AM
In grid editor have two comboboxes where second one is depend upon the first one.

Like country and state combo example.
When the data rendered in grid the second dropdown should have
values depend upon the first dropdown value of that particular row.
Its working on manual selection of first dropdown.

How to render second dropdown depend upon the first dropdown value after rendering first dropdown in grid editor.

How could achive this in extjs 4.0.

Thanks in advance.

sword-it
21 Aug 2012, 1:50 AM
Hi santosh,

You can add afterrender event of combobox, and give them same functionality like you did for combobox select event.

See the sample example - http://jsfiddle.net/ZALzv/

Santosh Dhumale
21 Aug 2012, 2:13 AM
Thank you for your reply.

It is working when there is single dropdown.

I have concern about combox in grid editor where there is multiple rows and each row has the dropdown.

afterrender works only once.I just tried giving alert().

I got only one alert where there is 4 rows.

scottmartin
21 Aug 2012, 9:41 AM
You can filter the combo as follows:



// COMBO; FILTER; SELECTION

Ext.onReady(function() {

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});

var cities = Ext.create('Ext.data.Store', {
fields: ['state', 'abbr', 'name'],
data: [{
"state": "AL",
"abbr": "BIR",
"name": "Birmingham"
}, {
"state": "AL",
"abbr": "BLU",
"name": "Blue Springs"
},

{
"state": "AK",
"abbr": "KOD",
"name": "Kodiak"
}, {
"state": "AK",
"abbr": "NOP",
"name": "North Pole"
},

{
"state": "AZ",
"abbr": "FLG",
"name": "Flagstaff"
}, {
"state": "AZ",
"abbr": "PAV",
"name": "Paradise Valley"
}]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),

listeners: {
select: function(combo) {
cities.clearFilter(true);
cities.filter({
property: 'state',
value: combo.value
});
}
}
});

// combo filtered on selection of states
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose City',
store: cities,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});

// filter combo on load
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Filtered Cities',
store: cities,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listeners: {
beforequery: function(queryEvent){
cities.clearFilter(true);
cities.filter({
property: 'state',
value: 'AK'
});
}
}
});

// filter combo on load
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Filtered States',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listeners: {
beforequery: function(queryEvent){
states.clearFilter(true);
states.filter( // lets be more specific
{
filterFn: function(item) {
var abbr = item.get('abbr')
return abbr !== 'AL';
}
});
}
}
});

});


Scott.

Santosh Dhumale
21 Aug 2012, 9:56 PM
Thanks for your reply.

But still didn't get the solution.

I want to render second dropdown after rendering first dropdown of grid editor of each row.

scottmartin
22 Aug 2012, 6:41 AM
My mistake ... I thought you were referencing the data aspect.

As for the rendering to make sure I understand ... you need to have 2 combos for columns in the grid editor. When you load the grid, the 2nd combo should contain only the data relevant to the selection in the 1st combo?

Scott.

Santosh Dhumale
22 Aug 2012, 11:02 PM
Yes. Correct.
I want do for the each rows combo.

scottmartin
23 Aug 2012, 6:58 AM
So create the combos for each cell and filter the store for 2nd combo after selection from 1st?
Of use beforequery to filter the 2nd copy before open.

Scott.

Santosh Dhumale
27 Aug 2012, 1:14 AM
I created two dropdown and I changed the store of second dropdown based on value of first dropdown.
Its working fine but the store of second dropdown changing in all the rows.
I want to do for that particular dropdown . It should affect on that particular row.

Santosh Dhumale
6 Sep 2012, 11:26 PM
Thanks.

It worked.

lampdev
1 Mar 2016, 8:44 AM
I created two dropdown and I changed the store of second dropdown based on value of first dropdown.
Its working fine but the store of second dropdown changing in all the rows.
I want to do for that particular dropdown . It should affect on that particular row.

This thread seems to be old..Is it possible to post solution