1.代码如下：

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4     <title></title>
  5.  5     <!--ExtJs框架开始-->
  6.  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
  7.  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>
  8.  8     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
  9.  9     <style type="text/css">
  10. 10         .nodeicon
  11. 11         {
  12. 12             background-image: url(image/user.gif) !important;
  13. 13         }
  14. 14     </style>
  15. 15     <!--ExtJs框架结束-->
  16. 16     <script type="text/javascript">
  17. 17         Ext.onReady(function () {
  18. 18             //树的节点数据源
  19. 19             var node = {
  20. 20                 text: '根',
  21. 21                 expanded: true,
  22. 22                 leaf: false,
  23. 23                 children: [
  24. 24                     { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
  25. 25                     { text: '根下节点二', leaf: true },
  26. 26                     { text: '根下节点三', leaf: false, children: [
  27. 27                         { text: '节点三子节点一', leaf: true },
  28. 28                         { text: '节点三子节点二', leaf: false, expanded: true, children: [
  29. 29                             { text: '节点三子节点二节点一', leaf: true },
  30. 30                             { text: '节点三子节点二节点二', leaf: true }
  31. 31                         ]
  32. 32                         }
  33. 33                     ]
  34. 34                     }
  35. 35                 ]
  36. 36             };
  37. 37             //树面板(本地数据源)
  38. 38             var treelocal = new Ext.tree.TreePanel({
  39. 39                 title: 'TreePanelLocal',
  40. 40                 //rootVisible: false,
  41. 41                 root: node
  42. 42             });
  43. 43             //树面板(服务器数据源)
  44. 44             var treeservice = new Ext.tree.TreePanel({
  45. 45                 title: 'TreePanelService',
  46. 46                 root: { text: '根', expanded: true },
  47. 47                 //rootVisible: false,
  48. 48                 loader: new Ext.tree.TreeLoader({
  49. 49                     url: '/App_Ashx/Demo/Tree.ashx'
  50. 50                 })
  51. 51             });
  52. 52             //单表
  53. 53             var form = new Ext.form.FormPanel({
  54. 54                 frame: true,
  55. 55                 title: '表单标题',
  56. 56                 style: 'margin:10px',
  57. 57                 items: [treelocal, treeservice],
  58. 58                 buttons: [{
  59. 59                     text: '获取选中项',
  60. 60                     handler: function () {
  61. 61                         selectNode = treelocal.getSelectionModel().getSelectedNode();
  62. 62                         alert('TreePanelLocal：' + (selectNode == null ? treelocal.root.text : selectNode.text));
  63. 63                     }
  64. 64                 }]
  65. 65             });
  66. 66             //窗体
  67. 67             var win = new Ext.Window({
  68. 68                 title: '窗口',
  69. 69                 width: 476,
  70. 70                 height: 574,
  71. 71                 resizable: true,
  72. 72                 modal: true,
  73. 73                 closable: true,
  74. 74                 maximizable: true,
  75. 75                 minimizable: true,
  76. 76                 items: form
  77. 77             });
  78. 78             win.show();
  79. 79         });
  80. 80     </script>
  81. 81 </head>
  82. 82 <body>
  83. 83     <!--
  84. 84 说明：
  85. 85 (1)var tree = new Ext.tree.TreePanel():创建一个新的TreePanel表单对象。
  86. 86 (2)root: node：根节点。
  87. 87 (3)expanded: true:是否展开子节点，默认为false，如“根下节点三”。
  88. 88 (4)leaf: true：是否为叶子节点，这个要注意下，如果设置为false但没有 children 那么会产生一直读取子节点的展示。
  89. 89 (5)//rootVisible: false：有时候我们不想显示根节点，可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。
  90. 90 (6)loader: new Ext.tree.TreeLoader({
  91. 91                     url: '/App_Ashx/Demo/Tree.ashx'
  92. 92                 })
  93. 93    树的数据载入组件，通过url寻找service端返回的json,并且自动转换成 TreeNode。
  94. 94 (7)iconCls: 'nodeicon'：ExtJs自带的图标显示为“文件夹”或是“列表”，通过 iconCls 可以列换树型菜单的图标。
  95. 95 (8)selectNode = treelocal.getSelectionModel().getSelectedNode()：获取选中项。
  96. 96 -->
  97. 97 </body>
  98. 98 </html>

用到后台代码如下/App_Ashx/Demo/Tree.ashx：

  1.  1 using System.Web;
  2.  2
  3.  3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
  4.  4 {
  5.  5     public class Tree : IHttpHandler
  6.  6     {
  7.  7         public void ProcessRequest(HttpContext context)
  8.  8         {
  9.  9             string strResult = @"[
  10. 10                     { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
  11. 11                     { text: '根下节点二', leaf: true },
  12. 12                     { text: '根下节点三', leaf: false, children: [
  13. 13                         { text: '节点三子节点一', leaf: true },
  14. 14                         { text: '节点三子节点二', leaf: false, expanded: true, children: [
  15. 15                             { text: '节点三子节点二节点一', leaf: true },
  16. 16                             { text: '节点三子节点二节点二', leaf: true }
  17. 17                         ]
  18. 18                         }
  19. 19                     ]
  20. 20                     }
  21. 21                 ]";
  22. 22             context.Response.Write(strResult);
  23. 23         }
  24. 24
  25. 25         public bool IsReusable
  26. 26         {
  27. 27             get
  28. 28             {
  29. 29                 return false;
  30. 30             }
  31. 31         }
  32. 32     }
  33. 33 }

2.效果如下：

Extjs tree1的更多相关文章

  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. [转载]Java在线打开PDF文档

    步骤一:(涉及到的工具) 访问:http://www.zhuozhengsoft.com/dowm/,从官网下载PageOffice for Java. 步骤二:(配置工程) 1. 解压PageOff ...

  2. Jquery validation自定义验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. django 自定义用户表替换系统默认表

    首先新建一个users应用,编写这个应用的models类. from django.contrib.auth.models import AbstractUser class UserProfile( ...

  4. XOR Queries(莫队+trie)

    题目链接: XOR Queries 给出一个长度为nn的数组CC,回答mm个形式为(L, R, A, B)(L,R,A,B)的询问,含义为存在多少个不同的数组下标k \in [L, R]k∈[L,R] ...

  5. 【转】Ubuntu16.04安装WPS

    下载安装下载WPS For Linux:http://community.wps.cn/download/ 直接下载:http://kdl.cc.ksosoft.com/wps-community/d ...

  6. caffe中的Local Response Normalization (LRN)有什么用，和激活函数区别

    http://stats.stackexchange.com/questions/145768/importance-of-local-response-normalization-in-cnn ca ...

  7. caffe 细节

    batch :http://www.zhihu.com/question/32673260 caffe blog: http://blog.csdn.net/abcjennifer/article/d ...

  8. c++语言第二次作业

    一题目7-1统计学生成绩 1实验代码 #include<stdio.h> int main(void) { int i,n,grade,A,B,C,D,E; A=B=C=D=E=; sca ...

  9. python之csv操作问题

    注意注意 写入csv文件 一定要注意 [ ] fileObj = open("fileName","w+") file = csv.writer(fileObj ...

  10. [QT]给QApplication安装事件过滤器 app.installEventFilter

    Qt的事件处理有5种级别: 1.      重写控件的事件处理函数:如重写keyPressEvent(),mousePressEvent()和paintEvent(),这是最常用的事件处理方法,我们已 ...