Extjs : Tree structure is not getting displayed - json

Question

Am trying to create a simple tree structure. Am trying to make the structure by using json data in the store.
Here is my view formTree.js
Ext.define('TestMVC.view.form.formTree', {
extend: 'Ext.form.FormPanel',
alias: 'widget.formTree',
itemId: 'form',
renderTo: Ext.getBody(),
requires: ['Ext.form.field.Text', '*', 'Ext.tip.*', 'Ext.tree.*','Ext.data.*','Ext.tip.*'],
layout: {
type: 'vbox',
padding: 20
}, //******************************
//bodyStyle: 'background-image:url(../images/eggplant.jpg)!important',
initComponent: function () {
// this.addEvents('create');
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.QuickTips.init();
Ext.apply(this, {
activeRecord: null,
xtype:'treepanel',
store: new Ext.data.TreeStore({
proxy: {
type: 'ajax',
url: 'DataService/tree.json',
reader: {
type: 'json'
}
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}] }),
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: Ext.getBody(),
height: 300,
width: 250,
, title: 'Files'
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
this.callParent();
}
});
And the json data in tree.json is as follows.
{ text: 'Maths', id: 'mathDept', children: [
{ text:'X1', id: 'x1', leaf: true },
{ text:'X2', id: 'x2', leaf: true}
]
},
{ text: 'Biology', id: 'bioDept', children: [
{ text: 'Y1', id: 'y1', leaf: true},
{ text: 'Y2', id: 'y2', leaf: true}
]
},
{ text: 'English', id: 'engDept', children: [
{ text: 'Z1', id: 'z1', leaf: true},
{ text: 'Z2', id: 'z2', leaf: true},
{ text: 'Z3', id: 'z3', leaf: true}
]
}
On running this I get the error cannot read property dom of null. Please help.

Answer 1

I think that data is incorrectly formatted. That must be an array:
[
{ text: 'Maths', id: 'mathDept', children: [
{ text:'X1', id: 'x1', leaf: true },
{ text:'X2', id: 'x2', leaf: true}
]
},
{ text: 'Biology', id: 'bioDept', children: [
{ text: 'Y1', id: 'y1', leaf: true},
{ text: 'Y2', id: 'y2', leaf: true}
]
},
{ text: 'English', id: 'engDept', children: [
{ text: 'Z1', id: 'z1', leaf: true},
{ text: 'Z2', id: 'z2', leaf: true},
{ text: 'Z3', id: 'z3', leaf: true}
]
}
]