GridPanel 折疊/展開行
Ext.Net GridPanel的行支持折疊/展開功能，這個功能個人覺得還說很有用處的，尤其是數據中包含圖片等內容的時候。
下面來看看效果：
使用行折疊/展開功能之后，在Ext.Net GridPanel的行頭會出現一個展開圖標，點擊圖標以后能夠將這一行展開：
使用XTemplate實現行折疊/展開
這是最簡單的一種實現，在上一篇文章：【Ext.Net學習筆記】05：Ext.Net GridPanel的用法（包含Filter、Sorter、Grouping、匯總(Summary)的用法） 中的代碼基礎上我們在GridPanel的定義中加入下面的代碼：
<Plugins> <ext:RowExpander runat="server"> <Template runat="server"> <Html> <b>姓名：</b><span>{Name}</span> <br></br> <b>年齡：</b><span>{Age}</span> </Html> </Template> </ext:RowExpander> </Plugins>
這里面使用到了Template，這里面包含了我們展開后要顯示的內容，數據就是當前行的數據。
從服務器獲取展開時顯示的數據
通常情況下我們不會一次將所有數據都獲取到客戶端，而是通過異步加載的方式按需獲取要顯示的數據
在Ext.Net GridPanel中，如果要在展開的時候從服務器獲取數據，我們需要完成如下代碼。
第一步：為了配合演示，先為我們的Model添加一個Time屬性，我們通過異步的方式去服務器端獲取當前時間：
<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> <ext:ModelField Name="Time" Type="String"></ext:ModelField> </Fields> </ext:Model>
第二步：修改我們的RowExpander定義，我們需要將Template定義在Bin下，並為RowExpander添加事件：
<Bin> <ext:XTemplate runat="server" ID="tplDetail"> <Html> <b>姓名：</b><span>{Name}</span> <br></br> <b>年齡：</b><span>{Age}</span> <br></br> <b>時間：</b><span>{Time}</span> </Html> </ext:XTemplate> </Bin> <Plugins> <ext:RowExpander runat="server"> <Listeners> <Expand Handler="MyApp.onExpand(record.data, #{tplDetail}, #{ctDetail})"></Expand> </Listeners> <Component> <ext:Container runat="server" ID="ctDetail" /> </Component> </ext:RowExpander> </Plugins>
第三步：定義服務器端的DirectMethod方法：
[DirectMethod] public static string GetDetail(string name) { return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); }
第四步：定義客戶端的Expand方法：
var MyApp = { onExpand: function (data, template, container) { if (data.Time) return; App.direct.GetDetail(data.Name, { success: function (time) { data.Time = time; template.overwrite(container.getEl(), data); }, eventMask : { showMask : true } } ); } };
通過上面這幾個步驟，我們就完成了異步獲取並顯示的功能。效果如下：
GridPanel Selection
接下來是Ext.Net的GridPanel的另外一個功能：選擇。
我們在GridPanel最開始的用法中已經見識過如何使用選擇功能，今天我們這片筆記將更加詳細的介紹Ext.Net GridPanel的Selection功能。
Ext.Net GridPanel Selection包括三種：
- RowSelectionModel：行選擇模型
- CheckboxSelectionModel：帶有復選框的行選擇模型
- CellSelectionModel：單元格選擇模型
默認情況下，GridPanel使用RowSelectionModel，能夠進行單選，如果要GridPanel能夠進行多選，需要在GridPanel中添加屬性：
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200" MultiSelect="true">
下面我們來分別看一下這三種模型的用法
RowSelectionModel
效果如下：
實現代碼：
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200" MultiSelect="true">
在RowSelectionModel的配置中，屬性Mode表示選擇的類型，分別是Single（單選）、Multi（多選）和Simple（簡單多選）
單選和多選的區別很明顯，我們來說一下Multi和Simple的區別：
- multi：多選，但需要使用鍵盤Ctrl、Shift來配合完成。在實際使用的過程中你會發現，單純的鼠標單擊並不能實現多選，需要同時按下Ctrl鍵才能多選，如果要選擇一個區域，則可以同時按下Shift鍵。
- Simple：多選，不需要Ctrl或Shift鍵的配合。只使用鼠標即可實現多選。
CheckboxSelectionModel
效果如圖：
代碼如下：
<ext:CheckboxSelectionModel runat="server" Mode="Multi" InjectCheckbox="1"> </ext:CheckboxSelectionModel>
Mode屬性與RowSelectionModel中的Mode屬性功能相同，不在贅言。
InjectCheckbox屬性用來決定Checkbox列顯示在什么位置（第幾列），默認為0，從第0列開始。
CellSelectionModel
效果如圖：
代碼如下：
<ext:CellSelectionModel runat="server"></ext:CellSelectionModel>
我試了一下，好像是只能選中一個單元格。
查了ExtJS API以后發現確實只能選擇一個單元格，它同樣也有一個Mode屬性，但這個屬性只有一個可用值：Single。
客戶端獲取選擇的值
由於這系列比較偏重服務器端的處理，所以這個地方簡單的說一下客戶端獲取值的方法，代碼如下：
var selectedRows = grid.getSelectionModel().getSelection();
grid是我們的GridPanel，首選獲取它的選擇模型，得到模型之后，再從選擇模型中得到選中的內容。
服務器端獲取選擇的值
對於服務器端來說，我們可以用同樣的思路來獲取選中的值。
var selectionModel = grid.GetSelectionModel() as RowSelectionModel; if (selectionModel.SelectedRows.Count == 0) { X.MessageBox.Alert("提示", "沒有選中行").Show(); return; } string ids = string.Empty; foreach (var item in selectionModel.SelectedRows) { ids += "," + item.RecordID; } ids = ids.Trim(','); X.MessageBox.Alert("提示", ids).Show();
注意：如果Store所關聯的Model沒有設置IDProperty，將導致無法獲取RecordID
上面的代碼是針對RowSelectionModel和CheckboxSelectionModel來說的，如果是CellSelectionModel，我們還可以獲取到單元格的值等內容：
var cellModel = grid.GetSelectionModel() as CellSelectionModel; //獲取記錄ID var recordId = cellModel.SelectedCell.RecordID; //獲取單元格值 var cellValue = cellModel.SelectedCell.Value; //獲取列名稱 var columnName = cellModel.SelectedCell.Name; //獲取列號 var columnIndex = cellModel.SelectedCell.ColIndex; //獲取行號 var rowIndex = cellModel.SelectedCell.RowIndex;
可編輯的GridPanel
Ext.Net GridPanel 有兩種編輯模式：編輯單元格和編輯行。
單元格編輯：
行編輯：
可以看出，單元格編輯的時候，只有單元格會進入編輯模式，而行編輯模式中則對編輯行的所有可編輯字段統一進行編輯。
要對Ext.Net GridPanel進行編輯，需要進行兩步配置：
- 配置列的編輯控件（TextField、NumberField、DateField等）
- 配置編輯插件（CellEditing、RowEditing）
配置Grid列的編輯控件
在我們的例子中，只對姓名和年齡進行編輯，姓名使用的是TextField控件，年齡使用NumberField控件，列的配置如下：
<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"> <Editor> <ext:TextField runat="server"></ext:TextField> </Editor> </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" Format=""> <Editor> <ext:NumberField runat="server" MinValue="18" MaxValue="150"></ext:NumberField> </Editor> </ext:NumberColumn> </Columns> </ColumnModel>
配置Grid編輯插件
ExtJS中有兩種Grid的編輯插件，我們將使用代碼貼出來。
單元格編輯：
<Plugins> <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing> </Plugins>
行編輯：
<Plugins> <ext:RowEditing runat="server" ClicksToEdit="1"></ext:RowEditing> </Plugins>
通過上面兩個配置，我們已經可以使用Ext.Net GridPanel的編輯功能了。
來源：
Ext.Net學習筆記16：Ext.Net GridPanel 折疊/展開行
Ext.Net學習筆記17：Ext.Net GridPanel Selection
Ext.Net學習筆記18：Ext.Net 可編輯的GridPanel