之前的七篇文章都是介绍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中使用数据的更多相关文章

  1. Python学习笔记之从文件中读取数据

    10-1 Python 学习笔记:在文本编辑器中新建一个文件,写几句话来总结一下你至此学到的Python 知识,其中每一行都以“In Python you can”打头.将这个文件命名为learnin ...

  2. 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

  3. Ext.Net学习笔记10:Ext.Net ComboBox用法

    ComboBox是最常用的控件之一,它与HTML中的Select控件很像,但可以进行多选.自定义显示格式.分页等. ComboBox用法 <ext:ComboBox runat="se ...

  4. 【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...

  5. 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  6. 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  7. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  8. 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  9. Ext.Net学习笔记22:Ext.Net Tree 用法详解

    Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...

随机推荐

  1. 配置Memcache服务器并实现主从复制功能(repcached)(转)

    1.repcached介绍repcached 是日本人开发的实现memcached复制功能,它是一个单 master单 slave的方案,但它的 master/slave都是可读写的,而且可以相互同步 ...

  2. as3+java+mysql(mybatis) 数据自动工具(二)

    AutoScript 项目结构如下图 ---AutoScript.java 为程序入口 ---com.autoscript.object 同步 as3 和 java 的数据类 ---com.autos ...

  3. Mac osx 下配置ANT

    一般安装过程如下: 1:sudo sh (会提示你输入当前用户的密码) 2:cp apache-ant.1.8.2-bin.zip /usr/local 3:cd /usr/local 4:unzip ...

  4. 【原】Scala学习资料

    Scala是基于JVM的一种通用函数式也是面向对象编程语言,能和Java.C#等主流的编程语言无缝融合. 下面给大家推荐一些Scala的学习资料,序号靠前的重要性比较高. 1.Scala初学指南 (1 ...

  5. 【CSS3】Advanced8:CSS Backgrounds: Multiples, Size, and Origin

    1.Multiples,Size,and Origin eg:background-image:url(bg.png),url(bullet.png) 0 50% no-repeat,url(arro ...

  6. 【Java基础】用LinkedList实现一个简单栈的功能

    栈的基本功能 栈的最基本功能是保障后进先出,然后在此基础上可以对在栈中的对象进行弹入弹出,此外,在弹出时,如果栈为空,则会报错,所以还需要提供获取当前栈大小的方法. 构造存储对象Student /** ...

  7. HW3.23

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  8. suse安装软件命令

    zypper se xxxxx 是搜索软件包 zypper in xxxxx 跟apt-get install xxxx等价 zypper rm xxxx 删除 zypper up xxxx 更新软件

  9. Java 线程池架构原理和源码解析(ThreadPoolExecutor)

    在前面介绍JUC的文章中,提到了关于线程池Execotors的创建介绍,在文章:<java之JUC系列-外部Tools>中第一部分有详细的说明,请参阅: 文章中其实说明了外部的使用方式,但 ...

  10. PC问题-使用BAT方法设置IP地址

    ::------以下为批处理文件内容---- @echo off ::set slection1= set/p slection1=请输入IP地址: netsh interface ip set ad ...