ExtJS Отображение панелей на Combobox Select

Question

Итак, я определил 4 панели. Каждая панель имеет свой собственный JS-файл. Я вызываю каждого из них в своем основном модальном окне через их псевдоним.

В моем приложении у меня есть это поле со списком. Я хочу отобразить панель в зависимости от выбранного элемента в поле со списком.

Вот мой код.

Главные Модальные окна:

Ext.define('App1.views.reports.MainReport', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.mainreport', 
    title: 'Main Report', 
    width: 900, 
    autoHeight: true, 
    modal: true, 
    items: [{ 
     bodyPadding: 5, 
     defaults: { 
      border: 0 
     }, 
     items: [{ 
      xtype: 'combobox', 
      fieldLabel: 'Select Report Type', 
      id: 'reportType', 
      labelWidth: 200, 
      width: 320, 
      store: reportType, 
      queryMode: 'local', 
      displayField: 'name', 
     }, { 
      //render panel here 
     }] 
    }], 
    buttons: [{ 
     text: 'Done' 
    }, { 
     text: 'Cancel' 
    }] 
}); 

Вот магазин для моего комбобокса:

var reportType = Ext.create('Ext.data.Store', { 
    fields: [ 
     'name' 
    ], 
    data: [{ 
     'name': 'Report1' 
    }, { 
     'name': 'Report2' 
    }, { 
     'name': 'Report3' 
    }, { 
     'name': 'Report4' 
    }] 
}); 

Так как только элемент выбран в выпадающем списке, появится конкретная панель. Предположим, я выбрал «Report1», появится панель «Отчет 1».

Спасибо!

Answer 1

Добавить прослушиватель select в свою папку со списком. Вы можете переключать панели внутри функции выбора прослушивателя.

{ 
    xtype: 'combobox', 
    fieldLabel: 'Select Report Type', 
    id: 'reportType', 
    labelWidth: 200, 
    width: 320, 
    store: reportType, 
    queryMode: 'local', 
    displayField: 'name', 
    listeners: { 
     select: function(combo, records, eOpts) { 
      // put in your logic to switch panel here 
     } 
    } 

} 

PS: Не уверен, какую версию вы используете, ссылка на документацию для ExtJS 5.0