PDA

View Full Version : Add dynamic options to the combobox



nagesh21
10 Aug 2012, 3:56 AM
Hello everybody,

In my project there is a requirement like where i have three dropdowns where first two of them are multiselect=true.
from first dropdown i choose the resources and add it to the second dropdown.
Now I want to add the options to the third dropdown which is not multiselect based on second dropdown values.
I did it using javascript but needs help how to do in using extjs.

sword-it
10 Aug 2012, 6:46 AM
Hi nagesh21,
Try the following Code:



Ext.onReady(function () {
var win = new Ext.Window({
title: 'My First Window'
, width: 600
, height: 300
, layout: 'column'
, items: [
{
xtype: 'box'
, html: 'Planned Blast Date'
, width: 116
},
{
xtype: 'combo'
, width: 100
, labelWidth: 116
, value: 'Jan'
, queryMode: 'local'
, displayField: 'name'
, multiSelect: true
, valueField: 'code'
, store: new Ext.data.Store({
data: [{ name: "Jan", code: 'jan' },
{ name: "Feb", code: 'feb' },
{ name: "March" , code: 'mar' },
{ name: "Apr" , code: 'apr' },
{ name: "May", code: 'may' },
{ name: "June" , code: 'jun' }
]
, fields: ['name', 'code']
})
, listeners: {
select: function (cb) {
var selections = cb.getValue();
var nextCb = cb.next();
var cbStore = [];
for (var i = 0, totalSelect = selections.length; i < totalSelect; i++){
var record = cb.store.find('code', selections[i]);
cbStore.push(cb.store.getAt(record));
}
nextCb.store.removeAll();
nextCb.store.add(cbStore);
}
}
},
{
xtype: 'combo'
, displayField: 'name'
, valueField: 'code'
, multiSelect: true
, queryMode: 'local'
, triggerAction: 'all'
, store: new Ext.data.Store({
data: []
, fields: ['name', 'code']
})
, listeners: {
select: function (cb) {
var selections = cb.getValue();
var nextCb = cb.next();
var cbStore = [];
for (var i = 0, totalSelect = selections.length; i < totalSelect; i++){
var record = cb.store.find('code', selections[i]);
cbStore.push(cb.store.getAt(record));
}
nextCb.store.removeAll();
nextCb.store.add(cbStore);


}
}
},
{
xtype: 'combo'
, displayField: 'name'
, valueField: 'code'
, queryMode: 'local'
, triggerAction: 'all'
, store: new Ext.data.Store({
data: []
, fields: ['name', 'code']
})
}]


})
win.show();
})