ExtJS4学习笔记(二十)---TreePanel实例

最新推荐文章于 2019-09-28 19:13:07 发布

iteye_12837

最新推荐文章于 2019-09-28 19:13:07 发布

阅读量99

点赞数

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

HTML代码：

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

JS代码：

Ext.require([ 
 'Ext.tree.*',  
 'Ext.data.*' 
]); 
 
 Ext.onReady(function(){  
 varstore=newExt.data.TreeStore({  
proxy:{ 
 type:'ajax',  
 url:'get-nodes.php' 
}, 
root:{ 
 text:'ExtJS',  
 id:'src',  
 expanded:true 
}, 
sorters:[{ 
 property:'leaf',  
 direction:'ASC' 
},{ 
 property:'fileName',  
 direction:'ASC' 
}] 
}); 
 
 vartree=newExt.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"}]