View Full Version : Best Approach for an Expandable List: AccordionLayout vs. Expandable DataView Items

2 Feb 2012, 8:20 PM
Hey guys,

i have a quiet challenging question, which is especially targeted to Mitchell Simoens :).

We develop an app (mainly for tablet) where the different data should be grouped and be previewed in multiple Expandable List Views (3 or more List Views, with approx. 10 items each).To see all of them the user probably has to scroll down. Have look at this one here (http://jquerymobile.com/demos/1.0.1/docs/content/content-collapsible-set.html) to get an impression what i'm talking about.

If the user clicks on one list item it should be expanded and show even more detailed data (with lazy loading!). The expanded item would be probably a complex container needing a lot of the screen size (but not the whole screen).

As sencha touch 2 does not provide any kind of Expandlable List view out of the box at the moment i tried to figure out how to do that. I found the "Accordion layout"which was developed by the Sencha employee Mitchell Simeons https://github.com/mitchellsimoens/Ux.layout.Accordion. This looks quite nice, but it does not really fit to how we want to use it and propably i have to make some extensive modifcations on it.

So my idea was to use the new Component enabled DataView for this use case. I built a small proof of concept app which shows 3 dataviews. The DataItems are containers with one button and another subcontainer. The Subcontainer is hidden by default and will just be shown when the user clicks on the button. All at all it behaves like i expect it (it's like a kind of expandable list view :)). However i regocnized that the performance of is not that superious, but i think i can optimize it somewhat. Also you have to consider that i have to implement this JIT loading and rendering of the detailed Data View.

To describe how i want to behave the application in the background it should be as follows:
I want to assign a Store to each of the expandable List views which then loads and caches the data needed for the Short Information. When the user clicks on one list item the application should get the clicked record (model instance) and load it's associated disease detail information by using the associations to another model (eg."DetailModel"). The data of this "DetailModel" should only be loaded right when the user clicks on one item (should not be cached beforehand), so the detailed View of that list item also only should be created and rendered lazy. What is important for me, is that the application logic makes extensive use of the Models and their relationships, and that is for example something, which the Accordionlayout does not provide at the moment (like i want it).

My question is now, should i finally go with the AccordionLayout (and modify it for my needs, -> lazy loading/rendering of Details and usage of Model and Stores) or with the Expandable DataItem approach?! The key importance for me is the performance. I think the AccordionLayout and and the Expandable DataItem thing are quite different, because one is a layout and the other is really a regular component.

Can somebody of the Sencha devs tell me which is the most lightweight approach and does have the lowest overhead and would probably be faster?

I would be very grateful for some advice.

Kind regards geekflyer :)

2 Feb 2012, 10:26 PM
If I were to make this component I would extend Ext.Container. Override onItemAdd and check what the title of the item is. Then add the item, get the index, and create and add a button component (or whatever you want) as the header. Then listen to the tap event on the button and hide/show each item depending on what button is pressed. Obviously keep track of whatever item is visible at any item.

Adding animations could be a little bit tricker, but not much.