ExtTree学习笔记

ext的tree学习笔记

2007-11-23 11:08

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，并且一棵是用静态文件作为数据源，一棵是动态生成的数据源： Code /* * 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="http://www.cnblogs.com/../resources/css/ext-all.css" />       <!-- LIBS -->       <script type="text/javascript" src="http://www.cnblogs.com/yui-utilities.js"></script>       <script type="text/javascript" src="http://www.cnblogs.com/ext-yui-adapter.js"></script>       <!-- ENDLIBS -->       <script type="text/javascript" src="http://www.cnblogs.com/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>