本案例中记载了Extjs中一棵树的形成以及各种案例集成，并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的，整理出来，方便以后查看。

JSP页面：

  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <title>区域管理</title>
  6. <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/resources/css/ext-all.css" />
  7. <link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/ux/treegrid/treegrid.css" />
  8. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"></script>
  9. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ext-all.js"></script>
  10. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter.js"></script>
  11. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer.js"></script>
  12. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI.js"></script>
  13. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader.js"></script>
  14. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns.js"></script>
  15. <script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid.js"></script>
  16. <script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
  17. <script type="text/javascript" src="${ctxStatic}/js/srcs/srcs-treegrid.js"></script>
  18. <script type="text/javascript">
  19. //项目根目录地址
  20. var ctxStatic = '${ctxStatic}';
  21. </script>
  22. </head>
  23. <body>
  24. <div id="container"></div>
  25. </body>
  26. </html>

js页面：

  1. Ext.onReady(function() {
  2. // 初始化节点提示qtip
  3. Ext.QuickTips.init();
  4. // 定义一个根节点
  5. var root = new Ext.tree.TreeNode({
  6. id : 'root',
  7. text : '树根',
  8. checked : true,
  9. qtip : '我是树根'
  10. });
  11. // 定义一个树叶或者枝
  12. var leaf1 = new Ext.tree.TreeNode({
  13. id : "leaf1",
  14. text : '我是树叶1',
  15. checked : true,
  16. qtip : '我是树叶'
  17. });
  18. var leaf2 = new Ext.tree.TreeNode({
  19. id : "leaf2",
  20. text : '我是树枝2',
  21. checked : true,
  22. qtip : '我是树枝'
  23. });
  24. var leaf3 = new Ext.tree.TreeNode({
  25. id : "leaf3",
  26. text : '我是树叶3',
  27. href : 'http://www.baidu.com',
  28. checked : true,
  29. qtip : '我是树叶'
  30. });
  31. var leaf4 = new Ext.tree.TreeNode({
  32. id : "leaf4",
  33. text : '我是树枝4',
  34. checked : true,
  35. qtip : '我是树枝'
  36. });
  37. var leaf5 = new Ext.tree.TreeNode({
  38. id : "leaf5",
  39. text : '我是树叶5',
  40. checked : true,
  41. qtip : '我是树叶'
  42. });
  43. var leaf6 = new Ext.tree.TreeNode({
  44. id : "leaf6",
  45. text : '我是树叶4',
  46. checked : true,
  47. qtip : '我是树叶'
  48. });
  49. root.appendChild(leaf1);
  50. root.appendChild(leaf2);
  51. leaf2.appendChild(leaf3);
  52. leaf2.appendChild(leaf4);
  53. leaf4.appendChild(leaf5);
  54. leaf4.appendChild(leaf6);
  55. // 定义一个菜单
  56. // var contextMenu = new Ext.menu.Menu({ items : [(
  57. // ),( )] }); contextMenu.showAt(event.getXY());
  58. // tree.on('contextmenu',treeContextHandler);
  59. //
  60. //
  61. // var root = new Ext.tree.AsyncTreeNode({ text:'i am a root', id:'root',
  62. // children:[{ text:'node1',leaf:true },{ text:'node2',leaf:true },{
  63. // text:'node3',leaf:true }] }); var loader = new Ext.tree.TreeLoader();
  64. // 定义一棵树
  65. var tree = new Ext.tree.TreePanel({
  66. renderTo : 'container',
  67. // loader : loader,
  68. root : root,
  69. title : '我是一颗小小树',// 树标题
  70. collapsible : true,// 树形是否有缩放功能
  71. autoHeight : true,// 自动高度，默认false
  72. animate : true,// 展开动画
  73. enableDrag : true,// 是否可以拖动(效果上)
  74. enableDD : true,// 不进可以拖动，还可以改变节点层次结构
  75. enableDrop : false,// 仅仅drop
  76. lines : true,// 节点间的虚线条是否显示
  77. rootVisible : true,// 是否显示根节点，默认true
  78. userArrows : true,// 是否显示小箭头
  79. // autoScroll : true,//是否显示滚动条
  80. // height : 150,
  81. width : 200
  82. });
  83. // 第一个参数为true，展开所有节点，false只展开一级。第二个参数为true，慢慢展开，显示展开，false，则不显示过程
  84. root.expand(false, true);
  85. // 编写树节点的单击事件
  86. tree.on('click', function(node, event) {
  87. // Ext.Msg.alert("信息提示","you clicked me！");
  88. Ext.Msg.show({
  89. title : '信息提示',
  90. msg : node.text,
  91. animEl : node.ui.textNode
  92. });
  93. // 为节点修改样式
  94. var ui = node.ui;
  95. ui.hide();
  96. (function() {
  97. ui.show();
  98. }).defer(2000);
  99. // ui.addClass("big");
  100. // (
  101. // function(){
  102. // ui.removeClass("big");
  103. // }
  104. // ).defer(5000);
  105. // 删除选中的节点
  106. // tree.getSelectionModel().getSelectedNode().remove();
  107. });
  108. // 编写树节点的双击事件
  109. tree.on('dblclick', function(node, event) {
  110. Ext.Msg.alert("信息提示", "you clicked me twice！");
  111. });
  112. // 编辑树节点的拖放事件
  113. tree.on('nodedrop', function(event) {
  114. Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
  115. + event.target.text + '上，掉落的方式是' + event.point);
  116. switch (event.point) {
  117. case 'append':
  118. Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '变成了'
  119. + event.target.text + '子节点');
  120. break;
  121. case 'above':
  122. Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
  123. + event.target.text + '和'
  124. + event.target.previousSibling.text + '之间');
  125. break;
  126. case 'below':
  127. Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
  128. + event.dropNode.previousSibling.text + '和'
  129. + event.target.nextSibling.text + '之间');
  130. break;
  131. }
  132. })
  133. // 对树节点进行排序的工具
  134. // new Ext.tree.TreeSorter(tree,{folderSort:true,dir:desc,property:'text'});
  135. // //编写树节点的双击事件 tree.on('expandnode',function(node,event){
  136. // Ext.Msg.alert("信息提示","expandnode！"); }); //编写树节点的双击事件
  137. // tree.on('collapsenode',function(node,event){
  138. // Ext.Msg.alert("信息提示","collapsenode！"); });
  139. var root2 = new Ext.tree.TreeNode({
  140. id : 'root2',
  141. text : '树根2',
  142. qtip : '我是树根2'
  143. });
  144. var tree2 = new Ext.tree.TreePanel({
  145. renderTo : 'container',
  146. root : root2,
  147. enableDrop : true,
  148. // enableDrag:true,
  149. title : '我是一颗小小草',
  150. collapsible : true,
  151. width : 200
  152. });
  153. root2.expand();
  154. });

一、Ext.tree.TreePanel

主要配置项：
            root：树的根节点。
            rootVisible：是否显示根节点，默认为true。
            useArrows：是否在树中使用Vista样式箭头，默认为false。
            lines：是否显示树线，默认为true。
            loader：树节点的加载器，默认为Ext.tree.TreeLoader。
            selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。
            pathSeparator：树节点路径的分隔符，默认为“/”。
            singleExpand：是否一次只展开树中的一个节点，默认为true。
            requestMethod：请求方法，可选值有POST、GET。
            containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。

主要方法：
            collapseAll()：收缩所有树节点
            expandAll()：展开所有树节点
            getRootNode()：获取根节点
            getNodeById(String id)：获取指定id的节点
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展开panel的body以便让其变得可见
            expandPath( String path, [String attr], [Function callback] )展开当前TreePanel中的指定路径
            getChecked( [String attribute], [TreeNode startNode] )获得选中的节点列表，或者被选中节点的某个指定的属性数组
            selectPath( String path, [String attr], [Function callback] ) 从树中选中所给路径的节点
            getSelectionModel()：返回此TreePanel使用的选择模型

 二、Ext.tree.TreeNode
      主要配置项：
            text：节点上的文本信息
            qtip：节点上的提示信息
            icon：节点图标对应的路径
            iconCls：应用到节点图标上的样式
            checked：当前节点的选择状态
                  true：在节点前显示一个选中状态的复选框
                  false：在节点前显示一个未选中状态的复选框
                  不指定该值：不显示任何复选框
            href：节点的连接属性，默认为#
            hrefTarget：显示节点连接的目标框架
            editable：是否允许编辑，默认为true
            expanded：是否展开节点，默认为false
            disabled：是否禁用节点，默认为false
            singleClickExpand：是否通过单击方式展开节点
            allowChildren：是否允许当前节点具有子节点，默认为true
            expandable：当不含子节点时，是否总显示一个加减图标，默认为false
            uiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI
 
      主要属性：
            text：节点上的文本信息
            disabled：当前节点是否被禁用
  
      主要方法：
            collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点
            deep：是否级联收缩全部子节点
            collapseChildNodes( [Boolean deep] )：收缩所有子节点
            disable()：禁用当前节点
            enable()：启用当前节点
            ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点
            expandChildNodes( [Boolean deep] )：展开所有子节点
            isExpanded()：当前节点是否展开
            isSelected()：当前节点是否被选中
            select()：选择当前节点
            setText( String text )：设置当前的文本
            toggle()：切换当前节点的展开和收缩状态
            unselect()：取消对当前节点的选择
            getUI()：取得节点的UI对象

 三、Ext.tree.AsyncTreeNode
      主要配置项：
            loader：当前节点的树加载器，默认使用树中配置的树加载器
  
      主要方法：
            isLoaded()：当前节点是否已经加载数据
            reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数

Extjs tree2的更多相关文章

  1. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  2. ExtJS 4.2 介绍

    本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...

  3. ExtJS 4.2 第一个程序

    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...

  4. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  5. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

  6. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  7. ExtJS 4.2 业务开发(二)数据展示和查询

    本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...

  8. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  9. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

随机推荐

  1. How to find per-process I/O statistics on Linux

    以下转自http://www.xaprb.com/blog/2009/08/23/how-to-find-per-process-io-statistics-on-linux/ Newer Linux ...

  2. BZOJ 1045 [HAOI2008]糖果传递 ★(环形等分：中位数)

    题意 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. 思路 假设平均数是x,且a1给an了k个(k<0说明是an给a1了-k个),那么总代价就 ...

  3. Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  4. 创建自定义JSR303的验证约束(Creating custom constraints)

    转载:http://clongjava.iteye.com/blog/1317649 由于输入验证在软件开发中是必须的一件事情,特别是与用户交互的软件产品,验证用户的潜在输入错误是必不可少的一件事情, ...

  5. 【zznu-夏季队内积分赛3-G】2333

    题目描述 “别人总说我瓜,其实我一点也不瓜,大多数时候我都机智的一批“ 宝儿姐考察你一道很简单的题目.给你一个数字串,你能判断有多少个连续子串能整除3吗? 输入 多实例输入,以EOF结尾,每行一个数字 ...

  6. 修复 海盗船 k70 lux 未检测到设备（k70 no device detected）

    corsair k70 lux 上周收到的生日礼物,头一次用机械键盘,还是这么高端的机械键盘(729RMB),手感一级棒.但是,有问题啊!把键盘上的 bios按钮拨到8上电脑可以识别,scroll 灯 ...

  7. kmplayer加速播放视频（转）

    转自微博:http://blog.sina.com.cn/shaguazhu1213 KMPlayer控制播放速度的快捷方式 (2011-11-12 10:51:56) 标签: 杂谈 分类: 编程之旅 ...

  8. vue.js 源代码学习笔记 ----- instance init

    /* @flow */ import config from '../config' import { initProxy } from './proxy' import { initState } ...

  9. 使用jQuery操作DOM(2)

    1.获取设置属性值 attr({属性名1:属性值1,属性名2:属性值2}); //设置属性值 removeAttr(“属性名”); //删除属性 注意:如果元素没有此属性,会不起作用 2.获取同辈元素 ...

  10. DOM2级事件处理程序

    DOM2级时间定义了两个方法:addEventListener() 和removeEventListener() 他们都接受3个参数:1)要处理的事件名   2)作为事件处理程序的函数 3)一个布尔值 ...