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:

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: