タブパネル内の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) 
      }   
     }