随着Extjs4第五预览版的发布,更多的实例被放了出来,本文介绍Extjs4 TreePanel的使用。此实例来自Extjs官方网站,此实例并没有限制树节点的拖放,例子中使用了TreeStore 和 AjaxProxy
随着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({
-
-
-
- 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"}]
实例链接:dev./deploy/ext-4.0-pr5/examples/tree/reorder.html