how to show different panel on the center of the window based on button click event extjs4

Question

forum member

I am having some problems in displaying different panel on the center area of border layout window.

Consider I am having border layout window with east side containing different button, which on click will display the grid on the center of the layout window.

my window is shown below with east containing buttons and center is empty. enter image description here

my updated controller code is given below

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();
}

});

my main view code is given below

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

when the company button is clicked I get the alert window.

But based on the button click I want to open different detail view to the center layout of the window.

Please suggest me some solution, so I can view different window on the border layout of the window as shown above.

Justin Justin · Accepted Answer · 2012-03-16T12:45:34

I would go with a card layout. The easiest thing would be to give each component an itemId. Then in your controller you would have:

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

Then you can reference using get... within the scope of your controller like:

var companyCard = this.getCompanyCard();

To swap out the cards, you would do something like:

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

how to show different panel on the center of the window based on button click event extjs4

2 Answers