Ext.Net学习笔记08：Ext.Net中使用数据

2022-01-15 05:25:32

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

Ext.Net学习笔记08：Ext.Net中使用数据

码农公寓

XTemplate绑定数据

使用Store处理数据

相关文章