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 ...
随机推荐
- IOS-下载动画
就2小时教会你抽丝剥茧CAAnimation核心动画之精美的下载动画 header 设计灵感 设计此效果的作者 Nick; images 开始之前你需要了解的 先上一张CAAnimation层次图: ...
- WKWebView的新特性与使用
在WWDC2014中,苹果推出了最新的iOS8系统,其中也伴随着很多控件的更新与升级.其中全新的WebKit库让人很是兴奋.本文也将讲解到WebKit中更新的WKWebView控件的新特性与使用方法, ...
- JavaScript---事件监听
JavaScript的事件监听是通过addEventListener()来实现的 它算是事件绑定的第二种方式. 他的特别之处在于这种绑定事件的方法不会被同名事件覆盖. 看具体的demo <!DO ...
- navicat for mysql 导入SQL Server显示中文乱码解决办法
解决方法是在navicat里右击一个连接,选择连接属性,切换到高级选项卡,去掉“使用mysql字符集”前的对勾,在编码里选择utf-8
- [C#]委托实例分析(附源码)
一直都听说C#中的委托与事件非常重要,都没有什么切身的体会,而这次通过做一个WinForm二次开发的项目才真正感觉到了委托与事件的犀利之处. 1.C#中的事件和委托的作用? 事件代表一个组件能够被关注 ...
- 自研发RPC调用框架
自主研发设计RPC远程调用框架,实现服务自动注册,服务发现,远程RPC调用,后续实现服务负载均衡 主要包括:客户端服务,服务端,服务发现,服务注册 github地址:https://github.co ...
- EFM32 ARM+ KEIl program
1Hardware connection When using the EFM32 starter kit to make a JLINK burn, you must connect the con ...
- (转)Hive自定义UDAF详解
UDAF有两种,第一种是比较简单的形式,利用抽象类UDAF和UDAFEvaluator,暂不做讨论.主要说一下第二种形式,利用接口GenericUDAFResolver2(或者抽象类AbstractG ...
- 《Tomcat内核设计剖析》勘误表
<Tomcat内核设计剖析>勘误表 书中第95页图request部分印成了reqiest. 书中第311页两个tomcat3,其中一个应为tomcat4. 书中第5页URL应为URI. 书 ...
- Nodejs操作MongoDB数据库示例
//mongodb_demo.js /** cnpm install mongodb */ var MongoClient = require('mongodb').MongoClient; var ...