Extjs tree1
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
9 <style type="text/css">
10 .nodeicon
11 {
12 background-image: url(image/user.gif) !important;
13 }
14 </style>
15 <!--ExtJs框架结束-->
16 <script type="text/javascript">
17 Ext.onReady(function () {
18 //树的节点数据源
19 var node = {
20 text: '根',
21 expanded: true,
22 leaf: false,
23 children: [
24 { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
25 { text: '根下节点二', leaf: true },
26 { text: '根下节点三', leaf: false, children: [
27 { text: '节点三子节点一', leaf: true },
28 { text: '节点三子节点二', leaf: false, expanded: true, children: [
29 { text: '节点三子节点二节点一', leaf: true },
30 { text: '节点三子节点二节点二', leaf: true }
31 ]
32 }
33 ]
34 }
35 ]
36 };
37 //树面板(本地数据源)
38 var treelocal = new Ext.tree.TreePanel({
39 title: 'TreePanelLocal',
40 //rootVisible: false,
41 root: node
42 });
43 //树面板(服务器数据源)
44 var treeservice = new Ext.tree.TreePanel({
45 title: 'TreePanelService',
46 root: { text: '根', expanded: true },
47 //rootVisible: false,
48 loader: new Ext.tree.TreeLoader({
49 url: '/App_Ashx/Demo/Tree.ashx'
50 })
51 });
52 //单表
53 var form = new Ext.form.FormPanel({
54 frame: true,
55 title: '表单标题',
56 style: 'margin:10px',
57 items: [treelocal, treeservice],
58 buttons: [{
59 text: '获取选中项',
60 handler: function () {
61 selectNode = treelocal.getSelectionModel().getSelectedNode();
62 alert('TreePanelLocal：' + (selectNode == null ? treelocal.root.text : selectNode.text));
63 }
64 }]
65 });
66 //窗体
67 var win = new Ext.Window({
68 title: '窗口',
69 width: 476,
70 height: 574,
71 resizable: true,
72 modal: true,
73 closable: true,
74 maximizable: true,
75 minimizable: true,
76 items: form
77 });
78 win.show();
79 });
80 </script>
81 </head>
82 <body>
83 <!--
84 说明：
85 (1)var tree = new Ext.tree.TreePanel():创建一个新的TreePanel表单对象。
86 (2)root: node：根节点。
87 (3)expanded: true:是否展开子节点，默认为false，如“根下节点三”。
88 (4)leaf: true：是否为叶子节点，这个要注意下，如果设置为false但没有 children 那么会产生一直读取子节点的展示。
89 (5)//rootVisible: false：有时候我们不想显示根节点，可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。
90 (6)loader: new Ext.tree.TreeLoader({
91 url: '/App_Ashx/Demo/Tree.ashx'
92 })
93 树的数据载入组件，通过url寻找service端返回的json,并且自动转换成 TreeNode。
94 (7)iconCls: 'nodeicon'：ExtJs自带的图标显示为“文件夹”或是“列表”，通过 iconCls 可以列换树型菜单的图标。
95 (8)selectNode = treelocal.getSelectionModel().getSelectedNode()：获取选中项。
96 -->
97 </body>
98 </html>
用到后台代码如下/App_Ashx/Demo/Tree.ashx：
1 using System.Web;
2
3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
4 {
5 public class Tree : IHttpHandler
6 {
7 public void ProcessRequest(HttpContext context)
8 {
9 string strResult = @"[
10 { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
11 { text: '根下节点二', leaf: true },
12 { text: '根下节点三', leaf: false, children: [
13 { text: '节点三子节点一', leaf: true },
14 { text: '节点三子节点二', leaf: false, expanded: true, children: [
15 { text: '节点三子节点二节点一', leaf: true },
16 { text: '节点三子节点二节点二', leaf: true }
17 ]
18 }
19 ]
20 }
21 ]";
22 context.Response.Write(strResult);
23 }
24
25 public bool IsReusable
26 {
27 get
28 {
29 return false;
30 }
31 }
32 }
33 }
2.效果如下：
Extjs tree1的更多相关文章
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
- ExtJS 4.2 第一个程序
本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
- ExtJS 4.2 业务开发(一)主页搭建
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...
- ExtJS 4.2 业务开发(二)数据展示和查询
本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...
- ExtJS 4.2 业务开发(三)数据添加和修改
接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
随机推荐
- Linux 策略路由配置
策略路由配置 #编辑rt_tables echo "192 net_192 " >> /etc/iproute2/rt_tables echo "196 ne ...
- Linux 磁盘管理,Linux vi/vim
一.Linux 磁盘管理 Linux磁盘管理好坏直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 ...
- c# IE 清除缓存
Response.Buffer = true; Response.ExpiresAbsolute = System.DateTime.Now.AddSeconds(-); Response.Expir ...
- CSS 清除浮动 clear 属性
CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...
- Django 知识点补充
Django 知识点补充 1 Django如何在Model保存前做一定的固定操作,比如写一条日志 (1)利用Django的Model的Signal Dispatcher, 通过django.db.mo ...
- 依存可视化︱Dependency Viewer——南京大学自然语言处理研究组
来源网页:http://nlp.nju.edu.cn/tanggc/tools/DependencyViewer.html 视频演示网页:http://nlp.nju.edu.cn/tanggc/to ...
- 我也说说Emacs吧(5) - 基本编辑操作
基本编辑操作 进入编辑模式 标准的emacs用户是遇不到这一节的,因为默认就可以编辑.但是spacemacs用户需要先学习一下强大的vi的模式切换功能了. vi的一个重要特点就是命令特别多,所以一旦学 ...
- 桶排序bucket sort
桶排序 (Bucket sort)或所谓的箱排序的原理是将数组分到有限数量的桶子里,然后对每个桶子再分别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序),最后将各个桶中的数据有序的 ...
- Ubuntu连接手机步骤
第一次使用adb之前,需要在home/.android里新建adb_usb.ini文件:0x1782. 注:adb已在安装系统后装好,手机要处于开机状态 查看设备命令: $ adb devices 正 ...
- 原 the app referencesnon-public selectors in payload
摘要 当我们上传验证的时候,出现了the app referencesnon-public selectors in payload/项目名.app/项目:字符 的警告的解决办法 当我们上传验证的时候 ...