Question

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

{
    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',
}

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

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

});

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

Answer 1

您希望在第一个combobox上使用更改侦听器，并使用第二个bindStore上的combobox函数绑定正确的商店：

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

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

Answer 2

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

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

Answer 3

为此，您可以使用combo.setStore(store)。

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

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: '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
            }]
        });
    }
});

动态更改extjs

3 个答案: