extjs4渲染組件在標籤面板

Question

你可能注意到，我是extjs的新手;我自己設法做了一些事情，但事實是我不瞭解某些事情。

我在左側有這棵樹，在右側有一個標籤面板的內容面板。基本上我想要的是當用戶點擊左側的樹時，在選項卡面板上加載不同的選項（調用不同的組件）。現在，當用戶點擊第一個選項時，它會在內容面板上顯示與該選項相關的組件。 （我敢肯定這不是最優雅的顯示方式，但至少現在它可以工作），但是，我的問題是，一旦它加載，組件似乎不會加載到正確的選項卡中，即使我改變標籤組件留在同一個地方。

我在論壇上閱讀了一些主題後嘗試使用rbac.tabs.doLayout();，沒有成功。

我真的很感謝你們給我的幫助，所以我可以指出正確的方向。

這裏是我的代碼：

rbac.userPanel = Ext.create('role.formUserRbac'); 
    rbac.grid = Ext.create('role.gridUserRbac'); 

    rbac.tabsShowPanel = Ext.define('mainPanel',{ 
     extend:'Ext.panel.Panel',    
     border:'false', 
     initComponent: function() { 
       this.callParent(); 
     }, 
     items:[rbac.userPanel,rbac.grid] 
    }); 

    tabsShowPanel = Ext.create('rbac.tabsShowPanel'); 

    function test(nameTab,des){ 
    rbac.addTab(true,nameTab); 
    console.log(des); 
     if (des=='users'){ 
     //console.log(rbac.tabs.addDocked(rbac.testPanel)); 
     rbac.tabs.addDocked(tabsShowPanel) 
     } 

    } 

    Ext.define('treeModel', { 
    extend: 'Ext.data.Model', 
     fields: [ 
      {mapping: 'id', name: 'id', type: 'string'}, 
      {mapping: 'text', name: 'text', type: 'string'}, 
      {mapping: 'descripcion', name: 'descripcion', type: 'string'}, 
     ] 
    }) 

    rbac.TreeStore = Ext.create('Ext.data.TreeStore', { 
     proxy: { 
      type: 'ajax', 
      url: 'service.php', 
      extraParams: { 
       accion:'loadtree' 
      }, 
      reader: { 
       type: 'json', 
       root: 'nodes', 
      } 
     }, 
     autoLoad:true, 
     sorters: [{ 
      property: 'id', 
      direction: 'ASC' 
     },{ 
      property: 'id', 
      direction: 'ASC' 
     }], 
     root: { 
      id: 0, 
      expanded: true 
     }, 
     model:'treeModel' 
    }); 

    rbac.treePanel = Ext.create('Ext.tree.Panel', { 
     id: 'tree-panel', 
     title: 'Navegaci\u00f3n', 
     region:'west', 
     split: true, 
     height: 360, 
     width: 180, 
     minSize: 150, 
     rootVisible: false, 
     autoScroll: true, 
     collapsible: true, 
     collapseMode: 'mini', 
     store: rbac.TreeStore 
    }); 

    var currentItem; 

    rbac.tabs = Ext.create('Ext.tab.Panel', { 
     resizeTabs: true, 
     enableTabScroll: true, 
     defaults: { 
      autoScroll:true, 
      bodyPadding: 10 
     }, 
     items: [{ 
      title: 'Men\u00FA Principal', 
      iconCls: 'tabs', 
      closable: false 
     }] 
    }); 

    rbac.addTab = function (closable,tabName) { 
     rbac.tabs.add({ 
      title: tabName, 
      iconCls: 'tabs', 
      closable: !!closable 
     }).show(); 
    //rbac.tabs.doLayout(); 
    }   

    rbac.treePanel.getSelectionModel().on('select', function(selModel, record) { 
     if (record.get('leaf')) { 
      var des = record.data.descripcion; 
      var nameTab = record.data.text; 
      test(nameTab,des); 
     } 
    }); 

    rbac.contentPanel = { 
     id: 'content-panel', 
     region: 'center', 
     layout: 'card', 
     margins: '2 5 5 0', 
     activeItem: 0, 
     border: false, 
     items: [rbac.tabs], 

    }; 

    rbac.panel = Ext.create('Ext.Viewport', { 
     layout: 'border', 
     title: 'Ext Layout Browser', 
     items: [{ 
      xtype: 'box', 
      id: 'header', 
      region: 'north', 
      html: '<img src="images/test.png"/>', 
      height: 70 
     },{ 
      layout: 'border', 
      id: 'layout-browser', 
      region:'center', 
      border: false, 
      split:true, 
      margins: '2 0 5 5', 
      width: 275, 
      minSize: 100, 
      maxSize: 500, 
      items: [rbac.treePanel, rbac.contentPanel] 

     }], 
     renderTo: Ext.getBody() 
    }); 

Answer 1

解決：

rbac.addTab = function (closable,tabName) { 
      return rbac.tabs.add({ 
       title: tabName, 
       iconCls: 'tabs', 
       closable: !!closable 
      }); 

     } 

function test(nameTab,des){ 
     var newTab = rbac.addTab(true,nameTab); 
     rbac.tabs.setActiveTab(newTab); 
     if (des=='users'){ 
       newTab.add(tabsShowPanel) 
      }   
     }