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

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

这是简单的小提琴示例fiddle
问候： 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的选择属性绑定到容器的 activeItem 属性，并将panel作为其子项。此容器的布局为卡。例如：

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

选中fiddle。

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

2 个答案: