1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    India, Pune
    Posts
    2
    Vote Rating
    0
    nagesh21 is on a distinguished road

      0  

    Default Unanswered: Add dynamic options to the combobox

    Unanswered: Add dynamic options to the combobox


    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.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi nagesh21,
    Try the following Code:

    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();
    })
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1