使用ExtJs构建树形菜单功能.doc

ExtJs 构建树形菜单功能 在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开发出包含树形信息结构的应用。 本文就是详细全面介绍树形结构的使用过程和实例。 一、创建一棵树树控件由Ext.tree.TreePanel类定义，控件的名称为TreePanel，TreePanel类继承自Panel面板，在EXT中使用树控件非常简单，我们先来看一下代码（包含配置信息）。 html xmlns=/1999/xhtml head id=Head1 runat=server title简单的树形/title link rel=stylesheet type=text/css href=../resources/css/ext-all.css/ script type=text/javascript src=../adapter/ext/ext-base.js/script script type=text/javascript src=../ext-all.js/script script type=text/javascript Ext.onReady(function(){ var tree=new Ext.tree.TreePanel({ el:tree }); var root=new Ext.tree.TreeNode({text:我是根}); tree.setRootNode(root); !-- 设置根 -- tree.render(); !--如果这是延时加载的组件，就要执行这个渲染的 方法到其容器的元素--  }); /script/headbody div id=tree/div/body/html 这里的参数tree表示渲染的DOM的id.HTML中应该要要有div id=tree/div相对应，最后这棵树就出现在这个div的位置上。 在获得了树形面板后，就必须要设置根，因为必须有了根才可以生长枝节，最后生成完整的树，所以根是必须的。具体实现的效果如图1所示。 图1 只有根的树 二、为树生枝展叶上面的实例代码生成一棵只有根的树，下面的代码就为树添加枝和叶，代码清单如下： script type=text/javascript Ext.onReady(function(){ var tree=new Ext.tree.TreePanel({ el:tree, autoHeight:true }); var root=new Ext.tree.TreeNode({text:区域信息});  var node1=new Ext.tree.TreeNode({text:湖南省}); var node3=new Ext.tree.TreeNode({text:广东省}); var node2=new Ext.tree.TreeNode({text:广州市});   node3.appendChild(node2); root.appendChild(node1); root.appendChild(node3);  tree.setRootNode(root);  tree.render();  }); /script 效果图如图2所示： 图2 完整的树控件 注意：我们一方面可以通过修改div id=tree style=height:300px;/div来设置div高度；同时也可以设置treeP