javascript - 动态更改 extjs 中的组合框存储

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 上使用更改监听器，并在第二个 combobox 上使用 bindStore 函数来绑定(bind)正确的商店:

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