zoukankan      html  css  js  c++  java
  • 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;
    }

    来看看显示效果:

    image

    使用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,来看看效果吧:

    image

    注意,在这段代码中有一个坑,就是用来处理数据的那段js,莫名其妙的执行两次,还没有找到原因。

    OK,以上就是这篇文章的内容,下一篇中将介绍Ext.Net Store 如何异步的获取数据、服务器分页等。

  • 相关阅读:
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    Python for Data Science
    软件工程实践总结
  • 原文地址:https://www.cnblogs.com/dwuge/p/5261322.html
Copyright © 2011-2022 走看看