1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    23
    Answers
    2
    Vote Rating
    1
    oomta is on a distinguished road

      0  

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

    Answered: Ext.tab.Panel - 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...

    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!

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    23
    Answers
    2
    Vote Rating
    1
    oomta is on a distinguished road

      0  

    Default


    Thanks Mitchell.

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

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    23
    Answers
    2
    Vote Rating
    1
    oomta is on a distinguished road

      0  

    Default


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

    Any other thoughts?

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can you provide some test code to see your issue?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    23
    Answers
    2
    Vote Rating
    1
    oomta is on a distinguished road

      0  

    Default


    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!

Thread Participants: 1

Tags for this Thread