1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    justinrussell is on a distinguished road

      0  

    Default Dynamic height list in Sencha Touch 2.1

    Dynamic height list in Sencha Touch 2.1


    I'm using Sencha Touch 2.1 and would like a single view to contain a list and some text in a panel underneath. I'd like the list to take up as much vertical height as it needs without scrolling; I want scrolling to be on the container, so that the list shows up initially and then the panel shows up underneath a list when the user scrolls to the bottom of the list.

    As far as I can tell, I'm essentially trying to do this kind of thing in Sencha Touch 2.1.

    I was able to make this work in earlier projects by doing a vbox with an align: stretch, but it looks like the align config isn't part of vbox in Sencha Touch 2.1.

    I've tried it by putting 'fit' on the container, but predictably the list takes up the entire screen and the panel shows up on top of it.

    If I try using 'vbox' as a layout for the container, the list doesn't show up at all.

    Using 'flex' for each of the components with a 'vbox' layout kind of works, but it adds padding around the list, adds scrolling on the component even when 'scrollable' is set to false, and the container fits on a single screen no matter how long the list is.

    Did align: stretch get shuffled around to somewhere new, or is there any way to make it work?

    Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,645
    Vote Rating
    816
    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


    The list needs a height set on it either statically with the height config or via a parent layout.

    In the thread you linked to you can see the list has flex : 2 which tells the parent layout how to give the list a height. There shouldn't be any padding around the child items when you use flex, something else is at play there then.
    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: 1

Tags for this Thread