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

**oomta** · 8 Nov 2011 10:40 PM

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!

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...

Code:

tabBarPosition: 'top'

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

Code:

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!

**mitchellsimoens** · 9 Nov 2011 5:55 AM

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** · 11 Nov 2011 1:51 AM

Thanks Mitchell.

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

**oomta** · 13 Nov 2011 2:13 PM

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

Any other thoughts?

**mitchellsimoens** · 13 Nov 2011 2:17 PM

Can you provide some test code to see your issue?

**oomta** · 13 Nov 2011 2:48 PM

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...

Code:

tabBarPosition: 'top'

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

Code:

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!

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

Thread Tools

Search Thread

Display

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

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

Tags for this Thread