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

因此，一旦在组合框中选择了一个项目，就会出现一个特定的面板。我们假设我选择了报告1＆＃39;报告1＆＃39;报告1＆＃39;小组应该出现。

谢谢！

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

ExtJS在Combobox上显示面板选择

1 个答案: