Ext.NET 基础学习笔记05 (数据绑定/数据展示)

2022-10-16 22:14:52

1.XTemplate绑定数据

<ext:Window runat="server" ID="win1" Title="XTemplaters用法" 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>

后台C#代码:

UserInfo userInfo = new UserInfo() { Name = "Jack", Gender = "M", Age = 30 };

win1.Data = userInfo;

2.使用Store处理数据

Store可以理解为一个数据容器，它包含Modal和Proxy。
　-- Modal：数据模型，包括一些字段等，通常与数据库中的字段、实体模型中的字段对应。
　-- Proxy：数据交互的代理，包括MemoryProxy、AjaxProxy、DirectProxy等

<ext:Panel runat="server" Width="600" Height="400" AutoScroll="true">
            <Items>
                <ext:DataView runat="server" ID="myDataView" ItemSelector=".info">　　　　　　　　　　　　　　//DataView用于显示数据
                    <Store>
                        <ext:Store runat="server" ID="storeUserInfo" PageSize="5">　　　　　　　　　　　　　　　　//Store用于提供数据
                            <Model>
                                <ext:Model runat="server" IDProperty="Name">
                                    <Fields>
                                        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                                    </Fields>
                                     <Fields>
                                        <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                                    </Fields>
                                     <Fields>
                                        <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>

Ext.NET 基础学习笔记05 (数据绑定/数据展示)

码农公寓

相关文章