《使用ExtJs构建树形菜单功能》由会员分享，可在线阅读，更多相关《使用ExtJs构建树形菜单功能（31页珍藏版）》请在金锄头文库上搜索。
1、ExtJs 构建树形菜单功能构建树形菜单功能在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区 信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的 HTML 页 面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的 JS 代码，对基于 AJAX 异步加载来说尤其如此，不但涉及 AJAX 数据异步加载，还需要考虑跨浏览器支持， 处理起来非常麻烦，EXT 中提供了现成的树控件，通过这些控件，可以在 B/S 应用中快速 开发出包含树形信息结构的应用。本文就是详细全面介绍树形结构的使用过程和实例。一、创建一棵树一、创建一棵树 树控件由 Ext.tr
2、ee.TreePanel 类定义，控件的名称为 TreePanel，TreePanel 类继承自 Panel 面板，在 EXT 中使用树控件非常简单，我们先来看一下代码（包含配置信息） 。简单的树形Ext.onReady(function()var tree=new Ext.tree.TreePanel(el:tree);var root=new Ext.tree.TreeNode(text:我是根我是根);tree.setRootNode(root); tree.render(); ); 这里的参数 tree 表示渲染的 DOM 的 id.HTML 中应该要要有 相对应，最后这棵树就出现在这
3、个 div 的位置上。在获得了树形面板后，就必须要设置根，因为必须有了根才可以生长枝节，最后生成完整 的树，所以根是必须的。具体实现的效果如图1所示。图图1 只有根的树只有根的树二、为树生枝展叶二、为树生枝展叶 上面的实例代码生成一棵只有根的树，下面的代码就为树添加枝和叶，代码清单如下：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(te
4、xt:湖南省);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(); );效果图如图2所示：图2 完整的树控件注意：注意：我们一方面可以通过修改来设 置 div 高度；同时也可以设置 treePanel 的 autoHeight 属性为 true，则可以自动
5、计算高 度，否则展开的树形控件看不到枝叶。三、使用三、使用 TreeLoader 获得数据获得数据 使用上面的录入方式来获取数据不仅麻烦，而且还容易出错，Ext.tree.TreeLoader 可可 以利用从后台获取的数据为我们组装出一棵树来以利用从后台获取的数据为我们组装出一棵树来，我们只需要提供数据，让 treeLoader完成数据转换数据转换和装配节点装配节点的操作。（1）我们要为 TreePanel 配置一个 TreeLoader，如下面代码所示：var tree=new Ext.tree.TreePanel(el:tree,loader:new Ext.tree.TreeLoader
6、(dataUrl:data.txt), autoHeight:true);（2）这里的 TreeLoader 仅包含一个参数dataUrl:data.txt,这个 dataUrl 表示在树 完成渲染后从何处读取数据。data.txt 内容如下：text:not leaf,text:is leaf,leaf:true Data.txt 返回的是 json 数据。(3) 现在查看页面依然只能看到根，没有读取数据并显示到页面上，因为我们使用的 TreeNode 不支持 Ajax，我们需要将其改成 AsyncTreeNode,这样才可以实现我们想要 的异步加载效果，如下面的代码所示：var root=
7、new Ext.tree.AsyncTreeNode(text:区域信息区域信息);注意注意:必须将必须将 root.expand(true,true)修改成修改成 root.expand()避免无限循环展开树避免无限循环展开树 枝。枝。四、读取本地四、读取本地 JSON 数据数据 读取本地 JSON 其实是一种是用使用 TreeLoader 的另类方法。因为有时候树形的数据并 不多，为了获取少量的数据而是用 AJAX 访问后台实在不划算。首先为 TreePanel 设置一 个参数为空的 TreeLoader，如下面代码所示：var tree=new Ext.tree.TreePanel(el
8、:tree,loader:new Ext.tree.TreeLoader(), autoHeight:true);然后，设置一个根节点，并为这个根节点设置 children 属性，如下面代码所示：var root=new Ext.tree.AsyncTreeNode(text:我是根,children:text:Leaf No.1,leaf:true,text:Leaf No.1,leaf:true);tree.setRootNode(root); 这里需要注意几点：(1) 必须设置 TreeLoader,否则根节点会一直处于在读取状态，无法获得 children 中定 义的子节点(2) 根节
9、点必须是 AsyncTreeNode,如果是 TreeNode,也无法生成子节点(3) 子节点中的叶子节点必须都加上 leaf:true，否则会一直显示读取状态。五、右键菜单五、右键菜单 树形弹出的右键菜单效果图如图3所示：图图3 右键菜单效果右键菜单效果具体实现步骤如下：(1) 制作自定义菜单，如下面的代码所示：var contextmenu=new Ext.menu.Menu(id:theContextMenu,items:text:点击,handler:function()alert(我被点中了););(2) 绑定 contextmenu 事件，如下面代码所示：tree.on(“cont
10、extmenu“,function(node,e)e.preventDefault();node.select();contextmenu.showAt(e.getXY(););六、修改节点的默认图标六、修改节点的默认图标实际上，每个树形节点都有 icon 和 iconCls 属性，他们负责制定节点的图标，现在我们 来修改树种节点的图标，无论是通过 new 手工创建的节点，还是通过 JSON 读取到的节 点，设置方式都是一样，如下面代码所示：var root1=new Ext.tree.TreeNode(text:icon,icon:user_female.png);七、从节点弹出对话框七、从
11、节点弹出对话框 下面的代码可以让对话框看起来像是从标题上飞出来的！效果：单击节点弹出对话框tree.on(“click“,function(node)Ext.Msg.show(title:提示,msg:“你单击了“+node,animEl:node.ui.textNode);); 八、节点提示信息八、节点提示信息 当我们把鼠标停留在某个节点的上方时，便会出现提示信息，为了实现这种效果，我们需 要对提供的 JSON 数据做一些修改，在 JSON 中添加对应的节点提示信息，我们给每个节 点数据都加上 qtip:xxx参数，这个节点就可以显示提示信息了。不过，仅仅为 JSON 添加这个参数还不能在页
12、面上显示提示信息，需要先在 JS 中对 EXT 的提示功能进行初始化。Ext.QuickTips.init();/开启提示功能上面这行代码必须在其他功能加载前完成，建议写在 onReady 函数的第一行。具体代码 如下：Ext.onReady(function()Ext.QuickTips.init();var tree=new Ext.tree.TreePanel(el:tree,loader:new Ext.tree.TreeLoader(), autoHeight:true);var root=new Ext.tree.AsyncTreeNode(text:我是根,children:te
13、xt:Leaf No.1,qtip:No1,leaf:true,text:Leaf No.1,qtip:No2,leaf:true);var root1=new Ext.tree.TreeNode(text:icon,icon:user_female.png);tree.setRootNode(root); /root.expand(true,true);var contextmenu=new Ext.menu.Menu(id:theContextMenu,items:text:点击,handler:function()alert(我被点中了););tree.on(“contextmenu“,
14、function(node,e)e.preventDefault();node.select();contextmenu.showAt(e.getXY(););tree.on(“click“,function(node)Ext.Msg.show(title:提示,msg:“你单击了“+node,animEl:node.ui.textNode););tree.render(); );九、为节点设置超链接九、为节点设置超链接 虽然我们完全可以监听 click 事件，但是直接在节点树形中设置超链接的地址也是一个好 主意，这是很多人想实现的功能，具体的代码如下：var root=new Ext.tre
15、e.AsyncTreeNode(text:我是根,children:text:新浪网,qtip:新浪网,leaf:true,href:http:/,text:百度中国,qtip:搜索引擎,leaf:true,href:http:/,hrefTarget:_blank);ExtJs 开发实例参考:http:/ hiddenName，使传值时跟 Ext.form.ComboBox 类似;2.设值时展开整棵树(在 TreeCombo 外实现)，使弹出下拉框时默认选中节点;代码如下:JsJs 代码代码 /* * version Base on Ext3.0 * class Ext.ux.TreeCombo * extends Ext.form.TriggerField */ Ext.ux.TreeCo
