Extjs4 TreePanel实例

随着Extjs4第五预览版的发布，更多的实例被放了出来，本文介绍Extjs4 TreePanel的使用。此实例来自Extjs官方网站，此实例并没有限制树节点的拖放，例子中使用了TreeStore 和 AjaxProxy

HTML代码：

<div id="tree-div" style="width:250px;border:1px solid #c3daf9;"></div>

JS代码：

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

Ext.onReady(function() {
    var store = new Ext.data.TreeStore({
        proxy: {
            type: 'ajax',
            url: 'get-nodes.php'
        },
        root: {
            text: 'Ext JS',
            id: 'src',
            expanded: true
        },
        sorters: [{
            property: 'leaf',
            direction: 'ASC'
        }, {
            property: 'fileName',
            direction: 'ASC'
        }]
    });

    var tree = new Ext.tree.TreePanel({
        //autoScroll: true,
        //enableDD: true,
        //containerScroll: true,
        animate: true,
        border: false,
        store: store,
        viewConfig: {plugins: [{ptype: 'treeviewdd'}]},
        renderTo: 'tree-div',
        height: 300
    });
});

例子中返回的数据为JSON格式，要求服务端可以返回类似如下的数据：

[{"text":"layout","id":"src\/layout","cls":"folder"},{"text":"ComponentQuery.js","id":"src\/ComponentQuery.js","leaf":true,"cls":"file"},{"text":"draw","id":"src\/draw","cls":"folder"}]