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