Ext JS Tab Panel - Dynamic Tabs - Tab Exists Not Working
- by Joey Ezekiel
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?
