如何顯示基於組合框選擇在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

下面是更改方法通過組合選擇面板

這裏是簡單的小提琴例子fiddle
問候： 薩勒曼·哈桑:)

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版或以上，則組合框的選擇屬性綁定到activeItem與面板作爲其子項的容器的屬性。此容器的佈局爲卡片。例如：

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。