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

Posted by Joey Ezekiel on Stack Overflow See other posts from Stack Overflow or by Joey Ezekiel
Published on 2010-03-08T14:03:02Z Indexed on 2010/03/08 14:06 UTC
Read the original article Hit count: 3242

Filed under:

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?

© Stack Overflow or respective owner

Related posts about extjs