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();

}

});

tree.json中的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}             
]
}

运行这个我得到的错误无法读取null的属性dom。请帮忙。

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

Extjs：树结构未显示

1 个答案: