Results 1 to 10 of 17

Thread: Tab panel with partially scrolling tab bar

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
      0  

    Default Answered: Tab panel with partially scrolling tab bar

    Hey guys,

    I'm trying to create a panel which has the layout type 'vbox', with pack: 'start'
    It contains one child panel with a fixed height, and one tab panel with no specific height defined.

    Since the pack parameter of the parent panel's layout is set to 'start', the tab panel resizes itself according to its content, and the entire parent panel allows for scrolling.

    Now, what I want to do is this: when the user scrolls beyond the height of the first child panel, the tab bar of the tab panel should "stick" to the top.
    Then, when the user scrolls back up, the tab panel should move down again once its default position is crossed.
    (Like the pin headers in a grouped list).

    Any ideas on how I should go about implementing this?

    Thanks!

  2. Yes, you would have to detect scrolling and add the tab bar to the container if the tab panel is scrolled under the container and when the top of the tab panel is back in view add the tab bar back to the tab panel.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    So the tab panel is within a container/panel and the container/panel is scrollable?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
      0  

    Default

    Hey Mitchell,

    Yeah. Here is the layout in more detail:

    Container: xtype: 'panel', layout: { type: 'vbox', pack'start' }, scrollable: true

    Child-1: xtype: 'panel', height: 70px (or any fixed value)

    Child-2: xtype: 'tabpanel'; no fixed height or anything, scrollable, false

    I hope that helps.

    Thanks.

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Ok. So you could try to add the tabbar to the panel with vbox. Off top of my head I'm not sure if this will break the tab changing so you may have to do some custom coding for that but that will get the tabbar to stick but let the inner items to still scroll.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
      0  

    Default

    So you could try to add the tabbar to the panel with vbox.
    Isn't it already? Both Child-1 and Child-2 are items in the Container panel.

    Having just a tab panel as a child and getting it scrollable is not a problem. What I'm trying to accomplish is this:
    Due to the pack property of the container, Child-1 and Child-2 are arranged one after the other in a vertical direction, correct?
    Which means that the tab bar lies somewhere in the middle of the screen (below Child-1)

    Now, since scrolling is disabled in all child panels, when I drag the screen, the Container scrolls. (Which is good)

    But, the tab bar eventually scrolls out of the screen from the top side. I want it to stick once Child-1 has gone out of the screen. When I scroll back, it should move back when its time for Child-1 to come back into the screen.

    I'm really not sure if I'm explaining this properly. Please let me know if a diagram or something will help.

    Thanks for taking the time to solve my problem.

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
      0  

    Default

    Oh. I just got it. Are you suggesting that I add just the tab "bar" to the Container?

    I could do something like that, and even write the custom code required to ensure proper changing the tabs, but, how would I make it scroll as described in my previous reply?

  8. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Yes, when you add the tabbar to the container it will remove it from the tab panel and add it to the container so it's not a child of the tab panel anymore.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

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
  •