Add dynamic options to the combobox

[nagesh21]

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]

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();
})