如何在ExtJS中显示基于组合框选择的面板

Question

这是我的代码：

{
    xtype: 'combo',
    width: 150,
    value: 'select last..',
    store: new Ext.data.SimpleStore({
        data: [
            [0, 'first'],
            [1, 'second'],
            [2, 'third']
        ],
        id: 0,
        fields: ['value', 'text']
    }),
    valueField: 'value',
    displayField: 'text',
    triggerAction: 'all',
    editable: false,
    name: 'lastComboSelection',
    itemId: 'lastCombo',
    listeners: {
        change: function (combo, newValue, oldValue) {
            //based on selection want to display a panel
        }
    }
},{
    xtype: 'firstPanel',
    name: 'first text field'
},{
    xtype: 'SecondPanel',
    name: 'second text field '
},{
    xtype: 'thirdPanel',
    name: 'last text field '
}

Answer 1

这是通过组合选择面板的更改方法

这是简单的小提琴示例小提琴
问候：Salman Hassan :)

 listeners: { change: function(combo, newVal, oldVal, eOpts) { if (newVal == 'Select Panel 1') { var panel1 = Ext.ComponentQuery.query("#panel1")[0].show(); var panel2 = Ext.ComponentQuery.query("#panel2")[0].hide(); var panel3 = Ext.ComponentQuery.query("#panel3")[0].hide(); } else if (newVal == 'Select Panel 2') { var panel1 = Ext.ComponentQuery.query("#panel1")[0].hide(); var panel2 = Ext.ComponentQuery.query("#panel2")[0].show(); var panel3 = Ext.ComponentQuery.query("#panel3")[0].hide(); } else if (newVal == 'Select Panel 3') { var panel1 = Ext.ComponentQuery.query("#panel1")[0].hide(); var panel2 = Ext.ComponentQuery.query("#panel2")[0].hide(); var panel3 = Ext.ComponentQuery.query("#panel3")[0].show(); } } } 

Answer 2

如果使用的是Ext JS 5.0或更高版本，则将combobox的selection属性绑定到以面板作为其子项的容器的activeItem属性。 该容器的布局为card 。 例如：

Ext.define('OnlyOnePanel', {
        extend: 'Ext.panel.Panel',
        viewModel: {},
        layout: 'vbox',
        items: [{
            xtype: 'combobox',
            width: 150,
            emptyText: 'Select..',
            store: new Ext.data.SimpleStore({
                data: [
                    [0, 'first'],
                    [1, 'second'],
                    [2, 'third']
                ],
                fields: ['value', 'text']
            }),
            valueField: 'value',
            displayField: 'text',
            value: 'first',
            triggerAction: 'all',
            editable: false,
            name: 'lastComboSelection',
            itemId: 'lastCombo',
            bind: {
                selection: '{selectedItem}'
            }
        }, {
            xtype: 'container',
            layout: 'card',
            bind: {
                activeItem: '{selectedItem.value}'
            },
            items: [{
                xtype: 'panel',
                html: 'First Panel'
            }, {
                xtype: 'panel',
                html: 'Second Panel'
            }, {
                xtype: 'panel',
                html: 'Third Panel'
            }]
        }]
    });

检查这个小提琴 。