Extjs4 TreePanel实例

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

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

HTML代码：

 

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

JS代码：

 

1. Ext.require([
2.     'Ext.tree.*',
3.     'Ext.data.*'
4. ]);
6. Ext.onReady(function() {    
7.     var store = new Ext.data.TreeStore({
8.         proxy: {
9.             type: 'ajax',
10.             url: 'get-nodes.php'
11.         },
12.         root: {
13.             text: 'Ext JS',
14.             id: 'src',
15.             expanded: true
16.         },
17.         sorters: [{
18.             property: 'leaf',
19.             direction: 'ASC'
20.         }, {
21.             property: 'fileName',
22.             direction: 'ASC'
23.         }]
24.     });
25.     
26.     var tree = new Ext.tree.TreePanel({
27.         //autoScroll: true,
28.         //enableDD: true,
29.         //containerScroll: true,
30.         animate: true,
31.         border: false,
32.         store: store,
33.         viewConfig: {plugins: [{ptype: 'treeviewdd'}]},
34.         renderTo: 'tree-div',
35.         height: 300
36.     });
37. });

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

 

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

 实例链接：dev.sencha.com/deploy/ext-4.0-pr5/examples/tree/reorder.html