javascript - dynamically change the combo box store in extjs - Stack Overflow

admin管理员组

文章数量:1327488

I have two bo boxes. When select the first bo box's first element the second bo box's elements need to change accordingly.

{
    xtype: 'bobox',
    fieldLabel: 'Type',
    name: 'type',
    store: 'type',
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',


}, {
    xtype: 'bobox',
    fieldLabel: 'State',
    name: 'state',
    store: state,
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
}

So if I select first element of type bo box the state bo box need to have the element which are in state. Otherwise It should have to contain the elements in states.

var states = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
            'id': 1,
            'name': 'A'
        },
        {
            'id': 2,
            'name': 'B'
        },
        {
            'id': 3,
            'name': 'C'
        },
        {
            'id': 4,
            'name': 'D'
        },
        {
            'id': 5,
            'name': 'E'
        }
    ]
});

var state = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
            'id': 1,
            'name': 'A'
        },
        {
            'id': 2,
            'name': 'B'
        }
    ]

});

That means my second bo box's store part need to be changed dynamically.

I have two bo boxes. When select the first bo box's first element the second bo box's elements need to change accordingly.

{
    xtype: 'bobox',
    fieldLabel: 'Type',
    name: 'type',
    store: 'type',
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',


}, {
    xtype: 'bobox',
    fieldLabel: 'State',
    name: 'state',
    store: state,
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
}

So if I select first element of type bo box the state bo box need to have the element which are in state. Otherwise It should have to contain the elements in states.

var states = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
            'id': 1,
            'name': 'A'
        },
        {
            'id': 2,
            'name': 'B'
        },
        {
            'id': 3,
            'name': 'C'
        },
        {
            'id': 4,
            'name': 'D'
        },
        {
            'id': 5,
            'name': 'E'
        }
    ]
});

var state = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [{
            'id': 1,
            'name': 'A'
        },
        {
            'id': 2,
            'name': 'B'
        }
    ]

});

That means my second bo box's store part need to be changed dynamically.

• javascript
• extjs
• bobox

Share Improve this question Follow edited Mar 22, 2018 at 12:33 Narendra Jadhav 10.3k1515 gold badges3434 silver badges4444 bronze badges asked Mar 22, 2018 at 12:11 ShiromiShiromi 15711 gold badge11 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You want to use a change listener on the first bobox and use the bindStore function on the second bobox to bind the correct store:

listeners: {
    change: function(bo, nV) {
        if(nV=="A") bo.nextSibling().bindStore(state);
        if(nV=="B") bo.nextSibling().bindStore(states);
    }
}

https://fiddle.sencha./#view/editor&fiddle/2eoh

For this you can use bo.setStore(store).

In this FIDDLE, I have created a demo using bo. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Store Type
        Ext.define('StoreType', {
            extend: 'Ext.data.Store',
            alias: 'store.storetype',
            fields: ['text', 'value'],
            data: [{
                text: 'Store1',
                value: 'store1'
            }, {
                text: 'Store2',
                value: 'store2'
            }]
        });
        //Store 1
        Ext.create('Ext.data.Store', {
            storeId: 'store1',
            fields: ['text', 'value'],
            data: [{
                text: 'A',
                value: 'A'
            }]
        });

        //Store 2
        Ext.create('Ext.data.Store', {
            storeId: 'store2',
            fields: ['text', 'value'],
            data: [{
                text: 'B',
                value: 'B'
            }]
        });

        Ext.create('Ext.panel.Panel', {
            title: 'Combobox store change ',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'bobox',
                fieldLabel: 'Select Store',
                store: {
                    type: 'storetype'
                },
                queryMode: 'local',
                listeners: {
                    select: function (cmp, record) {
                        var bo = cmp.up('panel').down('#myStore');

                        if (bo.isDisabled()) {
                            bo.setDisabled(false);
                        }
                        bo.reset();
                        bo.setStore(record[0].get('value'));
                    }
                }
            }, {
                xtype: 'bobox',
                itemId: 'myStore',
                fieldLabel: 'Select value',
                disabled: true
            }]
        });
    }
});

Bind a change event to your first bo box. Load the store data in that function for second bo box by passing the selected value of first bobox.

     {
        xtype: 'bobox',
        fieldLabel: 'Type',
        name: 'type',
        store: 'type',
        displayField: 'name',
        valueField: 'id',
        queryMode: 'local',
        listeners: {
         change: function(this,newVal,oldVal,eOpts){
           var store = Ext.getStore('state');
            store.load( 
            params:  {
                /* parameters to pass*/
            },
            callback : function(records, operation, success) {
                /* perform operations on the records*/
            });
         }
       }
     }

本文标签： javascriptdynamically change the combo box store in extjsStack Overflow