隨著Extjs4第五預(yù)覽版的發(fā)布，更多的實(shí)例被放了出來(lái)，本文介紹Extjs4 TreePanel的使用。此實(shí)例來(lái)自Extjs官方網(wǎng)站，此實(shí)例并沒(méi)有限制樹節(jié)點(diǎn)的拖放，例子中使用了TreeStore 和 AjaxProxy
隨著Extjs4第五預(yù)覽版的發(fā)布，更多的實(shí)例被放了出來(lái)，本文介紹Extjs4 TreePanel的使用。此實(shí)例來(lái)自Extjs官方網(wǎng)站，此實(shí)例并沒(méi)有限制樹節(jié)點(diǎn)的拖放，例子中使用了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
- });
- });
例子中返回的數(shù)據(jù)為JSON格式，要求服務(wù)端可以返回類似如下的數(shù)據(jù)：
- [{"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"}]
實(shí)例鏈接：dev./deploy/ext-4.0-pr5/examples/tree/reorder.html
