Extjs: структура дерева не отображается

Question

Я пытаюсь создать простую древовидную структуру. Я пытаюсь создать структуру, используя данные json в магазине.

Вот мой взгляд 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(); 

} 

}); 

И данные JSON в tree.json выглядит следующим образом.

{ 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}    
] 
} 

При запуске этой ошибки я не могу прочитать свойство dom null. Пожалуйста помоги.

Answer 1

Я думаю, что данные некорректно отформатированы. Это должен быть массив:

[ 
    { 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}    
    ] 
    } 
]