Ext.Net學習筆記09：Ext.Net Store的用法

我們在第8篇筆記中介紹了如何使用數據，將數據綁定在一個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;
}

有了這個handler，我們接下來需要對Store進行改造：

<ext:Store runat="server" ID="storeUserInfo" PageSize="5" 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="5" 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();
}

排序和過濾

在上面我們已經提到過，服務器端可以獲得Sort和Filter參數，然后通過處理Sort和Filter來得到相應的數據。

例如我的Filter代碼：

var userInfoList = UserInfo.GetData();
if (filter != null && filter.Count() > 0)
{
    foreach (var item in filter)
    {
        userInfoList = userInfoList.FindAll(m => m.Name == item.Value);
    }
}

這樣可以過濾每一個都匹配的選項。Sort的代碼比較復雜，目前還沒有完成一個比較通用的，垃圾代碼就不貼出來禍害大眾了。