ExtJS 4.2 Tree representation of JSON hierarchical data - json

Question

I have the following hierarchical JSON.
How should I model it so that it can be represented as Tree.
The products array is at the same level as bookFamilies.
Please can anyone provide some help.
I followed this fiddle.sencha
https://fiddle.sencha.com/#fiddle/9vi
It does not work with 4.2. And I don't know how to restructure to bring the products.
{
"Families" : [
{
"FamilyName" : "FICAsia",
"bookFamilies" : [
{
"name" : "Ndf\/Nds Nja",
"book" : ["3782"]
}
],
"products" : ["CorpZC", "CorpInfl", "CorpFix", "CorpFlt"]
},
{
"FamilyName" : "FICUStandard",
"bookFamilies" : [{
"name" : "Local Markets Nja",
"book" : ["3787", "3785"]
}, {
"name" : "Ndf\/Nds Pwja",
"book" : ["3782"]
}
],
"products" : ["Drawdown", "Xorward", "FXY", "wap", "Top"]
}
]
}
I was thinking to restructure the JSON but not sure how to do with the products so that it can be represented as tree.

Answer 1

By default, for each tree node:
"text" is what will be displayed in the tree. This can be changed to a different field by editing the displayField property of the tree panel (as done in the fiddle you linked). However, it doesn't look like this feature is in 4.2.
"leaf" says whether the item can be expanded (default is true). You want to make sure this is set on the children, otherwise you will get strange behavior when trying to open them.
"expanded" says whether the item/parent is expanded (default is false). If you set this to true on a leaf node, nothing will happen.
"children" opens up the recursive hierarchy for the rest of the relationships.
Some tricky things about the fiddle you linked:
The transform function takes the incoming request and parses into a javascript object and is the "data" argument. This is handy when you need to make some transformations to the data. In this case, you see they take the "items" key and turn it into "children."
The "rootProperty" is a private variable in ExtJS 4.2, but a public one in ExtJS >5
Make sure to look at the docs to see the other features in ExtJS 4.2. Be careful about ExtJS 5,6 documentation because it looks like quite a few things were added/removed.
http://docs.sencha.com/extjs/4.2.2
Here's a partial example json of what you listed earlier. Replace the "data" property with this, remove the "rootProperty" and "transform" properties, remove the "displayField" property, and set the version to ExtJS 4.2.1.
{
"children":[
{
"text":"FICAsia",
"children":[
{
"text":"Book Families",
"children":[
{
"text":"Ndf\/Nds Nja",
"children":[
{
"text":"3782",
"leaf":"true"
}
]
}
]
},
{
"text":"Products",
"children":[
{
"text":"CorpZC",
"leaf":"true"
},
{
"text":"CorpInfl",
"leaf":"true"
},
{
"text":"CorpFix",
"leaf":"true"
},
{
"text":"CorpFlt",
"leaf":"true"
}
]
}
]
}
]
}