PDA

View Full Version : Nested list without the NestedList object



dks
2 May 2011, 12:01 PM
I have an app that loads a JSON file with nested data via AJAX. The basic flow of the app is: 1. Panel with a list in it of the root objects of the data file. 2. When a user clicks on the item in this list, I want to load a new panel with some info, and the sub-items in the nested data.

I have a data store that loads up the root items of the list. I can get the first page (1. from above) to load fine, but I'm having trouble getting the second panel to load the list.

Here's my models and store:


Ext.regModel("test.models.items", {
fields: [
"id",
"text",
"info",
"sub-items"
],

hasMany: {model: "test.models.subitems", name: "sub-items"}
});
Ext.regModel("test.models.subitems", {
fields: [
"id",
"text"
]
});
test.stores.nestedtest = new Ext.data.Store({
model: "test.models.items",
proxy: {
type: "ajax",
url: "http://localhost/data.json",
reader: {
type: "json",
root: "items",
totalCount: "total"
}
},
autoLoad: true
});
Here's my JSON data:


{
"total": 9,
"items": [
{
"id": 0,
"text": "Item 1",
"info": "This is some info about Item 1.",
"sub-items": [
{ "id": 0, "text": "Item 1.1" }
{ "id": 1, "text": "Item 1.2" }
{ "id": 2, "text": "Item 1.3" }
{ "id": 3, "text": "Item 1.4" }
]
},
{
"id": 1,
"text": "Item 2",
"info": "This is some info about Item 2.",
"sub-items": [
{ "id": 0, "text": "Item 2.1" }
{ "id": 1, "text": "Item 2.2" }
{ "id": 2, "text": "Item 2.3" }
{ "id": 3, "text": "Item 2.4" }
]
},
{
"id": 2,
"text": "Item 3",
"info": "This is some info about Item 3.",
"sub-items": [
{ "id": 0, "text": "Item 3.1" }
{ "id": 1, "text": "Item 3.2" }
{ "id": 2, "text": "Item 3.3" }
{ "id": 3, "text": "Item 3.4" }
]
}
]
}
When a user clicks the item in the first list, here's the function that fires:


onItemDisclosure: function (record) {
Ext.dispatch({
controller: test.controllers.testController,
action: "showListSubItems",
data: record
});
}
This launches into the controller, but I don't know how to create the second list based off of this data.

How can I create a list in a separate panel that shows a list of the nested sub-items?