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

3 Answers 3

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*/
            });
         }
       }
     }