Компонент рендеринга 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)
            }        
        }