PDA

View Full Version : SetActiveItem adds Icon to TabBar



matdar
6 Sep 2011, 2:54 AM
Hello

I have a fairly simple MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?

My viewport:

app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',

initComponent: function() {

// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});

//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});


I then have a controller that fires on an item tap in my list:


app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);


The panel opens but adds to the tabbar as well.

I'd appreciate any pointers!

siebmanb
5 Oct 2011, 12:32 PM
Here is a workaround from mikeyroy
http://www.sencha.com/forum/archive/index.php/t-111035.html

Couldn't find a proper way. Yet.

curmil
8 Nov 2011, 5:12 PM
Here is a workaround from mikeyroy
http://www.sencha.com/forum/archive/index.php/t-111035.html

Couldn't find a proper way. Yet.

I used a modified version of this for ST2:



initialize: function() {
this.callParent();
this.onAfter('activeitemchange', function(view, value, oldValue) {
while (this.getTabBar().items.length > 4) {
this.getTabBar().items.items[4].destroy();
}
});
}


Not sure if it's backwards compatible and if anyone has a better solution please post it.

djaytwt
23 Dec 2011, 8:58 AM
Hi ,
I am facing exactly same issue, were you able to find the fix ?
Do share ,
thank you

siebmanb
24 Dec 2011, 1:51 AM
I coded this below. Call it every time you use SetActiveItem with a view not in the tabs. In order to be generic, use a variable to store the number of Tabs at startup.


hideExtraTab: function() {
if (this.homeView.getTabBar().items.length > this.NumberOfTabs)
this.homeView.getTabBar().items.items[this.NumberOfTabs].destroy();
},



this.NumberOfTabs = this.homeView.getTabBar().items.length;

And if you want one of the tabs to stay active (by default none is active) :

this.homeView.getTabBar().items.items[2].addCls('x-tab-active');

matdar
24 Dec 2011, 2:11 AM
I didn't find a way to fix this directly and ended up following the suggestion to remove the added icon. Not ideal but I didn't have the time to start drilling down into the ST code. I'm hoping that ST 2.0 will be better, but curmil's post suggests that it's not.

Worthwhile raising as a bug?

Thanks

siebmanb
24 Dec 2011, 2:18 AM
Maybe they will answer that it is not a bug but a feature B)

Philippe Quemener
14 Feb 2012, 4:49 AM
...is to overwrite the onAdd method in your TabPanel, for example like this:



onAdd: function(cmp, idx)
{
if(shouldBeAddedToTabBar())
{
var tabBar = this.tabBar;

cmp.tab = tabBar.insert(idx, {
xtype: 'tab',
card: cmp
});
tabBar.doLayout();
}
},