View Full Version : Want to Hide One Tab Selector/Item from a TabPanel Toolbar

8 Mar 2011, 3:45 PM
I have a basic TabPanel which comprises three panels. One of those items is a details view which should only be viewable when an item in a list from one of the other panels is tapped. So I want to hide the detail panel from the toolbar that links to its respective children panels.

The TabPanel looks like this (irrelevant lines stripped out):

PriceBox.Viewport = new Ext.TabPanel({
items: [AppName.DashboardPanel,AppName.ListWrapper,AppName.DetailPanel]

So naturally the toolbar for this TabPanel shows three tabs, one for each of these panels. AppName.DetailPanel shows details for items from a list in AppName.ListWrapper, so having a tab selector it that toolbar means someone can tap directly to details for nothing.

What I am hoping to do is hide the tab selector/item for AppName.DetailPanel. I have scoured the forums and elsewhere and found two possible solutions:


I've tried both and neither works. The former destroys the app and the latter does nothing at all. I am attaching an image to help illustrate what I want to do. The top represents how it appears now, and the bottom is how I want it to flesh out.


Any help would be greatly appreciated. Thanks in advance.

8 Mar 2011, 4:53 PM
I am confused.

If 'Details' Panel is child of 'List' panel, why are you trying to add "Details" Tab on the Tab Panel.

You should add "Lists" tab and when you click (or tab) one item of "List" panel, "Details" panel will appear. Am I right?

8 Mar 2011, 4:59 PM
Actually AppName.DetailPanel isn't a child of AppName.ListWrapper. Maybe that's the problem. Maybe it should be? I'll investigate that option. Thanks!

8 Mar 2011, 5:08 PM
If you make child, I think it will be easy.

Sample code:

AppName.ListWrapper.on('itemtap', function (AppName.ListWrapper, index, item, e) {
// code for 'panel_details'

Hope, it will help you.

10 Mar 2011, 7:44 PM
If you make child, I think it will be easy.

That's what she said :))