ext的tree学习笔记

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，并且一棵是用静态文件作为数据源，一棵是动态生成的数据源：

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, 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, 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);
}
       </

评论

1 楼 CharlesCui 2009-05-19  

[{'text':'welcome.html','id':'welcome.html','cls':'file',myPara:'myValue'},
{'text':'welcome2.html','id':'welcome2.html','leaf':true,'cls':'file','href':'welcome2.html'}]


这个myPara的自定义属性好像不能用吧？

我写在on('click', function(node){})事件触发之后，node无法得到自定义属性的值。

你是怎么得到的呢？