Ext.tab.Panel - Screen Width, Overflow, TabBar

[oomta]

Hello Sencha Community,

One of our Sencha Touch applications (Sencha Touch 2.0.0pr1) has an issue where multiple tabs are being added to a tab panel.

The tab panel is being loaded into a parent card panel. The tab bar consists of multiple items.

The problem is that there are too many tabs (which may be a UI design flaw, but I'm asking anyway).
Once there are too many tabs, they go off screen and can not be accessed. Additionally, the actual panel content also stretches to the width of the tabbar.

Is there any way to keep the panel layout to "fit" to the screen? (Yes I have tried layout: "fit"). Also, is there a way to make the additional tabs accessible? Similar to when you open too many documentation tabs in the Sencha Documentation, an arrow appears to select a tab.

Any help would be appreciated.

Thank you!

[mitchellsimoens]

You have fullscreen to true on the highest component? ALso, TabBar should be scrollable so you should be able to drag the toolbar left/right to see more tabs.

[oomta]

Thanks Mitchell.

I'm going to try that soon and see if it works, I'll be in touch soon.

[oomta]

Well, it definitely has fullscreen: true set (the top element and even the child elements where applicable).

Any other thoughts?

[mitchellsimoens]

Can you provide some test code to see your issue?

[oomta]

Hi Mitchell,

I am actually using code based on the KitchenSink app, but I managed to get the scrolling working.

For those that may be suffering a similar problem, here's my solution.
I had a tab panel with the following property set...

tabBarPosition: 'top'

This didn't allow scrolling, but then when I commented out that line and added the following...

tabBar: {
    layout: {
    pack : 'center',
    align: 'center'
  },
  docked: 'top',
  scrollable: {
    direction: 'horizontal',
    indicators: false
  }
}

This works for me now. ExtJS 2.0.0pr1 for those that found this using Google (I can't tell you how many times I wished someone would put version numbers on their questions).

Thanks anyway Mitchell!