Json data is not populated in treeview panel - json

Question

here below is my json formate i need to show in the treeview panel in extjs6
After loading store from server i am not able to see any records in Tree panel.
what should be the Model view and store for this json rendering in to the Tree view panel .
Thanks.
here is my code :
Model :
Ext.define('File', {
extend: 'Ext.data.TreeModel',
fields: [
{number: 'number', type: 'string'},
]
});
Store :
var store = Ext.create('Ext.data.TreeStore', {
model: 'File',
proxy: {
type: 'ajax',
url: 'component-tree.json',
reader: {
type: 'json',
rootProperty: 'components',
leaf: true,
children: 'components',
expanded: true,
},
},
folderSort: true,
});
View :
var tree = Ext.create('Ext.tree.Panel', {
autoLoad: true,
collapsible: true,
useArrows: true,
rootVisible: true,
store: store,
multiSelect: true,
width: 250,
height: 300,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
appendOnly: true
}
},
root: {
text: "Components",
expanded: true,
},
renderTo: document.body
});
component-tree.json :
{
"components": {
"state": "RELEASED",
"nodeType": "Component",
"checked": true,
"name": "PLATE - FOR CABINET - ASSEMBLY",
"level": 0,
"url": "http://example.com/Windchill/servlet/nexiles/tools/api/1.0/epmdocuments/OR:wt.epm.EPMDocument:4474031",
"oid": "OR:wt.epm.EPMDocument:4474031",
"modified": "17.04.2015",
"filename": "21378386.asm",
"num_children": 7,
"number": "21378386.ASM",
"details": "http://example.com/Windchill/app/#ptc1/tcomp/infoPage?oid=OR:wt.epm.EPMDocument:4474031&u8=1",
"components": [
{
"nodeType": "Component",
"leaf": true,
"name": "PLATE - FOR CABINET - DETAIL",
"level": 1,
"url": "http://example.com/Windchill/servlet/nexiles/tools/api/1.0/epmdocuments/OR:wt.epm.EPMDocument:4474018",
"oid": "OR:wt.epm.EPMDocument:4474018",
"modified": "17.04.2011",
"filename": "1234.prt",
"state": "RELEASED",
"number": "21378385.PRT",
"details": "http://example.com/Windchill/app/#ptc1/tcomp/infoPage?oid=OR:wt.epm.EPMDocument:4474018&u8=1",
"version": "A",
"checked": true,
"drawings": [
{
"reftype": "DRAWING",
"nodeType": "Drawing",
"leaf": true,
"name": "PLATE - FOR CABINET - DETAIL",
"url": "http://example.com/Windchill/servlet/nexiles/tools/api/1.0/epmdocuments/OR:wt.epm.EPMDocument:4474013",
"oid": "OR:wt.epm.EPMDocument:4474013",
"modified": "17.04.2015",
"filename": "21378385.drw",
"source": "representation",
"state": "RELEASED",
"number": "21378385.DRW",
"details": "http://example.com/Windchill/app/#ptc1/tcomp/infoPage?oid=OR:wt.epm.EPMDocument:4474013&u8=1",
"version": "A",
"checked": true,
"id": "OR:wt.epm.EPMDocument:4474013-DRAWING",
"icon": "/resources/images/drawing.gif"
},
{
"reftype": "INTERNAL",
"nodeType": "Drawing",
"leaf": true,
"name": "PLATE - FOR CABINET - ASSEMBLY",
"url": "http://example.com/Windchill/servlet/nexiles/tools/api/1.0/epmdocuments/OR:wt.epm.EPMDocument:4474041",
"oid": "OR:wt.epm.EPMDocument:4474041",
"modified": "17.04.2015",
"filename": "21378386.drw",
"source": "representation",
"state": "RELEASED",
"number": "21378386.DRW",
"details": "http://example.com/Windchill/app/#ptc1/tcomp/infoPage?oid=OR:wt.epm.EPMDocument:4474041&u8=1",
"version": "A",
"checked": true,
"id": "OR:wt.epm.EPMDocument:4474041-INTERNAL",
"icon": "/resources/images/drawing.gif"
}
],
"icon": "/resources/images/prt_image.gif"
}
}

Answer 1

Your treeModel just defines number but your store actually contains much more fields...
Take a look at the doc in the chapter 'Heterogeneous node types' for more information.
Try with children instead of components in your json file. By the way I could remark that the case is not respected between the configuration root: { text: "Components", ... } and the json content "components": [ ... ].
C and c