Sencha Touch 2 read tree structure from json - sencha-touch-2

Question

I'm trying to figure out how to read a tree structure like this into proper model instances:
{
"name":"root"
"kids":[
{
"name":"kid1",
"kids": [...] //More kids
},
{
"name":"kid2",
"kids": [...] //More kids
},
{
"name":"kid3",
"kids": []
},
...
]
}
Here are two of the models I've tried:
Ext.define('TreeNode', {
extend: 'Ext.data.Model',
config: {
fields: ['name'],
hasMany:{model: 'TreeNode', name: 'kids'}
}
});
//This one seems to work, but it simply loads
//generic objects into the "kids" property
//and not real model instances.
Ext.define('TreeNode', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'kids']
}
});
And the store:
Ext.define('TreeStructureStore', {
extend: 'Ext.data.Store',
config: {
autoLoad: false,
model: 'TreeNode',
proxy: {
type: 'ajax',
url: 'simple.json',
reader: {
type: 'json'
}
}
}
});
I cannot seem to get the model and store to work correctly. At best it will only read the topmost element. How can I get it to read recursively down and make the correct model instance tree?

Answer 1

http://www.sencha.com/forum/showthread.php?178848-Nested-JSON-and-hasMany-associations
Looks similar to a problem I had and was able to solve eventually (and posted the answer to in the Sencha Forum). The key point here is using the associationKey config property for the hasMany association, but check out the whole post.