Dynamically adding a TabPanel to a Panel Region

I have a Panel layout with a TreePanel in one region. A user clicks on an node in the tree and a TabPanel should be displayed in another region with information, editing tools etc. for that tree node.

I have a working layout with tree panel and an on('click') event that fires. However, I don't seem to be able to get the TabPanel to be able to render in the layout.

If I allow the TabPanel to render as part of the panel rather than in the on click event it works as expected.

I'm not sure what I'm missing in terms of rendering the tab panel into a named element. Any help would be appreciated.

Below is the code in question.

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