extjs4 render component in tab panel

Question

As you might notice, I'm a newbie in extjs; I have managed to do some stuff myself but the truth is that I don't understand certain things.

I have this tree on the left side, and a content panel with a tab panel on the right side. Basically what I want is to load different options (calling different components) on the tab panel when the user clicks on the tree on the left side. Right now, when the user clicks on the first of the options, it displays the components that are related to that option on the content panel. (I'm sure is not the most elegant way of showing this, but at least for now it works) however, my problem is the fact that the components doesn't seem to load in the right tab, once it loads, even if I change tabs the components stay in the same place.

I have tried using the rbac.tabs.doLayout(); after reading some topics here in the forum, with no success.

I really appreciate the help you guys can give me so i can point in the right direction.

Here is my code:

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

New user, don't want to bash you... :) ...yet: ever wondered why there is a formatting language for code on StackOverflow? Hint: because you are suppose to do something else than linking a pastebin drop... ;) — mac
I don't know if you can already or not (if I remember correctly there is a time limit), but you should post your solution as an answer and select it as "accepted" (the green thick). This way other visitors with the same problem will immediately know there is a solution. On top of that you will also get a bronze badge, if I am not mistaken... :) — mac

Solar Confinement Solar Confinement · Accepted Answer · 2011-12-12T14:36:28

Solved:

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

extjs4 render component in tab panel

1 Answers