4 Jan 2013 10:35 AM #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?
7 Jan 2013 7:53 AM #2
- 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 @SenchaMitch
Sencha Inc, Senior Software Engineer
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. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
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.