YUI組件中，有兩棵樹的示例，一個是動態獲取數據的，一棵是通過靜態的json文件來獲取數據的，現將示例做一些註釋，記錄如下：
two-tree.js文件，內容如下：
var tree;
var root;
var child;
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;
return {
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel('tree', { //tree是id,與頁面的引用相對應
animate:true,
loader: new Ext.tree.TreeLoader({
dataUrl:'Tree1', //Tree1此處是在web.xml中定義的Servlet,也可以是tree.jsp等
baseParams: {flag:'tree1',selected:'0'} // 定義的參數，這裏是兩個參數，一爲flag,一爲selected
}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true}
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: "樹測試", //根節點顯示的內容
draggable:false, // disable root node dragging
id:'1',
cls: 'folder'
});
tree.setRootNode(root);
// render the tree
tree.render();
//root.expand(false, /*no anim*/ false);
//-------------------------------------------------------------
// YUI tree
var tree2 = new Tree.TreePanel('tree2', {
animate:true,
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'tmp1.json',
baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
enableDD:true,
dropConfig: {appendOnly:true}
});
// add a tree sorter in folder mode
new Tree.TreeSorter(tree2, {folderSort:true});
// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'Hello EXT',
draggable:false,
id:'1'
});
tree2.setRootNode(root2); //設置根節點
tree2.render(); //輸出樹
// root2.expand(false, /*no anim*/ false); 展開，
}
};
}();
//Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
Ext.onReady(TreeTest.init,TreeTest,true); //在頁面中顯示，否則不能顯示在頁面中
tmp1.json文件內容如下：
[{'text':'數據庫應用','id' :'1','treeDiv' :'testTree','cls' :'folder'},{'text':'移動開發','id' :'2','treeDiv' :'testTree','cls' :'folder'}]
two-tree.html文件，內容如下 ：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="yui-utilities.js"></script>
<script type="text/javascript" src="ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="two-trees.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/ytheme-aero.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<style type="text/css">
#tree, #tree2 {
float:left;
margin:20px;
border:1px solid #c3daf9;
width:250px;
height:300px;
overflow:auto;
}
.folder .x-tree-node-icon{
background:transparent url(resources/images/default/tree/folder.gif);
}
.x-tree-node-expanded .x-tree-node-icon{
background:transparent url(resources/images/default/tree/folder-open.gif);
}
</style>
</head>
<body>
<h1>Drag and Drop betweens two TreePanels</h1>
<p>The TreePanels have a TreeSorter applied in "folderSort" mode.</p>
<p>Both TreePanels are in "appendOnly" drop mode since they are sorted.</p>
<p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p>
<p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p>
<p>The js is not minified so it is readable. See <a href="two-trees.js">two-trees.js</a>.</p>
<div id="tree"></div>
<div id="tree2"></div>
</body>
</html>