PDA

View Full Version : Nested JSON Data Into Carousel



mrnap
20 Oct 2010, 12:32 PM
Hi, I've been working on a Sencha Touch app, but I seem to be a bit stuck. I know what I want to do, I'm just not sure what the best way to do it is. For confidentiality purposes, I'm going to use some Vanilla Code that does similar to what my app does. Now for some background:

Let's say I'm making an RSS app, and I want to display the data in a similar way to the Pulse app or the SlideReader app, where you can scroll vertically through the sources and horizontally through the stories within the sources. Now I already have all this information in JSON format, and let's say it looks something like this:




{
"date":"2010-10-19",
"feeds":
[
{
"feed":"Sencha",
"story":
[
{
"name":"Story1",
"sid":"4628",
"link":"http://story1.com",
},
{
"name":"Story2",
"sid":"4724",
"link":"http://story2.com",
}
]
},
{
"feed":"ExtGWT",
"story":
[
{
"name":"Story1",
"sid":"7444",
"link":"http://story1.com",
},
{
"name":"Story2",
"sid":"2248",
"link":"http://story2.com",
}
]
}
]
},
{
"date":"2010-10-20",
"feeds":
......etc



So for example using the code above, I want my app to have something like a vBoxLayout that contains each "feed" for today's date as a member. Then, each of those vertical feed items would be made up of a hBoxLayout that contains each feed's stories that a user can scroll through. Currently I've created a feedModel that has id and feed for the fields, and hasMany associations with the storiesModel. storiesModel has name, sid, and link for the fields.

What I'm trying to ask is, is there an easy way to have all this JSON data populated into the proper views/stores in one call? Or do I need to setup separate stores and data views for the horizontal and vertical boxes? I want to set this up so you can provide date as a parameter to your JSON call, and it will only grab the feeds from today's date. Also, what best practices would you recommend in regards to this implementation?



Thanks for the time, I know it's a lot, but I hope to be able to pay it forward and spend some more time on these forums.

mrnap
20 Oct 2010, 11:00 PM
UPDATE:

So I'm now using xtemplates to set this up, but I'm a bit stuck at figuring out how to get a horizontal scroll carousel inside a vertical scrolling carousel. The data is setup in associated models, but I'm not exactly sure how to iterate over them properly.

Is the easiest way to do this to just create the parent xtemplate for the vertical box layout and put a placeholder div inside, and then create the child xtemplate for the horizontal carousel and render that to the placeholder? Isn't there a more efficient method for rendering?