Iterative data store in extjs - extjs4.1

Question

I want to create hierarchical tabs ( they could be up to n level) using ext-js 4.1. I am trying to create a store as below, for the tab hierarchy. so I can use a generic method to create tabs. How can i iterate through this store structure to create hierarchical tabs?
Hope the structure below is readable :-) showing each level clearly and the depth for the tabs.
"toptab1": [{
"id" : 1000
"name" : "coo",
"child": [{
"id": 1 ,
"name": "foo" ,
"child": [{
"id" : 11 ,
"name": "roo" ,
"child": [{
"id" : 111,
"name" : "hoo"
},
{
"id: 112,
"name": "poo"
}]
},
{
"id" : 12 ,
"name" : "too"
}]
},
{
"id" : 2,
"name" : "woo",
"child" :[{
"id": 21,
"name" : "soo"
"child" : [{
"id" : 211,
"name" : "boo"
}]
},
{
"id" : 22,
"name" : "doo"
}]
},
{
"id" : 3,
"name": "zoo"
}];

Answer 1

I would create a model to store the information about your tabs.
Then use a TreeStore to store them in the correct hierarchy.
Then you can do something like.
var topLevel = this.getTabStore().getRootNode();
topLevel.cascadeBy(function(tab) {
//Do what you want with each tab here.
});
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.TreeStore-method-getRootNode
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-method-cascadeBy