Dynamically adding a TabPanel to a Panel Region.

Question

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

Answer 1

Hey,

I assume pageTabPanel isn't defined at the time you trigger the handler. Try to remove the var keyword in front of "var pageTabPanel =" to make it a global variable.

If that works, it's a scope/variable issue. The better solution is to give the tabpanel an id and call Ext.getCmp('tabpanelid').render('contentpanel') in your renderPageTabs method.

Hope that helps.

Regards, Steffen

Answer 2

I don't think you are using the render method in the correct way.

Tab Panel: render

If you are using a Container object to house this Component, then do not use the render method.

Is your tree going to allow a tab to be opened any time a tree node is clicked? Will there be multiple tabs at one time? If so, I think maybe you just want to use .add(), instead of .render(). After you do .add(), you will also need to call .doLayout() on the container panel as well so it will show up.

You may need to alter your renderPageTabs function so that it builds the pageTabPanel object inside of it for each tab, then uses .add() to place it in the contentpanel object.