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>