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. 《数据通信与网络》笔记--QoS

    QoS(Quality of Service)服务质量,是网络的一种安全机制, 是用来解决网络延迟和阻塞等问题的一种技术. 1.QoS参数 衡量服务质量QoS的参数主要包括: 端到端延迟(Delay) ...

  2. php做EXCEL数据导出导入开发的一些小问题

    前两天刚刚做开发CRM系统项目,在做要做EXCEL导出导入功能,因为以前做.NET开发用的是NPOI,但可是没找到PHP版本的,所以就网搜找了个国外的开源PHPEXCEL , 一开始只是做了简单的导入 ...

  3. [二]Json-lib的用法

    1.Json字符串 PrintWriter out=response.getWriter(); // String resultJson="{\"name\":\&quo ...

  4. React-native 中的触摸响应功能

    我们在做APP的时候,与桌面应用系统不同的是触摸响应. web页面对触摸响应的支持和原生的APP有着很大的差异. 基本用法 componentWillMount: function() { this. ...

  5. thinkphp的目录结构

    ├─ThinkPHP.php 框架入口文件 ├─Common 框架公共文件 ├─Conf 框架配置文件 ├─Extend 框架扩展目录 ├─Lang 核心语言包目录 ├─Lib 核心类库目录 │ ├─ ...

  6. Moebius实现Sqlserver集群~介绍篇

    今年是一个不平凡的一年,接触到了很多新艳的,让人兴奋的东西,虽然自己的牙掉了两颗,但感觉自己又年青了两岁,哈哈!进入正题,今年公司开始启用数据库集群,对于Sqlserver来说,实现方式并不是很多,一 ...

  7. cocos2dx中android下动态更新.so文件

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037595.html  因为没用lua脚本写游戏,所以每次发布出去后,发现在bug,需要 ...

  8. MySQL5日期类型DATETIME和TIMESTAMP相关问题详解

    MySQL5日期类型DATETIME和TIMESTAMP相关问题详解 MySQL5的日期类型有三种:DATETIME.DATE和TIMESTAMP,除了DATE用来表示一个不带时分秒的是日期,另外两个 ...

  9. 函数中的$input

    $input 在此属于一个特殊变量,一般在函数中用于接收输入 function FindWindowsFolder { $input | where-object {$_.Name -eq " ...

  10. 教你如何选择Android游戏引擎

    我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...