PDA

View Full Version : TabPanel show hide tabBar icons



JeffWithG
15 Apr 2011, 3:52 PM
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
15 Apr 2011, 11:32 PM
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
26 Apr 2011, 3:25 PM
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!