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. Android实例-操作摄像头(XE8+小米2)

    结果: 1.同样是照相,自己的程序设置为高质量时刷新慢,而小米手机的相机那真心反映快呀. 2.就算我设置为最高质量,可相片也没有小米手机的相片大.我最大是2000*1000,而小米可以做到3000*2 ...

  2. hdoj 1257 最少拦截系统

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  3. hdoj 2682 Tree

    Tree Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATI

    转载:http://my.oschina.net/u/242764/blog/375909 当我们安装好Genymotion后,把Android运用部署到上面调试时,console控制台会报错:Ins ...

  5. 刚制作完的SAP Sybase ASE15.7 [Sybase Central] 客户端

    支持32位和64位windows系统．无需其它任何包．原汁原味． 支持的数据库版本,应该从15.0开始都支持． 下载地址: http://download.csdn.net/detail/iihero ...

  6. 关系数据库 范式（NF： Normal Form） 说明

    关系数据库 范式(NF: Normal Form) 说明 数据库电话insertdelete存储oracle   目录(?)[+]   一.范式概述(NF:NormalForm) 数据库的设计范式是数 ...

  7. Ubuntu12.10硬盘安装

    今天介绍如下如何在Win7环境下从硬盘安装Ubuntu(我使用的版本是12.10). 1.下载Ubuntu ISO镜像文件ubuntu-12.10-desktop-i386.iso. 2.使用压缩软件 ...

  8. paip.提升性能---- 网站并发数的总结.txt

    paip.提升性能---- 网站并发数的总结.txt 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.n ...

  9. python无私有成员变量

    python解释器将__init__函数里的__z变量转成 _classname__z了,明确规则后外部依旧能够通过实力对象来訪问. In [1]: class aa: ...: def __init ...

  10. 在centos上使用yum安装redis及php扩展php-redis

    .wget http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm rpm -ivh epel-rele ...