PDA

View Full Version : Dynamic Nested Lists in Sencha Touch



monkbroc
25 Mar 2011, 4:10 AM
Hello,

I'm building an application with a UI similar to a mobile music player (Apple iPod or Android Music app) and I need to create a set of nested lists with dynamic data. For example, a list of Genres that when clicked will fetch a list of artists and display it, then when an artist is clicked, it will fetch a list of albums and display it, finally when an album is clicked it will fetch a list of songs and display it. A button to go back to the previous list is necessary too.

What would be a good way of implementing this in Sencha Touch? Which UI elements would be reasonable to use here? Can the NestedList handle this use case or will I need to roll my own dynamic nested list with a bunch of List elements?

Since I'm still unfamiliar with Sencha Touch, I'm also concerned that I won't destroy the nested list properly when the user clicks back, leading to a memory leak.

Thanks for the advice.

Bucs
25 Mar 2011, 8:29 AM
The nested list will do exactly what you want, but it will depend on how your data is organized. Ideally, you will want your data organized hierarchically in the order you mentioned, using JSON or XML. Then, you will attach a data Store to the Nested list that will have Proxy that is responsible for reading the data properly and feeding it to the store, which the nested list will then consume and display in a drill down fashion.

Depending on the size of your data sets of genre, artists etc., you may want to slide in pages with plain lists rather than use a nested list which will generally require you to load all the data up front. A nested list is nothing more than a card layout with dynamically generated lists anyway.

If you go the separate page route, then just hookup onDestroy methods to those pages as you backup which will give you a place to do your cleanup.

monkbroc
27 Mar 2011, 5:51 PM
Thanks. Since there is quite a lot of data, I went with dynamically generated lists. Thanks for pointing out that a nested list is a card layout with a bunch of lists. This was key.

spaceman123
28 Mar 2011, 1:51 AM
This is exactly what I'm trying to do, but want to have the different json files loaded dynamically. So for example when somewbody clicks the first link it will load json.php?id=1, the 2nd would be json.php?=2 etc. I've looked everywhere and can't work thi out :(

yitachi
9 Jun 2011, 6:46 AM
Hi,

I think below link meet your needs.
http://dev.sencha.com/deploy/touch/examples/nestedlist/

Check the json format for data and nested list store loading style.

I have just used this code and it worked.
Maybe the trick is using "cls":"folder" and "leaf":"true" in json data.