Question

论坛会员

我在边框布局窗口的中心区域显示不同的面板时遇到了一些问题。

考虑我的边框布局窗口，东边包含不同的按钮，点击它会在布局窗口的中心显示网格。

我的窗口如下图所示，包含东方按钮，中心为空。 enter image description here

我更新的控制器代码在下面

Ext.define('rms.controller.companymgt.CompanyMgtController',{
extend: 'Ext.app.Controller',

stores:['companyStore'],
models:['companyModel'],
views: [
        'companymgt.companyMain',
        'companymgt.companyView',
        'companymgt.companyDetail',
        'companymgt.companyAdd',
        'companymgt.fileUpload'
        ,'companymgt.departmentDetail',
        'companymgt.designationDetail',
        'companymgt.groupDetail'
        ],

refs: [{
    ref: 'companyMain',
    autoCreate: true,
    selector: 'companymain',
    xtype: 'companymain'
},{
    ref: 'companyAdd',
    autoCreate: true,
    selector: 'companyadd',
    xtype: 'companyadd'
},{
    ref: 'fileUpload',
    autoCreate: true,
    selector: 'fileupload',
    xtype: 'fileupload'
},{
    ref: 'departmentDetail',
    autoCreate: true,
    selector: '#departmentdetail',
    xtype: 'departmentdetail'
},{
    ref: 'designationDetail',
    autoCreate: true,
    selector: '#designationdetail',
    xtype: 'designationdetail'
},{
    ref: 'groupDetail',
    autoCreate: true,
    selector: '#groupdetail',
    xtype: 'groupdetail'
},{
    ref: 'companyDetail',
    autCreate: true,
    selector: '#companydetail',
    xtype: 'companydetail'
}],

init: function() {
    this.control({
        '#companyview button[action=company-view]': {
            click: this.createCompanyview
        },
        '#companyview button[action=department-view]': {
            click: this.createDepartmentview
        },
        '#companyview button[action=designation-view]': {
            click: this.createDesignationview
        },
        '#companyview button[action=group-view]': {
            click: this.createGroupview
        },      
        '#companyview button[action=file-view]': {
            click: this.createFilemgtview
        },

        '#companydetailtoolbar #mnuDept': {
            click: this.createDepartmentnew
        },
        '#companydetailtoolbar #mnuExcel': {
            click: this.exportExcel
        },
        '#companydetailtoolbar #mnuCSV': {
            click: this.exportCSV
        }
    });
},

createCompanyview: function(btn) {
    alert('company view clicked');
},

createDepartmentview: function(btn) {
    alert('department view clicked');
    var departmentCard = this.getDepartmentDetail();
    var mainComp = this.getCompanyMain();
    mainComp.getLayout().setActiveItem('departmentCard');
},

createDesignationview: function(btn) {
    alert('designation view clicked');
},

createGroupview: function(btn) {
    alert('group view clicked');
},

createFilemgtview: function(btn) {
    alert('FILE MGT WINDOW');
    this.getFileUpload().show();
},

createDepartmentnew: function(obj) {
    this.getCompanyAdd().show();
}

}）;

我的主要观看代码如下

Ext.define('rms.view.companymgt.companyMain', {
    extend: 'rms.model.desktopmgt.Module',
    alias: 'widget.companymain',
    requires: ['rms.view.companymgt.companyView','rms.view.companymgt.companyDetail'],
    id: 'companymain',

    init: function() {
        this.launcher = {
                text: 'Company Management System',
                iconCls: 'project-mini-icon',
                handler: this.createWindow,
                scope: this
        };
    },

    createWindow: function() {
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('companymgt-win');
        if(!win){
            win = desktop.createWindow({
                id: 'companymgt-win',
                title: 'Company Management System',
                height: 566,
                width: 900,
                layout: 'border',
                constrain: true,
                modal: true,
                closeAction: 'destroy',
                items: [{
                    region: 'west',
                    collapsible: true,
                    //html: 'MAIN VIEW',
                    xtype: 'companyview',
                    flext:1
                },{
                    region: 'center',
                    collapsible: true,
                    //html: 'DETAIL VIEW',
                    xtype: 'companydetail',
                    flex:3
                }]
            });
        }
        win.show();
        return win.setPosition(100,100);
    }
});

点击公司按钮后，我会看到警告窗口。

但是根据按钮的点击，我想打开不同的细节视图到窗口的中心布局。

请给我一些解决方案，这样我就可以在窗口的边框布局上查看不同的窗口，如上图所示。

Answer 1

我会选择卡片布局。最简单的方法是给每个组件itemId。然后在你的控制器中你会有：

, refs: [
  {
    ref: 'mainCardComponent'
    , selector: '#mainCardComponent'
  },
  {
    ref: 'companyCard'
    , selector: '#companyCard'
  },
  {
    ref: 'departmentCard'
    , selector: '#departmentCard'
  }...

然后，您可以在控制器范围内使用get...进行引用，如：

var companyCard = this.getCompanyCard();

要更换卡片，您可以执行以下操作：

var mainComp = this.getMainCardComponent();
mainComp.getLayout().setActiveItem('companyCard');

Answer 2

您有两种选择：

将中心部分设为容器，并在需要时删除旧的/添加新内容。
如果您的内容页面数量有限，请将中心部分布局设为“卡片”并立即创建所有页面。只有一个可见。用户单击某个按钮时，您可以更改可见性。

如何根据按钮单击事件extjs4在窗口中心显示不同的面板

2 个答案: