View Full Version : Dynamic height list in Sencha Touch 2.1

4 Jan 2013, 10:35 AM
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 (http://www.sencha.com/forum/showthread.php?184367) 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?


7 Jan 2013, 7:53 AM
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.