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
extjs
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