PDA

View Full Version : Hiding Home item from tabBar



imwill
26 Aug 2011, 8:58 AM
Dear community,
I'm a Sencha Touch beginner struggling with some parts of an application I'm developing right now.

I have a bottom tabbar with icons. When the app starts up I want to display my WelcomePanel first but I don't want it to be shown up in my bottom tabBar. For my other panels 1-5 I'll have a small home icon in the top left to navigate back to the WelcomePanel.

I thought about setting the WelcomePanel icon in the tabBar to display: none; by CSS but didn't know how to set an ID for it.
Then I tried disabledCls: 'x-item-disabled' but it also didn't work.

Probably the way I want to solve is not the right approach. Please, let me know if there is any better way to do it.

Is there anyway to hide the WelcomePanel Icon/Text in the tabBar but still have it as the first view?

My Viewport

App.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
id: 'viewport',
style: 'background-color: #fee;',
cardSwitchAnimation: 'slide',

tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},

initComponent: function() {

App.views.welcomePanel = new App.views.WelcomePanel();

//put instances of cards into viewport
Ext.apply(this, {
items: [
App.views.welcomePanel,
{
title: 'Tab 1',
html: '<h1>Tab 1</h1><p>Tab1</p>',
iconCls: 'team',
cls: 'card1',
confTitle: this.title
},
{
title: 'Tab 2',
html: '<h1>Tab 2</h1>',
iconCls: 'download',
cls: 'card2',
confTitle: this.title
},
{
title: 'Tab 3',
html: '<h1>Tab 3</h1>',
iconCls: 'bookmark',
cls: 'card3',
confTitle: this.title
},
{
title: 'Tab 4',
html: '<h1>Tab 4</h1>',
iconCls: 'info',
cls: 'card4',
confTitle: this.title
},
{
title: 'Tab 5',
html: '<h1>Tab 5</h1>',
iconCls: 'compose',
cls: 'card5',
confTitle: this.title
},
]
});
App.views.Viewport.superclass.initComponent.apply(this, arguments);
}

});


My WelcomePanel

App.views.WelcomePanel = Ext.extend(Ext.Panel, {
title: 'Welcome',
fullscreen : true,
id: 'WelcomePanel',
itemId: 'WelcomePanel',
cls: 'welcome',
disabledCls: 'x-item-disabled',
iconCls: 'download',
cardSwitchAnimation: 'slide',
html: 'test'
});