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. A Tour of Go Exercise: HTTP Handlers

    Implement the following types and define ServeHTTP methods on them. Register them to handle specific ...

  2. 如何使用IAR仿真环境查看CPU类型字长？

    在此操作之前假设已有一个现成的cpu代码工程如:IAR for Stm8的Demo工程. 点软件仿真进入调试状态 单击菜单栏View –> Watch –> Watch 在新弹出来的Wat ...

  3. Linux--用SecureCRT来上传和下载文件

    SecureCRT下的文件传输协议有以下几种:ASCII.Xmodem.Ymodem.Zmodem ASCII:这是最快的传输协议,但只能传送文本文件. Xmodem:这种古老的传输协议速度较慢,但由 ...

  4. VB操作Excel

    在工程中添加引用:Microsoft Office 9.0 Object Library                    Microsoft Excel 9.0 Object Library   ...

  5. @@IDENTITY与SCOPE_IDENTITY的用法

    SCOPE_IDENTITY   和   @@IDENTITY   的作用都是取得返回在当前会话中的任何表内所生成的最后一个标识值,简单的说就是在执行一条插入语句之后使用@@IDENTITY的全局变量 ...

  6. Jsp的三、七、九

    1.jsp的三个编译指令 <%page %> <%taglib %> <%include %> 2.jsp的七个动作指令 forward param include ...

  7. ecshop在线手册前言及程序结构

    该在线手册是有模版堂转载而来:仅供参考 一.前言 为什么我们ecshop模板堂要重制ecshop在线手册呢?因为目前网上的一些教程有些是比较老的,有些是不全面的,官方的手册也已经很久没有更 新,很多刚 ...

  8. DRM加密技术是怎么一回事

    有时我们在播放从网上下载的影视文件时会要求输入用户许可证,否则就不能正常播放,听说是用了一种DRM技术,请简单介绍一下. 答:通常这是利用了多媒体DRM加密技术保护版权(DRM是数字权限管理技术的缩写 ...

  9. 通过存储过程进行分页查询的SQL示例

    --创建人:zengfanlong --创建时间:-- :: --说明:根据公司简写代码获取当前待同步的气瓶档案数据(分页获取) ALTER PROCEDURE [UP_GasBottles_GetS ...

  10. 开发腾讯移动游戏平台SDK ios版Ane扩展 总结

    本文记录了在开发 腾讯移动游戏平台SDK(MSDK) ios版Ane扩展 过程中所遇到的问题 文中非常多问题都是基础的问题.对object c和xcode配置了解不深入导致的.(没办法,开发ane的程 ...