Ext.Net学习笔记22：Ext.Net Tree 用法详解
上面的图片是一个简单的树，使用Ext.Net来创建这样的树结构非常简单，代码如下：
<ext:TreePanel runat="server">
<Root>
<ext:Node Text="根节点" Expanded="true">
<Children>
<ext:Node Text="节点1" Expanded="true">
<Children>
<ext:Node Text="节点11" Leaf="true"></ext:Node>
<ext:Node Text="节点12" Leaf="true"></ext:Node>
</Children>
</ext:Node>
<ext:Node Text="节点2" Leaf="true"></ext:Node>
<ext:Node Text="节点3" Leaf="true"></ext:Node>
<ext:Node Text="节点4" Leaf="true"></ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
这是一个使用标记来创建的树，我们还可以使用服务器端代码来创建，代码如下：
private void createTree()
{
TreePanel tree = new TreePanel();
tree.Root.Add(new Node() { Text = "根节点", Expanded = true });
tree.Root[0].Children.Add(new Node() { Text = "节点1", Expanded = true });
tree.Root[0].Children[0].Children.Add(new Node() { Text = "节点11", Leaf = true });
tree.Root[0].Children[0].Children.Add(new Node() { Text = "节点12", Leaf = true });
tree.Root[0].Children.Add(new Node() { Text = "节点2", Leaf = true });
tree.Root[0].Children.Add(new Node() { Text = "节点3", Leaf = true });
tree.Root[0].Children.Add(new Node() { Text = "节点4", Leaf = true }); winTreeContainer.Add(tree);
}
异步加载树节点
在上面的代码中，我们都是一次性加载了所有节点，虽然在开发过程中比较方便，但与异步加载来说更加的耗资源，尤其是当树节点比较多的时候。
接下来让我们来构建一个异步加载的树。
<ext:TreePanel runat="server">
<Root>
<ext:Node Text="根节点" NodeID="root" Expanded="false">
</ext:Node>
</Root>
<Store>
<ext:TreeStore runat="server">
<Proxy>
<ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
</ext:TreePanel>
在树的定义中南，我们为根节点添加了NodeID，然后为Tree添加了TreeStore，TreeStore通过ajax代理获取数据，获取数据的url为tree-handler.ashx处理程序，我们的处理程序代码为：
public void ProcessRequest(HttpContext context)
{
//得到node id
string nodeId = context.Request["node"]; //根据node id 进行处理
NodeCollection nodes = new NodeCollection();
nodes.Add(new Node() { Text = "节点1" });
nodes.Add(new Node() { Text = "节点2" });
nodes.Add(new Node() { Text = "节点3" });
nodes.Add(new Node() { Text = "节点4" }); string responseString = nodes.ToJson();
context.Response.Write(responseString);
context.Response.End();
}
在处理方法中，最主要的是第一句，从请求中得到node id，拿到node id之后，我们可以根据node id进行子节点的获取操作，我们的代码中是为了进行演示，所以并没有获取相应子节点的操作。
如果是在MVC中，我们可以使用StoreResult来作为Action的数据返回类型。
树节点的自定义属性
通常情况下，树节点所包含的的信息并不是我们完整的数据，我们需要添加一些自定义的属性，Ext.Net为我们提供这种功能：
第一步，我们需要在TreeStore中添加一个Model，这个Model中的字段就是我们自定义的属性。
<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="CreateUser" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
第二步，在生成节点的时候为我们自定义属性赋值。
public void ProcessRequest(HttpContext context)
{
//得到node id
string nodeId = context.Request["node"]; //根据node id 进行处理
NodeCollection nodes = new NodeCollection();
var node = new Node() { Text = "节点1" };
node.CustomAttributes.Add(new ConfigItem("CreateUser", "qeefee")); nodes.Add(node); string responseString = nodes.ToJson();
context.Response.Write(responseString);
context.Response.End();
}
第三步，在前台代码中使用自定义属性
我们在树的底部添加一个panel，用来显示自定义的星系，然后添加一个事件，在节点选中的时候来更新panel的显示
<DockedItems>
<ext:Panel runat="server" Dock="Bottom" Height="30">
<Tpl>
<Html>
<p>创建人:{CreateUser}</p>
</Html>
</Tpl>
</ext:Panel>
</DockedItems>
<Listeners>
<ItemClick Handler="MyApp.showDetail.call(#{treeDynamic}, record)"></ItemClick>
</Listeners>
事件的处理方法如下：
var MyApp = {
showDetail: function (record) {
var panel = this.getDockedItems("panel[dock=bottom]")[0];
panel.update(record.data);
}
};
在跟踪事件处理过程中，我们可以看到自定义属性的值：
它是和树节点的其他属性一起保存的，所以我们在使用record的时候，还可以方便的使用树节点的其他属性。
这个示例的效果图如下：
多列树（TreeGrid）
TreeGrid的效果如下图：
类似于GridPanel，有标题、多列的样式等。
又不同于GridPanel，因为它可以像树一样显示一个展开、折叠图标。
我们来看一下这个例子的代码：
<ext:TreePanel runat="server" ID="treeGrid">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="CreateUser" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="tree-handler.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" Text="名称" DataIndex="text"></ext:TreeColumn>
<ext:Column runat="server" Text="创建人" DataIndex="CreateUser"></ext:Column>
</Columns>
</ColumnModel>
<Root>
<ext:Node Text="根节点" NodeID="root" Expanded="false">
</ext:Node>
</Root>
</ext:TreePanel>
TreePanel的Store与之前例子相同，Root的配置也与之前的例子相同，唯一不同的是TreePanel中多了一个 ColumnModel节点，这里面的配置和GridPanel的ColumnModel相同，TreeColumn列用来显示树的列，用起来很方便。
Ext.Net学习笔记22：Ext.Net Tree 用法详解的更多相关文章
-
Linux防火墙iptables学习笔记（三）iptables命令详解和举例[转载]
Linux防火墙iptables学习笔记(三)iptables命令详解和举例 2008-10-16 23:45:46 转载 网上看到这个配置讲解得还比较易懂,就转过来了,大家一起看下,希望对您工作能 ...
-
(转)live555学习笔记10－h264 RTP传输详解(2)
参考: 1,live555学习笔记10-h264 RTP传输详解(2) http://blog.csdn.net/niu_gao/article/details/6936108 2,H264 sps ...
-
SNMP学习笔记之SNMP 原理与实战详解
原文地址:http://freeloda.blog.51cto.com/2033581/1306743 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...
-
学习笔记--Grunt、安装、图文详解
学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...
-
Java8学习笔记（五）--Stream API详解[转]
为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...
-
JQuery学习笔记系列（一）----选择器详解
笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...
-
【Java学习笔记之三十四】超详解Java多线程基础
前言 多线程并发编程是Java编程中重要的一块内容,也是面试重点覆盖区域,所以学好多线程并发编程对我们来说极其重要,下面跟我一起开启本次的学习之旅吧. 正文 线程与进程 1 线程:进程中负责程序执行的 ...
-
Redis 学习笔记2：redis.conf配置文件详解
Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 参数说明: 参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通 ...
-
HTML5学习笔记（九）：选择器详解
在前面的笔记中我们已经接触过几种常见的选择器,本笔记我们将深入了解CSS的选择器. 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器.在 W3C 标准中,元素选 ...
随机推荐
-
16-01-25---Servlet复习笔记（01）
Servlet ServletAPI中有4个java包 javax.servlet 包含Servlet与Servlet容器之间契约的类和接口 javax.servlet.http 包含HT ...
-
Castle ActiveRecord 二级缓存使用 异常记录
在 本公司的 IBeamMDAA 框架下,如果是配置为本机调试时,AR的查询缓存工作正常,但如果部署到服务器上,工作不正常,二级缓存配置为使用 MemoryCahcheD 服务器,二级缓存没有能够根据 ...
-
git常用命令-基本操作
git常用命令-基本操作 1) 新增文件 新增了Test_1.java git add Test_1.java git commit –m “新增了Test_1.java” git push ...
-
light oj 1138 - Trailing Zeroes (III)【规律&;&;二分】
1138 - Trailing Zeroes (III) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: ...
-
window系统上用PHP获取本地物理IP代码
<?php $res=system("ipconfig -all"); $contents=trim(ob_get_clean()); $contents=str_repla ...
-
再好好聊聊 HTTP 里的 Cookie | 实用 HTTP
题图:by Juan Pablo Arenas 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Hea ...
-
tf.contrib.slim.data数据加载（1） reader
reader: 适用于原始数据数据形式的Tensorflow Reader 在库中parallel_reader.py是与reader相关的,它使用多个reader并行处理来提高速度,但文件中定义的类 ...
-
Jenkins-配置LDAP认证
Jenkins-配置LDAP认证 参考文档: LDAP添加用户详见我的博文 Linux分类 中的< LDAP2-创建OU和用户>博文. 1.LDAP配置 1.准备一个adminDN账号用 ...
-
About the test in development
Unit test: Specify and test one point of the contract of single method of a class. This should have ...
-
我的MQ笔记
1.安装IBM MQ 1.1.安装先决条件: (1)WebSphere Eclipse Platform V3.01 (2)为Windows域用户配置WebSphere MQ用户 1.2.安装程 ...