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 用法详解的更多相关文章

  1. Linux防火墙iptables学习笔记(三)iptables命令详解和举例[转载]

     Linux防火墙iptables学习笔记(三)iptables命令详解和举例 2008-10-16 23:45:46 转载 网上看到这个配置讲解得还比较易懂,就转过来了,大家一起看下,希望对您工作能 ...

  2. (转)live555学习笔记10-h264 RTP传输详解(2)

    参考: 1,live555学习笔记10-h264 RTP传输详解(2) http://blog.csdn.net/niu_gao/article/details/6936108 2,H264 sps ...

  3. SNMP学习笔记之SNMP 原理与实战详解

    原文地址:http://freeloda.blog.51cto.com/2033581/1306743 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法 ...

  4. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  5. Java8学习笔记(五)--Stream API详解[转]

    为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...

  6. JQuery学习笔记系列(一)----选择器详解

    笔者好长时间没有更新过博客园的笔记了,一部分原因是去年刚刚开始工作一段时间忙碌的加班,体会了一种每天加班到凌晨的充实感,之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯,现在重新拾起来. 借用古人的一 ...

  7. 【Java学习笔记之三十四】超详解Java多线程基础

    前言 多线程并发编程是Java编程中重要的一块内容,也是面试重点覆盖区域,所以学好多线程并发编程对我们来说极其重要,下面跟我一起开启本次的学习之旅吧. 正文 线程与进程 1 线程:进程中负责程序执行的 ...

  8. Redis 学习笔记2:redis.conf配置文件详解

    Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 参数说明: 参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通 ...

  9. HTML5学习笔记(九):选择器详解

    在前面的笔记中我们已经接触过几种常见的选择器,本笔记我们将深入了解CSS的选择器. 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器.在 W3C 标准中,元素选 ...

随机推荐

  1. Linux菜鸟级重点

    这是本人自学Linux所做的笔记,以及实现一些功能作的总结.乐意与各位喜欢linux的朋友交流学习,共同进步.这篇文章只是简单介绍一些linux比较常用的或者说是最基础的也是最重要的知识,有些在模块后 ...

  2. 解决Visual Studio 调试时候不能直接访问.json后缀文件的问题

    Web.config中作如下配置: <system.webServer> <staticContent> <mimeMap fileExtension=".js ...

  3. git log 查看 提交历史

    在提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,可以使用 Git log 命令查看. 接下来的例子会用我专门用于演示的 simplegit 项目,运行下面的命令获取该项目源代码: git ...

  4. 《Java程序设计》第8周学习总结

    学号20145220 <Java程序设计>第8周学习总结 教材学习内容总结 15.1.1日志API简介 java.util.logging包提供了日志功能相关类与接口,不必额外配置日志组件 ...

  5. jquery nicescroll 配置参数

    jQuery滚动条插件兼容ie6+.手机.ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollI ...

  6. Zookeeper运维经验

    转自:http://www.juvenxu.com/2015/03/20/experiences-on-zookeeper-ops/ ZooKeeper 是分布式环境下非常重要的一个中间件,可以完成动 ...

  7. Oracle EBS使用adpatch工具打patch过程【Z】

    Oracle EBS使用adpatch工具打patch过程 从Metalink下载补丁 登陆到Metalink(https://support.oracle.com),Oracle内部用户可以使用AR ...

  8. web.xml在listener作用与用途

    一.WebContextLoaderListener 监听类 它能捕捉到server的启动和停止,在启动和停止触发里面的方法做对应的操作! 它必须在web.xml 中配置才干使用,是配置监听类的 二. ...

  9. 为什么用bower 安装bootstrap而不用npm来安装?

    NPM(node package manager),通常称为node包管理器.顾名思义,它的主要功能就是管理node包,包括:安装.卸载.更新.查看.搜索.发布等. npm的背后,是基于couchdb ...

  10. CentOS7.3上如何安装Apache/2.4.34

    1)卸载系统自带的httpd Centos可能自带了httpd,但是版本可能会较低,执行下面的命令检测是否已经安装了httpd rpm -qa | grep httpd 如果检测已经安装了二进制的ht ...