YUI.ext中的Tree組件可以用來在頁面實現樹型佈局的效果，包括常見的樹型菜單等，那麼我們怎樣才能生成一個Tree呢，主要有以下四個步驟；
1.定義一個Tree對象：
var tree = new Ext.tree.TreePanel('tree', {
animate:true,
loader: new Ext.tree.TreeLoader({
dataUrl:'get-nodes.jsp',
baseParams: {lib:'yui'}
}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true}
});
定義一個Tree對象時要聲明該對象的ID以及相關的參數，如上所示，這個Tree對象的ID爲tree，相關的參數包括是否有動畫效果(animate:true),樹節點的數據來源(loader: new Ext.tree.TreeLoader({dataUrl:'get-nodes.txt',baseParams: {lib:'yui'}})),是否可以拖放節點(enableDD:true),是否包含滾動條(containerScroll: true)以及節點拖放的配置(dropConfig: {appendOnly:true})等。
2.生成Tree的根節點：
var root = new Ext.tree.AsyncTreeNode({
text: 'yui-ext',
draggable:false,
id:'source'
});
tree.setRootNode(root);
首先生成一個節點，生成時可以定義該節點顯示的文本(text屬性)，是否可以拖動(draggable屬性，根節點需要定義爲false)，以及節點ID，這個ID使得我們可以在頁面上用document.getElementById來獲取該節點，然後調用tree.setRootNode(root)將該節點設置爲樹tree的根節點。
3.生成Tree的其他節點：
Tree的其他節點都需要從數據源中加載進來，創建Tree對象時就定義了獲取數據源的路徑--loader: new Ext.tree.TreeLoader({dataUrl:'get-nodes.jsp',baseParams: {lib:'yui'}})，其中get-nodes.jsp就是生成數據源的路徑，而baseParams屬性則定義了訪問該路徑時傳入的HTTP請求參數(可以有多個)，頁面在生成樹時會調用XMLHttpRequest來訪問該路徑並將返回的數據解析成節點。除了可以使用WEB服務動態生成數據源以外，你還可以使用靜態文件做爲數據源，YUI.ext只要求返回的數據格式類似下面這樣即可:
[{'text':'welcome.html','id':'welcome.html','cls':'file',myPara:'myValue'},
{'text':'welcome2.html','id':'welcome2.html','leaf':true,'cls':'file','href':'welcome2.html'}]
這些數據是存儲到一個數組中的,數組中的每一項代表一個節點,每一個節點都包含以下幾個主要屬性:
text:定義該節點顯示的名稱;
id:定義該節點的頁面ID,便於document.getElementById方法獲取該節點;
leaf:true或者false,定義該節點是否是葉子節點;
cls:定義該節點的class(顯示的樣式);
href:定義點擊該節點後鏈接的頁面;
另外你還可以爲節點增加自定義的屬性,方法如上面的myPara:'myValue'一樣。
YUI.ext會自動將返回的數據解析成節點並正確顯示到頁面上。
4.爲Tree添加事件處理：
a.當加入某個節點時，爲其增加事件
tree.on('append', function(tree, node){
if(node.id == 'foo'){
// 這裏加入你對該事件的處理
}
});
b.針對某個節點的單擊事件
tree.on('click', function(node){
if(node.id == 'foo'){
// 這裏加入你對click事件的處理
}
});
c.針對某個區域（集合）的事件
tree.getSelectionModel().on('selectionchange', function(sm, node){
if(node && node.id == 'foo'){
// 這裏加入你對該事件的處理
}
});
經過以上四步我們就可以生成一個比較完整的Tree對象了。
附：
JS源代碼，該代碼中生成了兩棵樹，一棵是YUI Tree，一棵是YUI.ext Tree，並且一棵是用靜態文件作爲數據源，一棵是動態生成的數據源：
/*
* Ext JS Library 1.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;
return {
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel('tree', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.txt'}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true}
});
// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'yui-ext',
draggable:false, // disable root node dragging
id:'source'
});
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:'get-nodes.jsp',
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: 'Yahoo! UI Source',
draggable:false,
id:'yui'
});
tree2.setRootNode(root2);
tree2.render();
root2.expand(false, /*no anim*/ false);
}
};
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
對應的HTML代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<!-- LIBS --> <script type="text/javascript" src="../../yui-utilities.js"></script> <script type="text/javascript" src="../../ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<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="../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>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<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>
轉載:http://hi.baidu.com/tomy3217/blog/item/bb45cb1621bd171b972b43a4.html