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
    36,791
    Answers
    3465
    Vote Rating
    833
    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
    36,791
    Answers
    3465
    Vote Rating
    833
    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
    36,791
    Answers
    3465
    Vote Rating
    833
    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.

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

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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.
    So in this case, the tabbar will appear "between" Child-1 and Child-2. (Essentially, the Container will have 3 children)

    But even in this case, when the user scrolls the Container, the Child-1 will scroll up and out, followed by the tabbar, followed by the tabpanel.

    How can I get the tabbar to behave like the list group headers?

  10. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Answers
    3465
    Vote Rating
    833
    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


    If you were to add it to the container with vbox and scrollable then it will be pinned to the top not between the child items.
    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.

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

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    If you were to add it to the container with vbox and scrollable then it will be pinned to the top not between the child items.
    Only if I dock it to the top, correct?

    In any case, I don't think we're on the same page here.

    I don't want the tabbar to be permanently docked/pinned to the top of the container.

    You know how in a grouped list, when we scroll, the header of the current group sticks to the top when the list is scrolled down, but moves back in place when the list is scrolled back up?

    I want the same behaviour for my tabbar.

    It should only be pinned to the top when Child-1 scrolls out of the screen. It should become move again when Child-1 scrolls back into the Container.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi