Json Extjs:未显示树结构

Json Extjs:未显示树结构,json,extjs,extjs4,Json,Extjs,Extjs4,我正在尝试创建一个简单的树结构。我试图通过使用存储区中的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.*',

我正在尝试创建一个简单的树结构。我试图通过使用存储区中的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();

}

});

运行此命令时,我得到一个错误:无法读取null的属性dom。请帮忙。

我认为数据格式不正确。必须是一个数组:

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

也许你可以附加一个屏幕截图?只显示“全部展开”和“全部折叠”文本。
树中没有显示任何其他内容。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}             
    ]
    }
]