Ext.Net学习笔记08：Ext.Net中使用数据
之前的七篇文章都是介绍Ext.Net较为基础的东西，今天的这一篇将介绍数据的一些用法，包括XTemplate绑定数据、Store（Modal、Proxy）、ComboBox的用法等。
XTemplate绑定数据
XTemplate是个模板，当我们为一个XTemplate绑定数据之后，将会按照模板的预定格式进行显示。
<ext:Window runat="server" ID="win1"Title="XTemplates用法" Width="300" Height="200">
<Tpl runat="server">
<Html>
<div class="info">
<p>姓名：{Name}</p>
<p>性别：{Gender}</p>
<p>年龄：{Age}</p>
</div>
</Html>
</Tpl>
</ext:Window>
然后我们有一个这样的实体类：
public class UserInfo
{
public string Name { get; set; }
public string Gender { get; set; }
public int Age { get; set; }
}
UserInfo类中的字段分别对应模板中字段对应。然后我们在页面加载的时候完成数据绑定：
protected void Page_Load(object sender, EventArgs e)
{
UserInfo userInfo = new UserInfo()
{
Name = "QeeFee",
Gender = "M",
Age = 30
};
win1.Data = userInfo;
}
来看看显示效果：
使用Store处理数据
Store可以理解为一个数据容器，它包含Modal和Proxy。
- Modal：数据模型，包括一些字段等，通常与数据库中的字段、实体模型中的字段对应。
- Proxy：数据交互的代理，包括MemoryProxy、AjaxProxy、DirectProxy等
接下来是一个例子，这个例子中使用了DataView来显示数据，使用Store来提供数据，这个例子仍然使用我们上面的UserInfo类。
<ext:Panel runat="server" Width="600" Height="400" AutoScroll="true">
<Items>
<ext:DataView runat="server" ID="myDataView" ItemSelector=".info">
<Store>
<ext:Store runat="server" ID="storeUserInfo" PageSize="5">
<Model>
<ext:Model runat="server" IDProperty="Name">
<Fields>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
<ext:ModelField Name="Gender" Type="String"></ext:ModelField>
<ext:ModelField Name="Age" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<div class="info">
<p>姓名：{Name}</p>
<p>性别：{Gender}</p>
<p>年龄：{Age}</p>
</div>
</tpl>
</Html>
</Tpl> </ext:DataView>
</Items>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="storeUserInfo"></ext:PagingToolbar>
</BottomBar>
</ext:Panel>
在这段代码中，我们定义了一个DataView，DataView中包含了一个Store和一个Tpl模板，在代码的最后，我们添加了分页处理，使用了PagingToolbar。我们在后台代码中为Store绑定数据：
protected void BindDataView()
{
List<UserInfo> userInfoList = new List<UserInfo>();
for (int i = 1; i <= 12; i++)
{
UserInfo userInfo = new UserInfo()
{
Name = "QeeFee" + i,
Gender = "M",
Age = 30 + i
};
userInfoList.Add(userInfo);
}
storeUserInfo.DataSource = userInfoList;
storeUserInfo.DataBind();
}
其他的一些代码：
var MyApp = {
userInfo: {
prepareData: function (data) {
data.Gender = data.Gender == "M" ? "男" : "女";
return data;
}
}
};
上面的js代码用来处理数据
.info { border: 1px solid #ccc; padding:5px; margin:5px; width:280px; float:left; background:#efefef; }
上面的css代码用来处理显示样式
OK，来看看效果吧：
注意，在这段代码中有一个坑，就是用来处理数据的那段js，莫名其妙的执行两次，还没有找到原因。
OK，以上就是这篇文章的内容，下一篇中将介绍Ext.Net Store 如何异步的获取数据、服务器分页等。
Ext.Net学习笔记08：Ext.Net中使用数据的更多相关文章
- Python学习笔记之从文件中读取数据
10-1 Python 学习笔记:在文本编辑器中新建一个文件,写几句话来总结一下你至此学到的Python 知识,其中每一行都以“In Python you can”打头.将这个文件命名为learnin ...
- 【Ext.Net学习笔记】04：Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...
- Ext.Net学习笔记10：Ext.Net ComboBox用法
ComboBox是最常用的控件之一,它与HTML中的Select控件很像,但可以进行多选.自定义显示格式.分页等. ComboBox用法 <ext:ComboBox runat="se ...
- 【Ext.Net学习笔记】01：在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
- 【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- 【Ext.Net学习笔记】06：Ext.Net GridPanel的用法（GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel）
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- 【Ext.Net学习笔记】05：Ext.Net GridPanel的用法（包含Filter、Sorter、Grouping、汇总(Summary)的用法）
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- 【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- Ext.Net学习笔记22：Ext.Net Tree 用法详解
Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...
随机推荐
- jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- wuzhicms字段的添加以及实现下载功能
1.字段的添加 发布内容--> 栏目管理--> 字段管理-->添加字段 下面根据需求进行相应的设置. 然后提交即可. 2.下载功能的实现 实例说明: 会员中心相关页面下载功能的实现 ...
- HW5.13
public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\n&qu ...
- mac编程的debug工具
Chisel是一个加强LLDB调试能力的小插件.主要特点在于辅助界面开发调试时在控制台以尽可能直观的方式查看界面的元素和情况.为我们梳理视图,控制器以及类关系层级.以及一些临时的界面调试变动进行快捷响 ...
- 问题-[ACCESS2007]怎么显示MsysObjects
office 2007设置:单击左上角图标 -> Access选项 -> 当前数据库 -> 导航 -> 导航选项 -> 勾选显示隐藏对象,显示系统对象.数据库工具选项卡 ...
- 8-14-Exercise
8-14-小练 这次是我这组出题......我出的是B.C.D[虽然本来是想出的很难......╮(╯▽╰)╭但是,没找到AC1000+同时又让我想出的难题......SO...我出的真的不难= =] ...
- canvas createRadialGradient 用法
径向渐变,就是环形的渐变了,由圆心(或者是较小的同心圆)开始向外扩散渐变的效果,听着有些抽象,往下看图一下子就明白了.线性渐变指定了起点和终点,径向渐变则指定了开始的结束园的圆心和半径.这里使用cre ...
- [置顶] 项目进阶 之 持续构建环境搭建（二）Nexus私服器
上一篇博文项目进阶 之 持续构建环境搭建(一)架构中,我们大致讲解了一下本系列所搭建环境的基本框架,这次开始我们进入真正的环境搭建实战.重点不在于搭建的环境是否成功和完善,而是在搭建过程中充分认识到每 ...
- Mybatis上路_05-使用命令行自动生成
http://my.oschina.net/vigiles/blog/125127 目录[-] 1．数据准备: 1)建库: 2)建表: 3)预设数据: 2．编写Generator执行配置文件: 3．搭 ...
- 拍照返回的bitmap太小
private void doPhoto(int requestCode) { if(!Environment.getExternalStorageState().equals(Environment ...