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. Java反射机制练习(增强可扩展性)

    模拟电脑的运行,主板运行,对外提供接口PCI,网卡,声卡等设备实现该接口可以完成指定动作,练习中用到的类Mainboard,NetCard,SoundCard,接口PCI 主板: package Re ...

  2. iOS 开发 上传代码至github(转)

    一.注册github账号   首先需要注册一个github账号,注册地址:https://github.com 接着会来到这 然后会收到一封github发的邮件,进入邮箱验证 二.创建个人的githu ...

  3. (原创)vagrant up 异常报错,出现 There was an error while executing `VBoxManage` 的解决方法

    最近在使用 vagrant homestead 时,不小心在虚拟机上使用了 exit 命令退出虚拟机,导致再使用 vagrant up 时出现以下错误: Bringing machine 'larav ...

  4. Applied Functional Analysis(Applications to Mathematical Physics ) E.Zeidler

     Applied Functional Analysis(Applications to Mathematical Physics )   E.Zeidler More: QQ565055403

  5. HBase in 2013

    2013年马上就要过去了,总结下这一年HBase在这么一年中发生的主要变化.影响最大的事件就是HBase 0.96的发布,代码结构已经按照模块化release了,而且提供了许多大家迫切需求的特点.这些 ...

  6. cocos2dx windows phone平台下CCLabelTTF自己主动换行的实现(2)

    前几天发过一篇文章说怎样实现wp8下的CCLabelTTF怎样自己主动换行,后来发现果如预料的那般.效果非常不好.主要是非等宽字体的情况下看着非常糟心.因此再改动了一版.效果要好非常多了. 详细实现事 ...

  7. 安装Windows SDK7.1时发生的一个错误(附解决办法)

    A problem occurred while installing selected Windows SDK components. Installation of the "Micro ...

  8. SQL Server查询所有用户表

    select name from sysobjects where xtype='u' order by name

  9. Templates

    Templates Templates are the site's markup, where images and js, css files are located as well as the ...

  10. Java基础知识强化之网络编程笔记17:Android网络通信之 使用Http的Post方式读取网络数据(基于HTTP通信技术)

    使用Http的Post方式与网络交互通信.Post方式需要向网络传输一部分数据,同时具有输入流和输出流. 详见:Android(java)学习笔记210:采用post请求提交数据到服务器(qq登录案例 ...