GridPanel是用來顯示數據的表格，與ASP.NET中的GridView類似。
GridPanel用法
直接看代碼：
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200"> <Store> <ext:Store runat="server" ID="storeUserInfo"> <Model> <ext:Model ID="UserInfoModel" 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> <ColumnModel> <Columns> <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column> <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column> <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column> <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age"></ext:NumberColumn> </Columns> </ColumnModel> </ext:GridPanel>
在這段代碼中，有兩個重要的組成：Store和ColumnModel。
Store是我們之前已經介紹過的，它相當於一個數據倉庫，可以為我們提供要顯示的數據。至於獲取數據的方式，我們這里使用最簡單的一次家在所有數據。
ColumnModel是列模型，它表示列的顯示方式。下面來看一下它的主要屬性：
- DataIndex：要顯示的字段名，與Store中ModelField的Name相對應。
- Text：列頭（標題），相當於HeaderText
- Width：列寬，如果要想該列自動填充，則需要使用Flex屬性
我們后台的代碼如下：
protected void Page_Load(object sender, EventArgs e) { BindStore(); } public void BindStore() { storeUserInfo.DataSource = UserInfo.GetData(); storeUserInfo.DataBind(); }
在頁面加載的時候綁定數據。沒有什么新鮮的，之前的章節中已經介紹過Store綁定數據的幾種方式。
整個示例的效果如下：
Ext.Net GridPanel分頁（Paging）
我們這里讓然使用上面的Store，由於用到了分頁，所以需要給Store添加PageSize屬性：
<ext:Store runat="server" ID="storeUserInfo" PageSize="5"> <Model> <ext:Model ID="UserInfoModel" 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>
然后我們為GridPanel添加PagingToolBar：
<BottomBar> <ext:PagingToolbar runat="server" ID="gridPaging" StoreID="storeUserInfo"></ext:PagingToolbar> </BottomBar>
這個PagingToolBar的StoreID屬性設置為GridPanel的Store，這樣就大功告成了，效果如下：
Ext.Net GridPanel顯示行號
只需要修改ColumnModel，為它添加一個行號列就可以了：
<ColumnModel> <Columns> <ext:RowNumbererColumn runat="server"></ext:RowNumbererColumn> <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column> <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column> <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column> <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age"></ext:NumberColumn> </Columns> </ColumnModel>
效果如下：
Ext.Net GridPanel 顯示選擇框（CheckBox）
Ext.Net GridPanel的選擇框列是通過SelectionModel來實現的。我們在ColumnModel前面添加一個選擇框列：
<SelectionModel> <ext:CheckboxSelectionModel runat="server" Mode="Simple"></ext:CheckboxSelectionModel> </SelectionModel>
效果如下：
值得稱贊的是，在使用分頁的情況下，Ext.Net GridPanel能夠保持換頁后的選擇。
Ext.Net GridPanel Filter用法
Filter是用來過濾數據的，數據過濾分為兩種：本地Filter和遠程Filter，默認為遠程過濾，也就是將查詢條件拿到服務器進行查詢並得到返回結果。
本地Filter
直接上代碼，還是我們上面的GridPanel，加入了Filter功能：
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200"> <Store> <ext:Store runat="server" ID="storeUserInfo" PageSize="5" > <Model> <ext:Model ID="UserInfoModel" 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> <ColumnModel> <Columns> <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn> <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column> <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column> <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column> <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age"></ext:NumberColumn> </Columns> </ColumnModel> <SelectionModel> <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Simple"></ext:CheckboxSelectionModel> </SelectionModel> <BottomBar> <ext:PagingToolbar runat="server" ID="gridPaging" StoreID="storeUserInfo"></ext:PagingToolbar> </BottomBar> <Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="true"> <Filters> <ext:StringFilter DataIndex="Name"></ext:StringFilter> <ext:NumericFilter DataIndex="Age"></ext:NumericFilter> </Filters> </ext:GridFilters> </Features> </ext:GridPanel>
Filter是GridPanel的一個功能，所以放在Features標簽內。
GridFilters的屬性Local="true"說明要使用的過濾方式為本地，不進行服務器請求。
StringFilter 和 NumericFilter是兩個過濾條件，它將過濾不同數據類型（字符串和數字）的字段。DataIndex對應GridPanel Column中的DataIndex。
姓名過濾：
年齡過濾：
遠程Filter
遠程過濾的過程是在用戶輸入過濾條件之后，客戶端將用戶的輸入構造成查詢條件，並通過ajax的方式請求服務器，服務器則會根據傳入的Filters參數過濾到相應的數據，然后返回給客戶端。
為了能夠進行遠程Filter，我們首先要將GridFilters 的屬性Local改為"false"，或刪除掉Local屬性（因為默認進行本地Filter）
<Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="false"> <Filters> <ext:StringFilter DataIndex="Name"></ext:StringFilter> <ext:NumericFilter DataIndex="Age"></ext:NumericFilter> </Filters> </ext:GridFilters> </Features>
然后，我們需要讓Store支持遠程異步加載數據，我們這里使用PageProxy和OnReadData來完成：
<ext:Store runat="server" ID="storeUserInfo" PageSize="5" OnReadData="storeUserInfo_ReadData"> <Model> <ext:Model ID="UserInfoModel" 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> <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(); }
完成上面的修改以后，我們只是將原來的一次加載數據改成了異步加載數據，接下來我們來修改storeUserInfo方法，使它支持Filter過濾條件：
首先要構造查詢條件集合：
//如果是ashx或mvc頁面，可以使用context.Request["filter"]; string filters = e.Parameters["filter"]; FilterConditions conditions = null;
然后根據條件查詢，下面是一個簡單的示例：
if (!string.IsNullOrWhiteSpace(filters)) { conditions = new FilterConditions(filters); foreach (var item in conditions.Conditions) { switch (item.Field) { case "Name": { string value = item.Value<string>(); userInfoList = userInfoList.FindAll(m => m.Name.Contains(value)); } break; case "Age": { int value = item.Value<int>(); switch (item.Comparison) { case Comparison.Gt: userInfoList = userInfoList.FindAll(m => m.Age >= value); break; case Comparison.Lt: userInfoList = userInfoList.FindAll(m => m.Age <= value); break; case Comparison.Eq: userInfoList = userInfoList.FindAll(m => m.Age == value); break; } } break; } } }
這里面的item就是一個查詢條件，Field是字段，表示要過濾的字段；
item中有一個比較重要的屬性Comparison，它是一個枚舉類型：
- Gt：大於
- Lt：小於
- Eq：等於
另外，Value<T>()方法可以獲取查詢條件的值，泛型T是我們需要是類型
代碼效果是一樣的，不過這里是異步加載的。
GridPanel Sorter用法
默認情況下，Ext.Net GridPanel中的列都具有排序功能，如果要禁用列排序，需要在列模型中添加一個屬性Sortable="false"。
客戶端排序
排序是對Store的操作。如果我們要在一個Store中加入排序，可以使用下面的配置：
<Sorters> <ext:DataSorter Property="ID" Direction="DESC"></ext:DataSorter> </Sorters>
有了這段代碼，我們的Store將會在顯示之前進行排序。效果如下：
服務器端排序
默認情況下，排序是在客戶端進行的，不會進行遠程請求。如果Store一次加載了所有數據，客戶端排序沒有問題；如果Store是分頁異步加載數據，那么這種排序方式就不能滿足需要了，我們需要異步的排序。
我們來將Store改為異步分頁的Store，代碼如下：
<ext:Store runat="server" ID="storeUserInfo" PageSize="5" RemoteSort="true" OnReadData="storeUserInfo_ReadData"> <Model> <ext:Model ID="UserInfoModel" 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> <Proxy> <ext:PageProxy></ext:PageProxy> </Proxy> <Sorters> <ext:DataSorter Property="ID" Direction="DESC"></ext:DataSorter> </Sorters> </ext:Store>
我們對Store進行修改，加入了RemoteSort屬性，表示是否進行遠程排序，然后加入默認的排序規則，Property表示排序字段，Direction表示排序方向（正序、倒序）
OnReadData事件的處理方法如下：
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(); }
上面的這段代碼只是完成了Store的異步分頁，如果想要我們的Store進行服務器端的排序，還需要修改ReadData事件處理方法，加入排序的代碼：
//處理排序的相關代碼 if (e.Sort.Count() > 0) { foreach (var item in e.Sort) { switch (item.Property) { case "Name": userInfoList.Sort((u1, u2) => { switch (item.Direction) { case Ext.Net.SortDirection.Default: case Ext.Net.SortDirection.ASC: default: return string.Compare(u1.Name, u2.Name); case Ext.Net.SortDirection.DESC: return 0 - string.Compare(u1.Name, u2.Name); } }); break; case "Age": userInfoList.Sort((u1, u2) => { switch (item.Direction) { case Ext.Net.SortDirection.Default: case Ext.Net.SortDirection.ASC: default: return u1.Age - u2.Age; case Ext.Net.SortDirection.DESC: return u2.Age - u1.Age; } }); break; } } }
在這段代碼中，item.Property表示排序字段；item.Direction表示排序方向。效果如下：
如果在.ashx中使用排序，可以先構造一個請求參數，然后使用上面的代碼進行排序：
var prms = new StoreRequestParameters(context); // use prms.Sort[0].Property and prms.Sort[0].Direction
通過context構造一個請求參數，然后可以獲取參數里面的Sort數組。
GridPanel Grouping用法
Ext.Net GridPanel可以進行Group操作，如何啟用Grouping功能呢？只需要在GridPanel中添加一行配置節點：
<Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="true"> <Filters> <ext:StringFilter DataIndex="Name"></ext:StringFilter> </Filters> </ext:GridFilters> <ext:Grouping runat="server"></ext:Grouping> </Features>
加上這一行代碼之后，我們的GridPanel就具備了分組的功能。此時我們的每一列都可以分組，如果要禁用某一列分組，可以使用下面的代碼來完成：
<ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID" Groupable="false"></ext:Column>
在Column中添加Groupable屬性，並將值設置為false，就可以禁用列的分組功能,代碼效果如下：
自定義Group標題
我們可以自定義Group的標題：
<ext:Grouping runat="server" GroupHeaderTplString="{columnName}:{name}"></ext:Grouping>
自定義標題是通過Tpl模板來實現的，因此我們只要符合Tpl的格式就可以了。
下面我們為標題添加上分組的行數，代碼如下：
<ext:Grouping runat="server" GroupHeaderTplString="{columnName}:{name}{[MyApp.formatGroupSummary(values)]}"></ext:Grouping>
var MyApp = { formatGroupSummary: function (values) { var rows = values.rows, numRows = rows.length; return Ext.String.format("（共 {0} 條）", numRows); } };
代碼效果如下：
注意，Group分組只對當前頁有效，並且只在客戶端完成。
GridPanel 匯總(Summary)用法
Summary的用法和Group一樣簡單，分為兩步：
啟用Summary功能
在Feature標簽內，添加如下代碼：
<ext:Summary runat="server"></ext:Summary>
使用匯總列
然后我們需要在ColumnModel中使用SummaryColumn：
<ext:SummaryColumn runat="server" ID="columnName" Width="150" Text="姓名" DataIndex="Name" SummaryType="Count"> </ext:SummaryColumn>
SummaryType表示匯總類型，可用的有Count、Average、Max、Min、Sum等，都是我們最常用的匯總類型。
加上這些代碼以后我們已經能夠看到總行數了，但是這樣顯示不夠好看，我們可以使用SummaryRender來自定義顯示：
<ext:SummaryColumn runat="server" ID="columnName" Width="150" Text="姓名" DataIndex="Name" SummaryType="Count"> <SummaryRenderer Handler="return '共 ' + value + ' 條'"></SummaryRenderer> </ext:SummaryColumn>
刷新以后的截圖如下：
分組匯總（Group Summary）
前面有介紹Ext.Net中GridPanel的Grouping用法，接下來我們看一下對分組匯總的實現，一樣很簡單，只需要開啟這個功能：
<Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="true"> <Filters> <ext:StringFilter DataIndex="Name"></ext:StringFilter> </Filters> </ext:GridFilters> <ext:Summary runat="server"></ext:Summary> <ext:GroupingSummary runat="server"></ext:GroupingSummary> </Features>
開啟分組匯總功能之后，我們的截圖如下：
注意：Summary功能和Group功能一樣，都是在客戶端完成的，並且只對當前頁的數據進行匯總和分組。
Ext.Net學習筆記11：Ext.Net GridPanel的用法
Ext.Net學習筆記12：Ext.Net GridPanel Filter用法
Ext.Net學習筆記13：Ext.Net GridPanel Sorter用法