之前的幾篇文章都是介紹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 = "呂布", Gender = "男", Age = 24 }; 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="6"> <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 Page_Load(object sender, EventArgs e) { BindDataView(); } protected void BindDataView() { List<UserInfo> userInfoList = new List<UserInfo>(); for (int i = 1; i <= 11; i++) { UserInfo userInfo = new UserInfo() { Name = "David" + i, Gender = "男", Age = 18 + i }; userInfoList.Add(userInfo); } storeUserInfo.DataSource = userInfoList; storeUserInfo.DataBind(); }
css樣式：
.info { border: 1px solid #ccc; padding:5px; margin:5px; width:280px; float:left; background:#efefef; }
效果如下：
Ext.Net Store的用法
介紹了如何使用數據，將數據綁定在一個DataView中進行顯示，里面用到了Store，只不過那是一個直接綁定所有數據的Store，並不具備遠程獲取數據、遠程排序、分頁等功能，今天我們來看看如何實現。
使用Handler處理分頁
首先來創建一般處理程序，我命名為StoreHandler.ashx，然后它的處理過程代碼如下：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; var requestParams = new StoreRequestParameters(context); int start = requestParams.Start; int limit = requestParams.Limit; DataSorter[] sorter = requestParams.Sort; DataFilter[] filter = requestParams.Filter; Paging<UserInfo> employees = GetPageData(start, limit, filter, sorter); context.Response.Write(JSON.Serialize(employees)); }
這個方法中，我們首先使用HttpContext創建一個StoreRequestParameters對象，這個對象中包含Start、Limit、Page、Sort、Filter、Group等參數。
- Start：從第幾行開始獲取數據記錄
- Limit：獲取數據的量，一次獲取多少行數據
- Page：當前的頁碼
- Sort：排序的條件集合
- Filter：過濾的條件集合
- Group：分組的條件集合
我們在獲取到這些數據以后，通過GetPageData來取到符合條件的數據，然后創建一個Paging<T>類的實例，這個類中包含了Data和TotalRecords兩個重要的屬性
- Data：IEnumerable<T>類型的數據集合
- TotalRecords：數據總行數，用於客戶端分頁（生成頁碼）
我們的獲取數據方法的代碼如下：
public Paging<UserInfo> GetPageData(int start, int limit, DataFilter[] filter, DataSorter[] sorter) { var userInfoList = UserInfo.GetData(); Paging<UserInfo> result = new Paging<UserInfo>(); result.TotalRecords = userInfoList.Count; result.Data = userInfoList.Skip(start).Take(limit).ToList(); return result; }
Index.aspx.cs文件部分代碼：
public partial class Index : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } public class UserInfo { public string Name { get; set; } public string Gender { get; set; } public int Age { get; set; } public static List<UserInfo> GetData() { List<UserInfo> userInfoList = new List<UserInfo>(); for (int i = 1; i <= 11; i++) { UserInfo userInfo = new UserInfo() { Name = "David" + i, Gender = "男", Age = 18 + i }; userInfoList.Add(userInfo); } return userInfoList; } }
有了這個handler，我們接下來需要對Store進行改造：
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" RemoteFilter="true" RemoteSort="true"> <Model> <ext:Model ID="Model1" 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> <Proxy> <ext:AjaxProxy Url="StoreHandler.ashx"> <ActionMethods Read="GET" /> <Reader> <ext:JsonReader Root="data" /> </Reader> </ext:AjaxProxy> </Proxy> </ext:Store>
AjaxProxy的Url就是我們的Handler地址。ActionMethods是請求方式，JsonReader是reader屬性，它獲取的數據根節點是data。這里都是根據ExtJS中ajaxproxy來定義的，你可以通過看原文博主之前的文章來了解這方面的內容：ExtJS 4.2 教程-06：服務器代理（proxy） ，顯示效果和前面的一樣。
PageProxy分頁的實現
PageProxy是Ext.Net實現的一種分頁方式，它與使用handler的方式不同，PageProxy通過實現OnReadData事件來完成分頁。
這里我們直接看Store的代碼：
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" OnReadData="storeUserInfo_ReadData"> <Model> <ext:Model ID="Model1" 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> <Proxy> <ext:PageProxy></ext:PageProxy> </Proxy> </ext:Store>
然后再后台代碼中實現storeUserInfo_ReadData：
protected void storeUserInfo_ReadData(object sender, Ext.Net.StoreReadDataEventArgs e) { int start = e.Start; int limit = e.Limit; var userInfoList = UserInfo.GetData(); e.Total = userInfoList.Count; storeUserInfo.DataSource = userInfoList.Skip(start).Take(limit).ToList(); storeUserInfo.DataBind(); }
顯示效果也和之前一樣。
Ext.Net ComboBox用法
ComboBox是最常用的控件之一，它與HTML中的Select控件很像，但可以進行多選、自定義顯示格式、分頁等。
ComboBox用法
<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID"> <Store> <ext:Store runat="server" ID="storeUserInfo"> <Model> <ext:Model ID="Model1" runat="server" IDProperty="ID"> <Fields> <ext:ModelField Name="ID" Type="Int"></ext:ModelField> <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> </ext:ComboBox>
對於一個ComboBox來說，一定要制定DisplayField和ValueField，然后它包含了一個Store，這個Store我們並不陌生，之前的幾篇中都用過。
然后我們在頁面加載的時候為Store綁定上數據：
public void BindStore() { storeUserInfo.DataSource = UserInfo.GetData(); storeUserInfo.DataBind(); }
這樣一個簡單的ComboBox示例就完成了，效果如下：
ComboBox分頁
當數據量大的時候，我們當然希望能夠進行分頁顯示，這個功能ComboBox是支持的。
首先我們需要對Store進行分頁處理，前面已經介紹過，此處不再贅言。
然后我們要在ComboBox的定義中加上分頁的PageSize屬性：
<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID" PageSize="5">
再次刷新我們的頁面，你會發現ComboBox已經支持分頁了,效果如下：
ComboBox自定義顯示
ComboBox支持通過XTemplate來自定義每一項的顯示。
<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID" MatchFieldWidth="false" PageSize="5"> <Store> ... </Store> <ListConfig> <ItemTpl runat="server"> <Html> <div> <b>{Name}</b><br /> <span>年齡：{Age}</span><br /> <span>性別：{Gender}</span> </div> </Html> </ItemTpl> </ListConfig> </ext:ComboBox>
效果如下：
來源：