Javascript 在extjs中动态更改组合框存储

我有两个组合框。当选择第一个组合框的第一个元素时，第二个组合框的元素需要相应地更改

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


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

因此，如果我选择ComboBox类型的第一个元素，状态组合框需要有处于状态的元素。否则，它必须包含状态中的元素

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'
        }
    ]

});

---

这意味着我的第二个组合框的存储部分需要动态更改。

将更改事件绑定到第一个组合框。通过传递第一个组合框的选定值，为第二个组合框加载该函数中的存储数据

     {
        xtype: 'combobox',
        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*/
            });
         }
       }
     }

---

将更改事件绑定到第一个组合框。通过传递第一个组合框的选定值，为第二个组合框加载该函数中的存储数据

     {
        xtype: 'combobox',
        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*/
            });
         }
       }
     }

---

您希望在第一个

组合框上使用更改侦听器，并在第二个
组合框上使用
bindStore
函数绑定正确的存储：

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

您希望在第一个
组合框上使用更改侦听器，并在第二个
组合框上使用
bindStore
功能绑定正确的存储：

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

为此，您可以使用

在此中，我使用创建了一个演示。我希望这将有助于/指导您实现您的要求

代码片段

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: 'combobox',
                fieldLabel: 'Select Store',
                store: {
                    type: 'storetype'
                },
                queryMode: 'local',
                listeners: {
                    select: function (cmp, record) {
                        var combo = cmp.up('panel').down('#myStore');

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

为此，您可以使用

在此中，我使用创建了一个演示。我希望这将有助于/指导您实现您的要求

代码片段

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: 'combobox',
                fieldLabel: 'Select Store',
                store: {
                    type: 'storetype'
                },
                queryMode: 'local',
                listeners: {
                    select: function (cmp, record) {
                        var combo = cmp.up('panel').down('#myStore');

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