Ext.Net学习笔记16：Ext.Net GridPanel 折叠/展开行

Ext.Net GridPanel的行支持折叠/展开功能，这个功能个人觉得还说很有用处的，尤其是数据中包含图片等内容的时候。

下面来看看效果：

使用行折叠/展开功能之后，在Ext.Net GridPanel的行头会出现一个展开图标，点击图标以后能够将这一行展开：

使用XTemplate实现行折叠/展开

这是最简单的一种实现，我们只需要在GridPanel的定义中加入下面的代码：

<Plugins>

    <ext:RowExpander runat="server">

        <Template runat="server">

            <Html>

                <b>姓名：</b><span>{Name}</span>

                <br></br>

                <b>年龄：</b><span>{Age}</span>

            </Html>

        </Template>

    </ext:RowExpander>

</Plugins>

这里面使用到了Tpl，这里面包含了我们展开后要显示的内容，数据就是当前行的数据。

从服务器获取展开时显示的数据

通常情况下我们不会一次将所有数据都获取到客户端，而是通过异步加载的方式按需获取要显示的数据

在Ext.Net GridPanel中，如果要在展开的时候从服务器获取数据，我们需要完成如下代码：

第一步：为了配合演示，先为我们的Model添加一个Time属性，我们通过异步的方式去服务器端获取当前时间：

<ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">

    <Fields>

        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>

        <ext:ModelField Name="Name" Type="String"></ext:ModelField>

        <ext:ModelField Name="Gender" Type="String"></ext:ModelField>

        <ext:ModelField Name="Age" Type="Int"></ext:ModelField>

        <ext:ModelField Name="Time" Type="String"></ext:ModelField>

    </Fields>

</ext:Model>

第二步：修改我们的RowExpander定义，我们需要将Template定义在Bin下，并为RowExpander添加事件：

<Bin>

    <ext:XTemplate runat="server" ID="tplDetail">

        <Html>

            <b>姓名：</b><span>{Name}</span>

            <br></br>

            <b>年龄：</b><span>{Age}</span>

            <br></br>

            <b>时间：</b><span>{Time}</span>

        </Html>

    </ext:XTemplate>

</Bin>

<Plugins>

    <ext:RowExpander runat="server">

        <Listeners>

            <Expand Handler="MyApp.onExpand(record.data, #{tplDetail}, #{ctDetail})"></Expand>

        </Listeners>

        <Component>

            <ext:Container runat="server" ID="ctDetail" />

        </Component>

    </ext:RowExpander>

</Plugins>

第三步：定义服务器端的DirectMethod方法：

[DirectMethod]

public static string GetDetail(string name)

{

    return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");

}

第四步：定义客户端的Expand方法：

var MyApp = {

    onExpand: function (data, template, container) {

        if (data.Time) return;

        App.direct.GetDetail(data.Name, {

                success: function (time) {

                    data.Time = time;

                    template.overwrite(container.getEl(), data);

                },

                eventMask : { showMask : true }

            }

        );

    }

};

通过上面这几个步骤，我们就完成了异步获取并显示的功能。

Ext.Net学习笔记16：Ext.Net GridPanel 折叠/展开行的更多相关文章

  1. 【Ext.Net学习笔记】06：Ext.Net GridPanel的用法（GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel）

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  2. 【Ext.Net学习笔记】05：Ext.Net GridPanel的用法（包含Filter、Sorter、Grouping、汇总(Summary)的用法）

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  3. Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel

    Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只 ...

  4. Ext.Net学习笔记17：Ext.Net GridPanel Selection

    Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...

  5. Ext.Net学习笔记15：Ext.Net GridPanel 汇总(Summary)用法

    Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法 Summary的用法和Group一样简单,分为两步: 启用Summary功能 在Feature标签内,添加如 ...

  6. Ext.Net学习笔记12：Ext.Net GridPanel Filter用法

    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...

  7. Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法

    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...

  8. Ext.Net学习笔记14：Ext.Net GridPanel Grouping用法

    Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法 Ext.Net GridPanel可以进行Group操作,例如: 如何启用Grouping功能呢?只需要在Grid ...

  9. Ext.Net学习笔记11：Ext.Net GridPanel的用法

    Ext.Net学习笔记11:Ext.Net GridPanel的用法 GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: < ...

随机推荐

  1. 【Stage3D学习笔记续】真正的3D世界（四）：空间大战雏形

    前面几个星期抽空用Starling做了一个打飞机的小游戏(所以没有接着看书了),准备面试时用的,结果面试还是没过%>_<%...这个游戏打算过几天全部开源了 那么接下来打算这周把<S ...

  2. iOS开发Block的使用

    Block 是从 iOS4引入的,在日常开发中,会经常用到Block.特别是在多线程中,Block的用处更广泛.而且,Block不仅可以接收参数,其本身也可以作为参数,因此,Block的功能非常强大. ...

  3. 常用SQL代码段

    代码使用时须测试. --聚合函数 use pubs go select avg(distinct price) --算平均数 from titles where type='business' go ...

  4. 流弊博客集锦(updating)

    1.http://ifeve.com/ 2.淘宝的 code project http://code.taobao.org/ http://blog.csdn.net/tenfyguo/article ...

  5. Struts的类型转换

    struts中jsp提交的数据,struts会自动转换为action中的属性类型: 对于基本的数据类型以及日期类型会自动转换: 就像前面那一篇博客的代码封装一样,会把字符串类型传过来的数据转化为相应的 ...

  6. Ubuntu下非常给力的下载工具

    Windows下的下载工具--迅雷,之所以下载速度快,乃是它能搜索资源.为己所用,而不是仅仅从原始地址这单一资源处下载. Ubuntu下也有类似的工具,那就是aira2. aira2是一个命令行下载工 ...

  7. SCO连接SCOM报警

    当SCOM中出现红色警报时,在目标计算机上运行一个程序: 1.新建Runbook,添加一个Monitor Alert 2.设置Monitor Alert属性,选择connection,设置警报过滤条件 ...

  8. HDU 3452 Bonsai(网络流之最小割）

    题目地址:HDU 3452 最小割水题. 源点为根节点.再另设一汇点,汇点与叶子连边. 对叶子结点的推断是看度数是否为1. 代码例如以下: #include <iostream> #inc ...

  9. 3、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——用户登录

    近期因为项目赶着上线,一直没时间接着写博客,今天最终空出了时间.声名:我不是专业美工,所以界面问题,希望大家不要拍砖.登录界面例如以下: 在ASP.NET MVC中,要新增一个功能,我们首先要加入一个 ...

  10. 在WWDC 2014上，没提到的iOS 8 八大新特性

    今天凌晨1点,36氪如约为大家研磨出WWDC 2014全程 "贴身直播"(我不得不佩服牺牲个人时间,熬夜为大家奉上好文的5位氪星人:JasonZheng.WANGJINGYU.pa ...