Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      0  

    Default Answered: Tab panel with partially scrolling tab bar

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,212
    Answers
    3517
    Vote Rating
    858
    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


    So the tab panel is within a container/panel and the container/panel is scrollable?
    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
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,212
    Answers
    3517
    Vote Rating
    858
    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


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

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    47
    Vote Rating
    0
    kryptomens is on a distinguished road

      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
    kryptomens is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,212
    Answers
    3517
    Vote Rating
    858
    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


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

Thread Participants: 2

Tags for this Thread