Add TabPanel dynamically to panel area

Question

I have a panel layout with a TreePanel in the same region. The user clicks on a node in the tree, and the TabPanel should be displayed in another region with information, editing tools, etc. For this tree node.

I have a working layout with a tree panel and an on ('click') event that fires. However, it seems like I can't get the TabPanel to display in the layout.

If I allow the TabPanel to appear as part of the panel, and not in the on click event, this works as expected.

I'm not sure what I am missing in terms of displaying the tab bar in a named element. Any help would be greatly appreciated.

Below is the code.

Many thanks

Stephen

    var treePanel = new Ext.tree.TreePanel({
    id: 'tree-panel',
    title : 'Site Tree',
    region : 'center',
    height : 300,
    minSize: 150,
    autoScroll: true,
    rootVisible: false,
    lines: false,
    singleExpand: true,
    useArrows: true,

    dataUrl:'admin.page.getSiteTreeChildren',
root: {
        nodeType: 'async',
        text: 'nowt here',
        draggable: false
    }
});

treePanel.on('click', function(n){
    var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    renderPageTabs(n.id);
}); 

function renderPageTabs(resourceid) {
    pageTabPanel.render('contentpanel');
    alert('resourceid'+resourceid);
}

var pageTabPanel = new Ext.TabPanel({
    activeTab: 0,
    plain:true,
    defaults:{autoScroll: true},
    items:[{
            title: 'Page Overview',
            html: 'This will be the page overview detail tab'
        },{
            title: 'Content Editor',
            html: 'This will be the page editor tab'
        },{
            title: 'Property Editor',
            html : 'This will be the property editor tab'
        },{
            title: 'Workflow',
            html : 'This will be the workflow tab'
        }
    ]
})

var contentPanel = {
    id : 'contentpanel',
    region : 'center',
    margins : '0 0 0 0',
    border : false
};

// TODO perhaps the tool bar should be in a north region of this panel
var dashPanel = new Ext.Panel({
            layout : 'border',
            height : 500,
            items : [{
                        layout : 'border',
                        id : 'site-nav',
                        region : 'west',
                        collapsible : true,
                        border : false,
                        split : true,
                        margins : '0 0 0 0',
                        width : 275,
                        minSize : 100,
                        maxSize : 500,
                        items : [actionPanel, treePanel]
                    }, contentPanel],
            renderTo : 'dashboardPanel'
        });

Answer 1

, render.

:

Container , .

node? ? , , , .add(), .render(). , .add(), .doLayout() , .

renderPageTabs, pageTabPanel , .add(), contentpanel.

Answer 2

, pageTabPanel . var "var pageTabPanel =", .

, /. - tabpanel id Ext.getCmp('tabpanelid'). Render ('contentpanel') renderPageTabs.

, .

,