Ext JS Tab Panel - Dynamic Tabs - Tab Exists Not Working

Question

Hi

Would appreciate if somebody could help me on this. I have a Tree Panel whose nodes when clicked load a tab into a tab panel.

The tabs are loading alright, but my problem is duplication. I need to check if a tab exists before adding it to the tab panel. I cant seem to have this resolved and it is eating my brains. This is pretty simple and I have checked stackoverflow and the EXT JS Forums for solutions but they dont seem to work for me or I'm being blind.

This is my code for the tree:

var opstree = new Ext.tree.TreePanel({
                renderTo: 'opstree',
    border:false,
                width: 250,
                height: 'auto',
                useArrows: false,
                animate: true,
                autoScroll: true,
                dataUrl: 'libs/tree-data.json',
                root: {
                    nodeType: 'async',
                    text: 'Tool Actions'
                },
                listeners: {
                    render: function() {
                        this.getRootNode().expand();
                    }
                }
            })

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

   function renderPage(tabId) {

    var TabPanel = Ext.getCmp('content-tab-panel');
    var tab = TabPanel.getItem(tabId);

    //Ext.MessageBox.alert('TabGet',tab);

    if(tab){
     TabPanel.setActiveTab(tabId);
    }
    else{
     TabPanel.add({
     title: tabId,
     html: 'Tab Body ' + (tabId) + '

',       
     closable:true
     }).show(); 

     TabPanel.doLayout();
    }    
   }
        });

and this is the code for the Tab Panel

new Ext.TabPanel({
    id:'content-tab-panel',
                region: 'center',
                deferredRender: false,
    enableTabScroll:true,
                activeTab: 0,

                items: [{
                    contentEl: 'about',
                    title: 'About the Billing Ops Application',
                    closable: true,
                    autoScroll: true,
     margins: '0 0 0 0'
                },{
                    contentEl: 'welcomescreen',
                    title: 'PBRT Application Home',
                    closable: false,
                    autoScroll: true,
     margins: '0 0 0 0'
                }]
            })

Can somebody please help?

Answer 1

Untested, but I think this would work.

if (!Ext.getCmp('content-tab-panel')) {
    Tabpanel.add({ config }).show();
    Tabpanel.doLayout();
}

Answer 2

The key to doing this is to build a consistent naming convention for your tabs, so you can reliably know if that tab has been added yet. It looks like you've chosen to use the node's id - which is fine. When you call TabPanel.add, send the node's id as the new tab's id. Then you can test to see if it exists with TabPanel.findById.

Note: some of your variable names are pretty confusing. TabPanel is a poor choice for a variable name, keep them beginning with lower case and never name them after the framework classes. Try tabs or tp. Also, the naming convention will be clearer if you prefix the node id with a string like tab-. Adding a new tab could also be encapsulated into a custom method on your tab panel, if you extend it.

Answer 3

You should replace the function renderPage(tabId)with the following

function renderPage(tabId) {

var TabPanel = Ext.getCmp('content-tab-panel');
var tab = TabPanel.getItem(tabId);

//Ext.MessageBox.alert('TabGet',tab);

if(tab){
 TabPanel.setActiveTab(tabId);
}
else{
 TabPanel.add({
 title: tabId,
 html: 'Tab Body ' + (tabId) + '

',
id: tabId,// this line very important, without this its not working
closable:true }).show();

 TabPanel.doLayout();
}    

}

Its working

Thanks in advance

Sarwar