Results 1 to 2 of 2

Thread: Dynamic height list in Sencha Touch 2.1

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Vote Rating

    Default 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?


  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    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.

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