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中使用数据

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。