之前的七篇文章都是介绍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. bootstrap -- 一个标签中，同时有 col-xs , col-sm , col-md , col-lg

    .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...

  2. 【原】CAVLC的个人理解

    4x4数据块经过预测.变换.量化后,非零系数主要集中在低频部分,而高频部分大部分是零.数据经过zig-zag扫描后,从左->右(低频->高频),DC系数附近的系数非常大,而高频的非零系数大 ...

  3. bzoj 1975 [Sdoi2010]魔法猪学院（k短路）

    题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元素与 ...

  4. Spark Pipe使用方法（外部程序调用方法）

    写在前面: 1.我们使用的是Hadoop2.2.0,Spark 1.0. 2.这里使用的样例是经典的求pai程序来演示这个开发过程. 3.我们暂时使用java程序来开发,按照需要后面改用scala来开 ...

  5. HDU3466-Proud Merchants（01背包变形）

    需要排序的01背包. 这种题排序时只需要考虑两个怎么排,重载小于号就可以了. 需要注意的是,如果一个物品你想先放进背包里,那么你排序是要放到后面!01背包的放置顺序的倒着的! 看到别人的博客都只是比较 ...

  6. 数据库概述、mysql-5.7.11-winx64.zip 的下载、安装、配置和使用（windows里安装）图文详解

    本博文的主要内容有 .数据库的概述 .mysql-5.7.11-winx64.zip 的下载    .mysql-5.7.11-winx64.zip 的安装 .mysql-5.7.11-winx64. ...

  7. [struts2]struts标签遍历map[转]

    转至:http://hanxin0311.iteye.com/blog/1745792 private Map<String, String> strMap = new HashMap&l ...

  8. 383. Container With Most Water

    最后更新 一刷. 双指针夹逼. 容器的高度受限于较小的边,夹的时候底在变小,所以移动较大的边没有意义,最终高度还是小的那边:只能尝试移动小的那个边. public class Solution { p ...

  9. twitter的snowflake算法(C#版本)

    转自:http://blog.csdn.net/kinwyb/article/details/50238505 使用twitter的snowflake算法生成唯一ID. 在分布式系统中,需要生成全局U ...

  10. AngularJS开发下一代Web应用笔记（一）

    一.写在最前 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等. 现在网上JS框架茫茫多,真 ...