title: how to show different panel on the center of the window based on button click event extjs4
body: <p>forum member</p>
  
  <p>I am having some problems in displaying different panel on the center area of border layout window.</p>
  
  <p>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.</p>
  
  <p>my window is shown below with east containing buttons and center is empty.
  <img src="https://i.stack.imgur.com/XXuPl.png" alt="enter image description here"></p>
  
  <p><strong>my updated controller code is given below</strong></p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>});</p>
  
  <p><strong>my main view code is given below</strong></p>
  
  <pre><code>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);
      }
  });
  </code></pre>
  
  <p><strong>when the company button is clicked I get the alert window.</strong> </p>
  
  <p>But based on the button click I want to open different detail view to the center layout of the window.</p>
  
  <p>Please suggest me some solution, so I can view different window on the border layout of the window as shown above.</p>