PDA

View Full Version : How to hide (toggle) the tabBar in a tab panel?



orangechicken
20 Sep 2010, 12:15 PM
I have a tabpanel called "tabs" with contents that are data-driven, including the tabs themselves. In the case where there's only one tab I want to hide the entire tabBar and have the tab's contents take up all the space.

Currently, I'm doing (with 0.94):


this.tabs.tabBar.hide();
this.tabs.doComponentLayout();

Unfortunately, that just makes the tabBar invisible - leaving the space it occupied unfilled. My expectation was that hiding the tabBar and calling doComponentLayout would reposition and resize the tab's contents panel.

Ideas?

orangechicken
20 Sep 2010, 12:52 PM
Ok, I think that the new(ish?) method needsLayout() needs some rethinking (or extrapolating). The doComponentLayout() in my code above never runs the layout because hiding the tabBar doesn't mark childrenChanged on the TabPanel's componentLayout. To hack around it I did this:


this.tabs.componentLayout.childrenChanged = true;
this.tabs.doComponentLayout();

And now that works for me. Would be nice to see an option for TabPanel to autoHideOnSingleItem (or something like that). I believe Ext has something like this.

Theodosis
20 Sep 2010, 4:21 PM
That's really useful, thanks a lot :)

orangechicken
21 Sep 2010, 9:56 AM
Keep in mind, I believe it's a bug that I have to manually set childrenChanged to false before calling doComponentLayout. My expectation is that when I hide the tabBar and call doComponentLayout that the component would actually be re-laid out.

dbottillo
28 Sep 2010, 12:15 AM
with sencha 0.95 doesn't work

another method?

Theodosis
28 Sep 2010, 1:31 AM
It does work, I use that in my app. But, today sencha 0.96 is about to be published, so, it may be fixed on that version.

velotron
29 Sep 2010, 10:44 AM
Thank you for posting the fix, orangechicken. On sencha 0.94 it worked great for me, much better than my initial CSS hack attempts. Hopefully future releases incorporate the fix.

tgraff
14 Dec 2011, 12:57 PM
For posterity sake, this is the code that worked for me with Sencha Touch 1.1.1:

Hide:

this.getTabBar().hide();
this.componentLayout.childrenChanged = true;
this.doComponentLayout();

Show:


this.getTabBar().show();
this.componentLayout.childrenChanged = true;
this.doComponentLayout();

mrVinh
14 Dec 2011, 8:34 PM
That's really useful, thanks a lot :)

korzinka
24 Jan 2012, 10:58 AM
GREAT THANKS for that solution!
(i spent a day making love with the empty field after tabbar.hide()! =)))