как показать другую панель в центре окна на основе события нажатия кнопки extjs4

Question

участник форума

У меня возникли проблемы с отображением другой панели в центральной части окна макета границы.

Предположим, у меня есть окно макета границы с восточной стороной, содержащее другую кнопку, которая при нажатии отобразит сетку в центре окна макета.

мое окно показано ниже с востоком, содержащим кнопки, а центр пуст.

мой обновленный код контроллера указан ниже

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

У вас есть два варианта:

1. Сделайте центральную часть контейнера и удалите старые / добавьте новые вещи, если это необходимо.

2. Если у вас ограниченное количество страниц контента, сделайте раскладку по центру и создайте сразу все страницы. Только один будет виден. Вы можете изменить видимость, когда пользователь нажимает определенную кнопку.