ExtJS 在组合框上显示面板 Select

Question

好的，所以我已经定义了 4 个面板。每个面板都有自己的 JS 文件。我通过他们的别名在我的主要模态 window 中称呼他们每个人。

在我的应用程序中，我有这个组合框。我想根据组合框中的所选项目显示面板。

这是我的代码。

主模态 Window:

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'，应该会出现 'Report 1' 面板。

谢谢！

Answer 1

向您的组合框添加一个 select 侦听器。您可以在 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：不确定您使用的是哪个版本，文档中的 link 适用于 extjs 5.0

ExtJS 在组合框上显示面板 Select

ExtJS Displaying Panels on Combobox Select

extjs

combobox

panel

render