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等
-- Modal：数据模型，包括一些字段等，通常与数据库中的字段、实体模型中的字段对应。
-- Proxy：数据交互的代理，包括MemoryProxy、AjaxProxy、DirectProxy等
2.1 显示绑定了所有数据的Store
<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>
<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>
后台C#代码:
private 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 };
{
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();
}
storeUserInfo.DataBind();
}
2.2 使用Store实现远程获取数据,远程排序,分页等功能
<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="6" >
<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>
<Proxy>
<ext:AjaxProxy Url="StoreHandler.ashx"> //通过一般处理程序来获取数据
<ActionMethods Read="GET"></ActionMethods>
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</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>
<Items>
<ext:DataView runat="server" ID="myDataView" ItemSelector=".info">
<Store>
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" >
<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>
<Proxy>
<ext:AjaxProxy Url="StoreHandler.ashx"> //通过一般处理程序来获取数据
<ActionMethods Read="GET"></ActionMethods>
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</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>
后台C#代码(StoreHandler.ashx):
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
{
context.Response.ContentType = "application/json";
StoreRequestParameters requestParams = new StoreRequestParameters(context);
int start = requestParams.Start; //从第几行开始获取数据记录
int limit = requestParams.Limit; //每次获取的数据行数
int start = requestParams.Start; //从第几行开始获取数据记录
int limit = requestParams.Limit; //每次获取的数据行数
DataSorter[] sorter = requestParams.Sort; //排序条件集合
DataFilter[] filter = requestParams.Filter; //过滤条件集合
DataFilter[] filter = requestParams.Filter; //过滤条件集合
Paging<UserInfo> employees = GetPageData(start, limit, filter, sorter);
context.Response.Write(JSON.Serialize(employees)); //将数据集合转换为JSON数据返回到客户端
}
}
private Paging<UserInfo> GetPageData(int start, int limit, DataFilter[] filter, DataSorter[] sorter)
{
List<UserInfo> userInfoList = UserInfo.GetData();
{
List<UserInfo> userInfoList = UserInfo.GetData();
Paging<UserInfo> result = new Paging<UserInfo>();
result.TotalRecords = userInfoList.Count; //TotalRecords : 数据总行数,用于客户端分页(生成页码)
result.Data = userInfoList.Skip(start).Take(limit).ToList(); //Data: IEnumerable<T> 类型的数据集合
result.Data = userInfoList.Skip(start).Take(limit).ToList(); //Data: IEnumerable<T> 类型的数据集合
return result;
}
}