ExtJs 4 Tree 展示问题

Question

最近在学习ExtJs4，遇到一个问题，大家帮忙分析一下

 

 

JS代码如下：

 

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.tip.*'
]);

Ext.onReady(function() {

var treeStore = new Ext.data.TreeStore({
    proxy: {
        type: 'ajax',
        url: ctx + '/common/tree'
    },
    root: {
        text: 'Ext JS',
        id: 'src',
        expanded: true
    },
    sorters: [{
        property: 'leaf',
        direction: 'ASC'
    }, {
        property: 'fileName',
        direction: 'ASC'
    }]
});

var treePanel = new Ext.tree.TreePanel({
    region : 'west',
    title : '<center>系统菜单</center>',
    split : true,
    width : 200,
    root : treeStore
});

var topPanel = new Ext.Panel({
    region : 'north',
    frame : false,
    height : 28
});

var mainPanel = new Ext.TabPanel({
    layout : 'fit',
    activeTab : 0,
    region : 'center',
    frame : false
});

    Ext.QuickTips.init();
    var mvp = new Ext.Viewport({
        layout : 'border',
        items : [ treePanel, topPanel, mainPanel ]
    });
});

 

后台返回数据如下：

 

 

[
    {
        "id": "1001",
        "text": "admin",
        "parentId": "-",
        "leaf": false,
        "iconCls": "1001-tree",
        "cls": "folder",
        "children": [
            {
                "id": "100101",
                "cls": "file",
                "url": "/common/admin",
                "name": "admin",
                "leaf": true,
                "text": "admin",
                "parentId": "1001"
            }
        ]
    },
    {
        "id": "1002",
        "text": "user",
        "parentId": "-",
        "leaf": false,
        "iconCls": "1002-tree",
        "cls": "folder",
        "children": [
            {
                "id": "100201",
                "cls": "file",
                "url": "/common/common",
                "name": "user",
                "leaf": true,
                "text": "user",
                "parentId": "1002"
            }
        ]
    }
]

页面就是显示不了树结构，不知为什么？？

页面显示如图：

 

Answer 1

这里你的TreePanel 里面啊是要定义store,而不是root:
[code="js"]
var treePanel = new Ext.tree.TreePanel({

region : 'west',

title : '

系统菜单',

split : true,

width : 200,

store : treeStore

});

[/code]