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

Question

Would appreciate if somebody could help me on this.

I have a treepanel whose nodes when clicked load a tab into a tabpanel.

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) + '<br/><br/>',
            closable: true
        }).show();

        TabPanel.doLayout();
    }
}

And this is the code for the tabpanel:

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

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 2

There has been some modifications on the Extjs API .findById() doesn't work, to implement this in ExtJs 4.0 try this

function AddTabs(tabTitle,yourTabId){
    var YourTabPanel = Ext.getCmp('YourTabPanelId');
    var TabToCheck = YourTabPanel.getChildByElement(yourTabId);
    if(TabToCheck){
       YourTabPanel.setActiveTab(yourTabId);
    } else {
    YourTabPanel .add({
        title:tabTitle,
        id:nId,
        closable:true,
        autoScroll:true,
        layout: 'fit',
        }).show();
  }
  YourTabPanel.doLayout();
}