Results 1 to 6 of 6

Thread: - Screen Width, Overflow, TabBar

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Aug 2011

    Default Answered: - Screen Width, Overflow, TabBar

    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!

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts