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 ...
随机推荐
- 解决spring boot在RabbitMQ堆积消息情况下无法启动问题
最近遇到一个问题,服务站点上线之前,先去新建需要的rabbitmq并绑定关系,此时 如果发送消息方运行, 那边会造成新建的q消息部分堆积得不到及时消费 那么问题来了? 在消息堆积情况下,服务站点无法启 ...
- JavaScript中的call、apply、bind是怎么回事？
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...
- 转：聊聊Greenplum的那些事
笔者有幸从04年就开始从事大规模数据计算的相关工作,08年作为Greenplum 早期员工加入Greenplum团队(当时的工牌是“005”,哈哈),记得当时看了一眼Greenplum的架构(嗯,就是 ...
- 【小米oj】找出单独的数字
题目链接:https://code.mi.com/problem/list/view?id=2&cid=0&sid=26251#codearea 描述 给出N个数字.其中仅有一个数字出 ...
- eureka-4-eureka server 高可用
Eureka Server 可以通过运行多个实例并相互注册实现高可用部署.Eureka Server 实例之间会彼此增量同步信息,确保所有节点信息一致. 关键点: 配置: eureka.client. ...
- 剑指offer--38.左旋转字符串
时间限制:1秒 空间限制:32768K 热度指数:173814 本题知识点: 字符串 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果. ...
- H265 Profile & Level & Tier 介绍
H265/HEVC Profile Level Tier 档次.水平.等级 为了提供不同应用之间的兼容互通,HEVC/H265 定义了不同的编码 Profile 档次.Level 水平.Tier 等级 ...
- echarts-detail---散点图
data4 = [{ xAxis: result.AvgEvaluate, seriesId: ', name: '基干360综合分' }, { yAxis: evalue, seriesId: ', ...
- .NET Web开发技术简单整理 转
.NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何 ...
- Android 4.0 Camera架构分析之Camera初始化
Android Camera 采用C/S架构,client 与server两个独立的线程之间使用Binder通信,这已经是众所周知的了.这里将介绍Camera从设备开机,到进入相机应用是如何完成初始化 ...