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 ...
随机推荐
- Spring3.0 核心jar包详解
org.springframework.aop 包含在应用中使用Spring的AOP特性时所需的类. org.springframework.asm Spring独立的ASM程序, Spring ...
- Chrome浏览器最小字体12px限制问题解决方法
问题描述: 页面宽度有限的情况下显示大数据,采用font-size:8px来压缩字体大小,版本 25.0.1547.66及以下版本的chrome浏览器没有问题,后续版本的就不可以了: 问题原因: 浏览 ...
- 030——VUE中鼠标语义修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- c# 让double保留两位小数
1.Math.Round(0.333333,2);//按照四舍五入的国际标准2. double dbdata=0.335333; string str1=String.Format(&qu ...
- log4cpp单例类封装
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- C++ 各种继承方式的类内存布局
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- python蛋痛的依赖管理
java有maven 来统一管理项目依赖.初学python不久还没发现类似这样的工具.只有暂时用这个方法来手动操作了. 你可以用pip导出你的dependency: $ pip freeze > ...
- Composer 安装东西遇到github需要token怎么办
安装yii2遇到这样的提示: Could not fetch https://api.github.com/repos/jquery/sizzle/contents/bower.json?ref=91 ...
- 编译安装pgbouncer-checking for OpenSSL... configure: error: not found
花了一上午时间将pgbouncer的参数通读了一遍,对他有个大致的了解:1.配置分为连接池和pgbouncer两个部分[database]\[pgbouncer ].2.一条记录对应创建一个连接池,连 ...
- (二) ffmpeg filter学习--混音实现
Audio 混音实现 从FFMPEG原生代码doc/examples/filtering_audio.c修改而来. ffmpeg版本信息 ffmpeg version N-82997-g557c0df ...