Answered: Complex Layout with Sencha Touch 2 - Lists or panels with tap listeners?
I'm struggling with a requirement for an app. I just can't get my head around how to handle the requirement due to several factors which hopefully I can explain below. I was wondering whether anyone could just give me a hint as to how the problem may be solved with the layout please as I'm stumped?
Below is an example of the requirement. So this is a Panel that needs to display the following data. The first section is just html content that's fine, it's a Panel.
The next section consists of 3 sections of data. It looks like a List would probably handle this, however whilst the data comes from the same source, the actual data itself is very different. Also, each section has to load a different Panel/Container into the Viewport. I've thought about receiving HTML from the data source and simply populating the itemTpl with the HTML received, but then I've got to somehow link each item in the List to load a different Panel/Container. I tried doing this with Panels, but obviously there's no default tap UI for Panels which makes lists appealing.
I've also tried with List and XTemplate, creating a different template based upon the data being received. This works visually but then I'm lost as to how to load a different Panel/Container on tap.
Then there's the last section, the list with the icons in the example below. Again this is simple, just a List, but again I then have to try and define which Panel/Container to load based upon the tap. These can be hard coded into the List using data:  for the text and icon, so visually that's pretty easy....
I'd hugely appreciate any thoughts on this please, it's basically the Section 1, Section 2 and Section3 that are causing me the headache...
Just found this http://www.sencha.com/forum/showthre...plex-List-View thread (typical after searching for a day and then posting!!) which goes some way to answering my questions I think, but I'd still really appreciate anyone's thoughts as to how they might handle this.
Basically a good example of what I'd like to achieve is the IMDB app, on the home screen. There are links that appear to be a list but I imagine that in Xcode there is presumably some kind of element that is like a panel but can be linked with a tap event and gives a UI change on event.
Been experimenting as much as possible with this. Latest issue I've now found with using Lists is that the vertical scroll is on the individual list, not the entire screen, so the lists end up scrolling within their own holder. Is there a way to force the entire list to display without scrolling? I've tired height: 'auto' but this breaks the layout. I've tried vbox as the main Panel layout so that I could place the other items into the Panels. If I try layout: "fit" I end up losing other content on the page...
Here's another option. The Xero dashboard is pretty neat, I've tried everything I can to replicate the boxing of the items as you can see there, but not sure how it's done. I've try using Chrome to view the DOM but I have the feeling there's some customization done to get the lists with the heading. I can figure out the list, that's done I believe with XTemplate in the itemTpl, but how did they get the headers like "Bank Balances", "Invoices" and "Expenses" etc...?