PDA

View Full Version : Dynamic tab creation and removal



MoShAn480
1 May 2007, 3:10 PM
Hi,

I have a chat application i am working on. When a new session starts, a user tab is created. I am not making the tabs closeable since the chat is exited through clicking another button on toolbar. When this happens i remove the tab as well after processing a session cleanup.

The problem that i have is when i dynamically create the tabs, then remove them by calling tabPanel.removeTab, there is a line which remains rendered if all tabs are removed. On the same note, if i do make each tab closeable and click the close button to remove them, then this not happen. Looking into the Ext tab panel code, it seems it is removed just as same as calling tabPabel.removeTab.

Let me know if anyone out there had the same issue and got it resolved....i may be missing something here...thanks!

kubens
1 May 2007, 10:08 PM
If you want to remove a content panel on a region then use this:



layout.getRegion('east').remove(panel);


If you want to ensure that the region will hide automaticall, when the last content panel was removed then ensure that you have set following attribute on region:



hideWhenEmpty: true


By the way something went wrong with your image 8-|

Br
Wolfgang

MoShAn480
2 May 2007, 1:43 PM
hi,

thanks for the reply. That did not work though. As i mentioned, it works 100% great if i use the close button the tab itself. But, if i call remove from the tab panel, it leaves some generated div's.
From the code it looks like there is no different between what i am doing, and what the toolkit does when i click the close button on the tab itself???

I may be missing something still....

jay@moduscreate.com
20 Jun 2007, 11:39 AM
hi,

thanks for the reply. That did not work though. As i mentioned, it works 100% great if i use the close button the tab itself. But, if i call remove from the tab panel, it leaves some generated div's.
From the code it looks like there is no different between what i am doing, and what the toolkit does when i click the close button on the tab itself???

I may be missing something still....

For the record i have the exact same problem.

the clickable X is a 'closeClick function which is using the exact same public method removeTab


closeClick : function(e){
var o = {};
e.stopEvent();
this.fireEvent("beforeclose", this, o);
if(o.cancel !== true){
this.tabPanel.removeTab(this.id);
}
},




/**
* Remove a TabPanelItem.
* @param {String/Number} id The id or index of the TabPanelItem to remove.
*/
removeTab : function(id){
var items = this.items;
var tab = items[id];
if(!tab) return;
var index = items.indexOf(tab);
if(this.active == tab && items.length > 1){
var newTab = this.getNextAvailable(index);
if(newTab)newTab.activate();
}
this.stripEl.dom.removeChild(tab.pnode.dom);
if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
this.bodyEl.dom.removeChild(tab.bodyEl.dom);
}
items.splice(index, 1);
delete this.items[tab.id];
tab.fireEvent("close", tab);
tab.purgeListeners();
this.autoSizeTabs();
},

jay@moduscreate.com
21 Jun 2007, 7:09 AM
not a bug, call it from your BL object.



clearPanel: function(region, panel) {
var tabPanel = layout.getRegion(region).getTabs()

if (tabPanel.getTab('title') ) {
layout.beginUpdate();
layout.getRegion(region).remove(panel);
layout.endUpdate();
}

}