TabPanel show hide tabBar icons

[JeffWithG]

I'm new but love Sencha Touch...

I've created a Viewport/TabPanel with the tabBar docked at the bottom. What I would like to do is show/hide tabBar icons depending on which tab I'm on. For example; I have an 'about' tabBar icon, when the user selects about - I would like to hide the tabBar. Another example; I have a login screen, I only want to show two tabBar icons - after the user logs in, I want to add more tabBar icons.

I can't quite find what I'm looking for in the examples - anyone able to point me in the right direction??

Cheers!

[tonin10]

hello

you can try this


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var p = new Ext.Panel({
fullscreen: true,
layout: 'fit',
dockedItems: [{
overlay: true,
dock: 'top',
xtype: 'toolbar',
cls : 'barr',

items: {
text: 'Top'
}
}, {
overlay: true,
dock: 'bottom',
xtype: 'toolbar',
cls : 'barr',
items: {
text: 'Bottom'
}
}],
items: {
xtype: 'carousel',
items: [{
layout: {
type: 'vbox',
pack: 'center'
},
items: {
xtype: 'button',
text: 'Hide toolbars',
handler: function(){
p.dockedItems.each(function(c){
c.hide({type:'fade'});
});
}
}
}, {
layout: {
type: 'vbox',
pack: 'center'
},
items: {
xtype: 'button',
text: 'Show toolbars',
handler: function(){
p.dockedItems.each(function(c){
c.show({type:'fade' }, {style: {opacity:0.1}});
});
}
}
}]
}
});
}
});

[JeffWithG]

Thanks so much for the reply tonin10. I did figure it out, the biggest issue I was having was scope and how to use insert/add/remove/setActiveItem. The biggest issue I had was understanding that I needed at least one item in the TabPanel before the add/remove would work as I expected.

Still loving Sencha!