ExtJS 树形组件示例-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_1505/article/details/81691985

<html>
<script src="ext20/adapter/ext/ext-base.js" charset="utf-8"></script>
<script src="ext20/ext-all.js" charset="utf-8"></script>
<link href="ext20/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="ext20/resources/css/xtheme-sa.css" rel="stylesheet" type="text/css">
<title>ext test</title>
<script>
Ext.onReady(function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree',
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'treejosn.html'}),
enableDD:true,
containerScroll: true,
singleExpand:true,
dropConfig: {appendOnly:true},
listeners : {
//单击树节点，刷新右边的视图
'click':function(node,e){
//alert(node.id)
}
}
});
// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand(false, /*no anim*/ false);

});

</script>
<body>
<div id="father" style="overflow:auto; height:500px;width:600px;border:1px solid #c3daf9;">
<div id="tree" style="float:left; height:500px;width:40%;border:1px solid #c3daf9;"></div>
<div id="picframe" style="height:500px;border:1px solid #c3daf9; float:left;">
<div id="picdir" style="height:100px;border:1px; background-color:#c3daf9"></div>
<div id="picad" style="height:300px;border:1px; background-color:#39F"></div>
</div>
</div>

</body>
</html>

//=================================================//
treejosn.html:

[{"id":"10","parentId":"-1","text":"12","leaf":false,"children":[
{"id":"33","parentId":"10","text":"computert","leaf":true,"children":[]},
{"id":"34","parentId":"10","text":"computer3","leaf":true,"children":[]}]},
{"id":"7401","parentId":"-1","text":"computer","leaf":false,"children":[]},
{"id":"27","parentId":"-1","text":"database","leaf":false,"children":[]},
{"id":"7201","parentId":"-1","text":"fm","leaf":false,"children":[]},
{"id":"30","parentId":"-1","text":"monitor","leaf":false,"children":[]},
{"id":"44","parentId":"-1","text":"other","leaf":false,"children":[]},
{"id":"1","parentId":"-1","text":"report","leaf":false,"children":[]},
{"id":"201","parentId":"-1","text":"topology","leaf":false,"children":[]}]

EXT 树