PDA

View Full Version : Tabs not removed from TabBar when associated card destroyed



Bucs
28 Jan 2011, 2:33 PM
I have a TabBar that has an initial config of the following and is assigned to the app's Viewport in my MVC app:



{
xtype: 'viewHome',
iconCls: 'home'
},
{
xtype: 'viewSearch',
iconCls: 'search'
},
{
xtype: 'viewSameDay',
iconCls: 'star'
},
{
xtype: 'viewCart',
iconCls: 'cart'
}


When I am on the cart, I allow users to remove items from the cart and do other things, and it's a whole lot easier to destroy the cart and re-instantiate it that it is to update portions at a time. However, when do this, the tabbar code wants to Add a new icon to the tabpanel when the cart is re-instantiated, but yet it did not remove the old tab properly from the tab, it remains on the tabbar. If I look at the tabbar items.items collection, the origianal Cart tab is not there in the items collection, but it IS on my screen. I have called doLayout on the tabbar, component container, the viewport...everything, but nothing removes the tab.

Personally, I am not a big fan at all of the way in which the tabbar auto manages the tabs on the bar based on cards configed, added, or removed from the tabbar...causes way more issues that it helps imo. I would love to simply add my own and disconnect them altogether from the auto management. Is this possible? Any ideas as to why the original destroyed card's tab is not removed from the toolbar?

Thx

Thanks...

AndreaCammarata
29 Jan 2011, 3:35 AM
Hi Bucs.
How are you trying to remove a tab from your TabPanel?
I post you a really simple example that works great for me.



Ext.setup({
onReady: function() {

var panel = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'TabPanel Example',
items: [{
text: 'Remove Star Tab',
handler: function(){
panel.remove('cardStar');
}
}]
}],
items: [{
title: 'Home',
itemId: 'cardHome',
html: 'Home Tab'
},{
title: 'search',
itemId: 'cardSearch',
html: 'Search Tab'
},{
title: 'star',
itemId: 'cardStar',
html: 'Star Tab'
},{
title: 'cart',
itemId: 'cardCart',
html: 'Cart Tab'
}]
});
}

});
Notice that the remove methods allows you to auto destroy, by default, the card on removing.
If this example doesn't help you, could you provide additionals details of your code?

Hope this helps.

Bucs
30 Jan 2011, 5:49 AM
Thanks, but I think you are missing my point. the TabPanel is a little more involved than your example. My tabs are previously defined xtypes, and the TabPanel is assigned to the viewport for the app. These main tabs instantiate other cards during the application and add them to the viewport using the setActiveItem(cmp, {anim config}). These cards are used and then destroyed during the course of the application. The first problem with the setActiveItem is that it tries to manage too much for you by also adding a tab to the tabbar when you add a new card to the viewport. this is undesirable in most scenarios in my opinion . After my initially defined set of tabs, I don't want to add any additional tabs for newly instantiated tabs, I just want to use them in the viewport and destroy them.

This also creates a problem when I want one of my main tabs to load a panel that will be destroyed during the course of the application, and may be instantiated again if clicked during the same session. The setActiveItem will add another tab to the tabbar for that card when I don't want or need another tab. In order to stop this behavior, you have to override the onAdd method of the viewport to not add new tabs after your initially configured set of tabs,

I would be nice to have a param on the setActiveItem method to tell it whether or not to also add tabs to TabPanel. Probably have to override the method for that.