grid表格是extjs的核心組件之一，它提供了展示大量數據的最佳途徑。Grid組件的重要特性包括：智能渲染、標准布局、數據視圖、特性支持、虛擬滾動和編輯改進，這些特性共同締造了功能強大的4.0grid組件。
智能渲染：在extjs4.0之前的版本中采用了‘最小公分母’的策略來支持各種豐富的特性，這種方式會對每一個表格產生大量的標簽，而這些標簽對於簡單表格來說是不必要的，而在4.0中默認的表格只會產生很少的標簽，對於復雜的功能采用附加特性的方式實現，這對於提高數據的展示速度和表格的性能起到了巨大的作用。
標准布局：在ExtJs4.0中改變了原來直接處理內部標簽和樣式的布局方式，而是將表格划分為不同的組成部分，並使他們有機結合起來，這樣就統一了表格和框架的渲染流程。
數據視圖：在ExtJs4.0中新的gridView擴展自標准的DataView數據視圖，這不但減少了代碼冗余並且可以更簡單的進行自定義。
特性支持：在ExtJs4.0之前的版本可以通過插件或者繼承的方式對表格組件的功能進行擴展，但是這種擴展方式很難實現功能的靈活組合。4.0中使用了性的Grid基類Ext.grid.Feature，它提供了靈活定義表格特性的基礎，任何Feature類都可以修改表格模版，來裝飾或改變grid視圖生成的標簽。在新的grid類中RowWrap、RowBody和Grouping都是通過Feature方式實現的。
虛擬滾動：在ExtJs4.0中原生支持了渲染時數據的緩存，提供了一個虛擬的按需加載的數據視圖，grid現在可以非常容易地支持幾百條甚至幾千條數據展示而不需要分頁，這大大改進了grid的數據處理能力。
編輯改進：在ExtJs4.0之前的版本中開發者不得不使用editGrid類來支持表格的編輯功能，這很大程度上限制了程序的靈活性，在ExtJs4.0中提供了全新的編輯插件，它可以應用於任何grid實例。
1、表格面板grid
grid表格組件實在客戶端展示大量數據的優秀途徑，可以看作一個增強版的table，它使得獲取、排序、過濾、分組、數據變得異常簡單。
grid中主要集成了兩大部分，分別是用於處理數據的Store和用於渲染的Columns。
下面一個簡單的示例最簡單的表格配置
可以看我另一篇文章 ,一個簡單的grid 文章在這里
Ext.onReady(function(){
//創建表格數據 var datas = [ [100,'張三',24], [200,'李四',30], [300,'王五',29] ]; //創建Grid表格組件 Ext.create('Ext.grid.Panel',{ title : '簡單Grid表格示例', renderTo: Ext.getBody(), width:200, height:130, frame:true, viewConfig: { forceFit : true, stripeRows: true//在表格中顯示斑馬線 }, store: {//配置數據源 fields: ['id','name','age'],//定義字段 proxy: { type: 'memory',//Ext.data.proxy.Memory內存代理 data : datas,//讀取內嵌數據 reader : 'array'//Ext.data.reader.Array解析器 }, autoLoad: true//自動加載 }, columns: [//配置表格列 {header: "id", width: 30, dataIndex: 'id', sortable: true}, {header: "姓名", width: 80, dataIndex: 'name', sortable: true}, {header: "年齡", width: 80, dataIndex: 'age', sortable: true} ] }); });
表格組件的主要配置項和方法如下表所示
表1-1 Ext.grid.Panel主要配置項
| 配置項 | 參數類型 | 說明 |
| columns | Array | 一個表格列配置對象的數組，每一個列配置對象都包括了header（列頭）和數據來源的定義 |
| columnLines | Boolean | 設置為true則顯示縱向表格線，默認為false |
| forceFit | Boolean | 設置為true則強制列填充滿可以利用的空間 |
| hideHeaders | Boolean | 設置為true則隱藏列標題 |
| scroll | String/Boolean | 設置表格滾動條，有效值包括both(垂直和水平滾動),horizontal(水平滾動)和vertical(垂直滾動).true等效於both,false等效none,默認值為true. |
| scrollDelta | Number | 設置鼠標滾輪滾動事的像素量，默認為40像素 |
| sorttableColumns | Boolean | 設置為false則禁止通過表格中標題中的菜單項排序 |
表1-1 Ext.grid.Panel主要方法
| 方法名 | 說明 |
| getSelectionModel:Ext.selection.Model | 獲取選擇模式 |
| getStore:Ext.data.Store | 獲取表格的數據集 |
| getView:Ext.view.Table | 獲取表格的視圖對象 |
| hideHorzontalScroller:void | 隱藏水平滾動條 |
| hideVerticalScroller:void | 隱藏垂直滾動條 |
| scrollByDeltaX(Number deltaX):void | 水平滾動表格,正數向右滾動,負數向左滾動,deltaX為滾動像素 |
| scrollByDeltaY(Number deltaY):void | 垂直向下滾動,deltaY為滾動像素 |
| setScrollTop(Number deltaY):void | 垂直向上滾動,deltaY為滾動像素 |
| showHorzontalScroller:void | 顯示水平滾動條 |
| showVerticalScroller:void | 顯示垂直滾動條 |
2、表格列Column
Ext.grid.column.Column類定義了表格內部與列相關的配置，其中包括列標題和數據展示的相關內容，下表中列出了該類的主要配置項
表2-1Ext.grid.column.Column主要配置項
| 配置項 | 參數類型 | 說明 |
| align | String | 設置列標題和數據的對齊方式，默認為left |
| columns | Array | 設置組列，數組中的列將作為一組處理，組列不能排序但是可以隱藏和移動，組內的列可以移出組外，當所有的子列都被移出后組列將被自動銷毀 |
| dataIndex | String | 設置列與數據集中的數據對應關系，值為數據模型中的字段名稱 |
| draggable | Boolean | 設置列頭是否可以移動，默認為true |
| flex | Number | 設置列寬占所有flex和的比例 |
| groupable | Boolean | 設置在使用Ext.grid.feature.Grouping分組特性的情況下是否禁用該列在標題菜單中的分組功能 |
| header | String | 設置列標題 |
| hideable | Boolean | 設置為false則阻止用戶隱藏該列，默認為true |
| menuDisabled | Boolean | 設置為true則禁用標題菜單，默認為fakse |
| renderer | Function | 設置列的自定義渲染函數 |
| sortable | Boolean | 設置是否允許進行排序，默認為true，它將根據Ext.data.Store.remoteSort判斷進行本地排序還是遠程排序 |
| text | String | 設置列標題，header配置優先 |
| width | Number | 設置列寬 |
Column類有7個便利子類，為常用的數據類型提供了便利的展示方式，他們分別是：
Ext.grid.column.Boolean 布爾列
Ext.grid.column.Number 數字列
Ext.grid.column.Action 動作列
Ext.grid.column.Template 模版列
Ext.grid.RowNumber 行號列
Ext.tree.Column 樹結構列（后面介紹）
2.1 布爾列Ext.grid.column.Boolean
Ext.grid.column.Boolean 定義了在表格列中顯示布爾值的方式
表2-2 Ext.grid.column.Boolean只要配置項
| 配置項 | 參數類型 | 說明 |
| falseText | String | 設置渲染false值對應的文本，默認為false |
| trueText | String | 設置渲染true值對應的文本，默認為true |
| undefinedText | String | 設置渲染undefined值對應的文本，默認為空字符串 |
2.2 數字列Ext.grid.column.Number
Ext.grid.column.Number 定義了在表格中展示數字值的方式。
配置項format，參數類型String，設置Ext.util.Format.number函數格式化字符串，默認為0，000.00
2.3 日期列Ext.grid.column.Date
format String 設置Date.format函數的格式化字符串，默認為Ext.data.defaultFormat
示例代碼：
Ext.onReady(function(){
//創建表格數據 var datas = [ ['張三',true,new Date(1979,09,13),2500], ['李四',false,new Date(1978,10,01),1500], ['王五',false,new Date(1981,01,01),1000] ]; //創建Grid表格組件 Ext.create('Ext.grid.Panel',{ title : 'Ext.grid.column.Column示例', renderTo: Ext.getBody(), width:300, height:150, frame:true, store: { fields: ['name','leader','birthday','salary'], proxy: { type: 'memory', data : datas, reader : 'array'//Ext.data.reader.Array解析器 }, autoLoad: true }, columns: [//配置表格列 {header: "姓名", width: 50, dataIndex: 'name'}, {header: "組長", width: 50, dataIndex: 'leader', xtype: 'booleancolumn',//Ext.grid.column.Boolean布爾列 trueText: '是', falseText: '否' }, {header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列 format : 'Y年m月d日'//日期格式化字符串 }, {header: "薪資", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number數字列 format:'0,000'//數字格式化字符串 } ] }); });
2.4 動作列 Ext.grid.column.Action
Ext.grid.column.Action 將渲染一個圖標或一系列圖標到表格的單元格中，並為每一個圖標創建響應函數。
| 配置項 | 參數類型 | 說明 |
| altText | String | 設置應用於image元素上的alt屬性，默認為空字符串 |
| getClass | Function | 設置返回圖標樣式的函數 |
| handler | Function | 設置圖標點擊事件的響應函數，該函數將被傳入以下參數： view：TableView 表格視圖 rowIndex：Number 行索引 colIndex:Number 列索引 item：Object 條目 e：Event點擊事件對象 |
| icon | String | 獲取圖標資源的url地址，默認為Ext.BLANK_IMAGE_URL |
| iconCls | String | 設置應用於圖標的樣式 |
| items | Array | 包含多個圖標定義的數組 |
| scope | Object | 設置handler和getClass函數的作用域，默認為Column |
| stopSelection | Boolean | 默認為true阻止當動作發生時，當前行被選中 |
| tooltip | String | 設置工具提示信息，需要初始化Ext.tip.QuickTipManager |
示例代碼
{header: "操作", width: 70,
xtype: 'actioncolumn',//Ext.grid.column.Action動作列 items: [{ icon: 'images/edit.gif',//指定編輯圖標資源的URL handler: function(grid, rowIndex, colIndex) { //獲取被操作的數據記錄 var rec = grid.getStore().getAt(rowIndex); alert("編輯 " + rec.get('name')); } },{ icon: 'images/del.gif',//指定編輯圖標資源的URL handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); alert("刪除 " + rec.get('name')); } },{ icon: 'images/save.gif',//指定編輯圖標資源的URL handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); alert("保存 " + rec.get('name')); } }]
}
2.5 模板列 Ext.grid.column.Template
Ext.grid.column.Template提供了通過模版渲染單元格內容的方式
tpl String/XTemplate 設置一個XTemplate模版對象或模版定義，模版數據將被傳入其中
{
header: "描述", width: 100,
xtype: 'templatecolumn',//Ext.grid.column.Template數字列 tpl : '{name}<tpl if="leader == false">不</tpl>是組長' }
2.6 行號列 Ext.grid.RowNumber
text String 設置顯示在標題中的文本或html代碼段，默認值為 
width Number 設置行號列的寬度，默認為23像素
2.7 自定義渲染函數
單元格渲染函數renderer是表格列的一項重要內容，可用來處理表格中的原始值，並將格式化后的結果返回，返回值決定了數據在單元格中的表現形式。靈活使用該函數可以實現個性化的數據展示效果。傳入自定義渲染函數的參數有：
value：Mixed 當前單元格的值
metadata：Object 包含當前單元格信息的數據對象，由於設置單元格的樣式和屬性，該對象包含的屬性有：
tdCls：String 應用到單元格TD元素上的樣式名稱
tdAttr： String 一個html屬性定義字符串
style：String 應用到單元格TD元素上的樣式字符串
record：Ext.data.Model 當前數據記錄對象，其中包含了與該單元格處於同一行的其他列的數據。
rowIndex： Number 當前單元格的行索引
colInde： Number 列索引
store ：Ext.data.Store 包含表格所有數據的數據集對象
view：Ext.view.View 當前的表格視圖。
3、選擇模式Selection
選擇模式用來處理數據視圖中記錄的選擇狀態，Ext.selection.Model是選擇模式的基類，它的子類包括Ext.selection.CellModel（單元格選擇模式），Ext.selection.CheckboxModel（復選框選擇模式）和Ext.selection.RowModel（行選擇模式）。
3.1 選擇模式Ext.selection.Model
Ext.selection.Model是選擇模式的基類，它定義了子類需要實現的接口，這個類不能直接被創建。
表3-1 Ext.selection.Model主要配置項
| 配置項 | 參數類型 | 說明 |
| allowDeselect | Boolean | 設置是否允許用戶在數據視圖中執行撤選操作，該配置只在single單選模式下生效，默認為false |
| mode | String | 設置選擇模式，有效值包括 SINGLE 單選，SIMPLE簡單選擇和MULTI多選，默認為SINGLE單選 |
表3-2 Ext.selection.Model 主要方法
| 方法名 | 說明 |
| delslect(Ext.data.Model/Index records,Boolean supressEvent):void | 執行撤選操作，records 數據記錄或索引的數組，suppressEvent 是否抑制select事件 |
| getLastSelected : Object | 獲取最近選擇的記錄數組 |
| getSelection: Array | 獲取當前選中的記錄數組 |
| getSleectionMode: String | 獲取當前的選擇模式 |
| hasSelect: Boolean | 獲取是否有記錄在被選擇的狀態 |
| isFocused(Object rec):void | 檢查指定記錄是否為最近選中的記錄 |
| isLocked(): Boolean | 取得當前選擇區域是否被鎖定 |
| isSelected(Record/Number record): Boolean | 檢查指定記錄是否被選中 |
| select(Model/Index records ,Boolean keepExiting ,Boolean suppressEvent) : void | 選中記錄 records 數據記錄或索引的數組，keepExisting 保持，suppressEvent 是否抑制select事件 |
| selectRange(Model/Number startRow,Model/Number endRow , [Boolean keepExisting],Object dir): void | 選擇范圍內的所有行，startRow 開始索引，endRow 結束索引，keepExisting： true表示保持已有的選擇，false則取消已有的選擇 |
| setLocked(Boolean locaked) : void | 設置是否鎖定當前的選擇狀態，locked：true表示鎖定，false解鎖 |
3.2 單元格選擇模式 Ext.selection.CellModel
Ext.selection.CellModel是一個簡單的選擇模式，用於選擇表格中的單一單元格。
getCurrentPosition(): Object 得到當前選擇的單元格，如果沒有選擇單元格則返回null
selectByPosition(pos) :void 選中指定位置的單元格，pos為位置信息，格式為{row:2,column:2}
3.3 行選擇模式 Ext.selection.RowModel
表3-3 Ext.selection.RowModel主要配置項
| 配置項 | 參數類型 | 說明 |
| enableKeyNav | Boolean | 設置是否啟用鍵盤導航，默認為true |
| simpleSelect | Boolean | 設置在行選擇模式下是否啟用簡單選擇模式，如果啟用則不需要按下crtl鍵只需通過鼠標點擊就可以實現多選 |
| multiSelect | Boolean | 設置在行選擇模式下是否支持多選 |
示例代碼：
simpleSelect : true,//啟用簡單選擇功能 multiSelect : true,//支持多選 selType: 'rowmodel',//設置為單元格選擇模式Ext.selection.RowModel tbar : [{ text : '取得所選行', handler : function(){ var msg = ''; var rows = grid.getSelectionModel().getSelection(); for(var i = 0; i < rows.length; i++){ msg = msg + rows[i].get('name') + '\n'; } alert(msg); } }]
3.4 復選框選擇模式 Ext.selection.CheckboxModel
Ext.selection.CheckboxModel擴展自Ext.selection.RowModel 其配置項如下;
checkOnly Boolean 設置為true則只能通過點擊checkbox列進行選擇，默認為false
injectCheckbox Mixed 設置注入復選框的位置，有效值可以是一個數字，false，會字符串first，last，默認為0
需要注意的是，Ext.selection.CheckboxModel沒有注冊selection命名空間下的別名，導致不能直接使用，因此需要編寫別名注冊代碼，示例如下：
//注冊復選框選擇模式別名為selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel'); multiSelect : true,//支持多選 selModel: { elType : 'checkboxmodel'//復選框選擇模式Ext.selection.CheckboxModel }
4、表格特性 Feature
Ext.grid.feature.Feature是一類針對Ext.grid.Panel的特殊插件，它提供了一些擴展點。其子類包括：
Ext.grid.feature.RowBody 表格行體
Ext.grid.feature.Summary 表格匯總
Ext.grid.feature.Grouping 表格分組
Ext.grid.feature.GroupingSummary 分組匯總
4.1 表格行體 Ext.grid.feature.RowBody
行體特性為表格追加了tr標簽，它跨越了原始表格的所有列。該特性在表格中展示一些描述性的特殊信息時非常有用，行體在默認狀態下是隱藏的，如果需要展示行體必須覆蓋geyAdditionalData方法。
使用行體會自動在表格視圖中暴露已rowbody為前綴的事件，示例如下：
features: [Ext.create('Ext.grid.feature.RowBody',{
getAdditionalData: function(data, idx, record, orig) { var headerCt = this.view.headerCt, colspan = headerCt.getColumnCount();//獲取表格的列數 return { rowBody: record.get('introduce'),//指定行體內容 rowBodyCls: 'rowbodyColor',//指定行體樣式 rowBodyColspan: colspan//指定行體跨列的列數 }; } })]
4.2 表格匯總 Ext.grid.feature.Summary
表格匯總特性將在表格的底部顯示一個匯總行，關於匯總行有2點需要注意：
1、匯總值的計算，匯總值需要根據表格的每一列進行計算，計算方式通過column中的summaryType配置項進行指定，內置的匯總計算類型包括：count 計數；sum 求和；min 最小值；max 最大值；average 平均值。
2、匯總值的渲染，與column的渲染方式相同，匯總值的渲染支持summaryRenderer函數，該函數是可選的，傳入函數的參數有：
value{Object}:合計值
data{Objject}:包含所有合計值的行數據
field{String}:進行求和計算的字段名
示例代碼：
Ext.onReady(function(){
//創建表格數據 var datas = [ ['張三',2500], ['李四',1500] ]; //創建Grid表格組件 Ext.create('Ext.grid.Panel',{ title : 'Ext.grid.feature.Summary示例', renderTo: Ext.getBody(), width:300, height:150, frame:true, store: { fields: ['name','salary','introduce'], proxy: { type: 'memory', data : datas, reader : 'array'//Ext.data.reader.Array解析器 }, autoLoad: true }, features: [{ ftype: 'summary'//Ext.grid.feature.Summary表格匯總特性 }], columns: [//配置表格列 {header: "姓名", flex: 1, dataIndex: 'name', summaryType: 'count',//求數量 summaryRenderer: function(value){ return '員工總數：'+value } }, {header: "薪資", flex: 1, dataIndex: 'salary', summaryType: 'average',//求平均值 summaryRenderer: function(value){ return '平均薪資：'+value } } ] }); });
4.3 表格分組 Ext.grid.feature.Grouping
表格分組特性將表格按照分組的方式進行聚合展示，在每一個分組標題之下展示與之匹配的數據記錄，分組之后的數據可以展開或收縮，該特性有以下3點需要注意的地方：
新增事件：包括 groupclick、groupdblclick、groupcontextmenu、groupexpand、groupcollapse。
標題欄擴展：標題菜單中會增加分組相關功能，通過enableGroupingMenu配置項來控制該功能是否啟用。
定義分組標題：功過groupHeaderTpl可以定義分組標題顯示模版。
表4-1Ext.grid.feature.Grouping 主要配置項
| 配置項 | 參數類型 | 說明 |
| depthToIndent | Number | 設置分組數據的縮進，默認為17像素 |
| enableGroupingMenu | Boolean | 設置是否啟用標題菜單中的分組功能，默認為true |
| enableNoGroups | Boolean | 設置是否允許用戶關閉分組，默認為true |
| groupByText | String | 設置顯示在分組菜單中的分組功能名稱，默認為group By This Field |
| groupHeaderTpl | String | 設置分組標題模板，默認為Group:{name} |
| hideGroupedHeader | Boolean | 設置是否隱藏分組標題，默認為false |
| showGroupsText | String | 設置標題菜單中是否分組顯示文字說明，默認為 show in groups |
| startCollapsed | Boolean | 設置分組是否默認收縮，默認為false |
示例代碼：
Ext.onReady(function(){
//創建表格數據 var datas = [ ['張三','男',29],['李四','女',30], ['王五','男',27],['趙六','女',31] ]; //創建Grid表格組件 Ext.create('Ext.grid.Panel',{ title : 'Ext.grid.feature.Grouping示例', renderTo: Ext.getBody(), width:300, height:150, frame:true, store: { fields: ['name','sex','age'], groupField: 'sex',//設置分組字段 proxy: { type: 'memory', data : datas, reader : 'array'//Ext.data.reader.Array解析器 }, autoLoad: true }, features: [Ext.create('Ext.grid.feature.Grouping', { groupByText : '用本字段分組', showGroupsText : '顯示分組', groupHeaderTpl: '性別: {name} ({rows.length})', //分組標題模版 startCollapsed: true //設置初始分組是否收起 })], columns: [//配置表格列 {header: "姓名", flex: 1, dataIndex: 'name'}, {header: "性別", flex: 1, dataIndex: 'sex'}, {header: "年齡", flex: 1, dataIndex: 'age'} ] }); });
4.4 分組匯總 Ext.grid.feature.GroupingSummary
分組匯總特性結合了Grouping分組和summary匯總兩個特性的特點，它在每一個分組下增加一行顯示匯總數據，其相關配置可以參考Grouping和summary的配置項。
5、表格插件plugin
為了擴展表格組件已有功能，除了前面介紹的特性之外，extjs還提供了表格的擴展插件，通過插件實現表格的編輯，拖拽等功能。
單元格編輯插件：Ext.grid.plugin.CellEditing
行編輯插件：Ext.grid.plugin.RowEditing
拖拽插件： Ext.grid.plugin.DragDrop
5.1 單元格編輯插件 Ext.grid.plugin.CellEditing
Ext.grid.plugin.CellEditing插件為grid組件注入了單元格級別的編輯功能，同一時間只能有一個單元格處於編輯狀態，表單字段作為編輯器，如果表格中的某列沒有指定編輯器則該列不能被編輯。其主要配置項如下：
clicksToEdit Number 設置點擊單元格進入編輯模式的點擊次數，默認為2
示例代碼如下：
Ext.onReady(function(){
//初始化提示信息 Ext.QuickTips.init(); //創建表格數據 var datas = [ ['張三',new Date(1979,09,13),2500], ['李四',new Date(1978,10,01),1500], ['王五',new Date(1981,01,01),1000] ]; //創建Grid表格組件 Ext.create('Ext.grid.Panel',{ title : 'Ext.grid.plugin.CellEditing示例', renderTo: Ext.getBody(), width:300, height:150, frame:true, store: { fields: ['name','birthday','salary'], proxy: { type: 'memory', data : datas, reader : 'array'//Ext.data.reader.Array解析器 }, autoLoad: true }, plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1//設置鼠標單擊1次進入編輯狀態 }) ], selType: 'cellmodel',//設置為單元格選擇模式 columns: [//配置表格列 Ext.create('Ext.grid.RowNumberer',{text : '行號', width : 35}), {header: "姓名", width: 50, dataIndex: 'name', editor: {//文本字段 xtype:'textfield', allowBlank:false } }, {header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列 format : 'Y年m月d日',//日期格式化字符串 editor: {//日期字段 xtype:'datefield', allowBlank:false } }, {header: "薪資", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number數字列 format:'0,000',//數字格式化字符串 editor: {//數字字段 xtype:'numberfield', allowBlank:false } } ] }); });
保存編輯后的數據有2中基本方式
1.監聽表格的edit事件，在每一次編輯后該事件都會觸發，在事件處理函數中獎修改后的數據保存到服務器中，例如：
grid.on('edit',onEdit,this); function onEdit(e){ //執行ajax請求將數據提交至服務器 e.record.commit(); };
2、建立單獨的數據保存處理函數，該函數有用戶決定何時觸發，在函數中獲取所有修改過的表格數據，一次性將多條修改后的數據同步到服務器。
5.2 行編輯插件：Ext.grid.plugin.RowEditing
Ext.grid.plugin.RowEditing為grid組件注入了行級別的編輯功能，編輯開始時會顯示一個小的浮動面板，每一個配置了編輯器的表格列都將以字段的形式顯示在面板上，沒有配置編輯器的列將以文本的形式顯示在面板中。其配置項有
autoCancel Boolean 設置在切換所編輯的行時是否自動取消任何未確定的數據修改，默認為true。
clicksToMoveEditor Number 設置編輯器移動到新行鼠標需要點擊的次數，默認同clicksToEdit的值一致
errorSummary Boolean 設置是否顯示一個展開所有字段驗證信息的工具提示，默認為true
修改上節的代碼，將編輯器模式切換為行編輯模式。
plugins: [
//行編輯模式
Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 }) ],
5.3 拖拽插件： Ext.grid.plugin.DragDrop
Ext.grid.plugin.DragDrop 插件為表格視圖提供了拖放功能，它自動創建了特殊的DragZone和Ext.dd.DropZone實例來協作完成拖放功能。
ddGroup String 設置拖放組名稱，拖放操作只能在相同的組內進行，默認為TreeDD
dragGroop String 設置拖拽組名稱
dropGroup String 設置釋放組名稱
enableDrag Boolean 設置是否啟用拖動功能，默認為true
enableDrop Boolean 設置是否啟用釋放功能，默認為true
示例代碼：
grid1：
viewConfig: {
plugins: [
//行編輯模式
Ext.create('Ext.grid.plugin.DragDrop',{ dragGroup: 'grid1',//拖拽組名稱 dropGroup: 'grid2'//拖放組名稱 }) ] },
grid2：
viewConfig: {
plugins: [
//行編輯模式
Ext.create('Ext.grid.plugin.DragDrop',{ dragGroup: 'grid2',//拖拽組名稱 dropGroup: 'grid1'//拖放組名稱 }) ] }
6、表格分頁
當表格數據量比較大時，對數據進行分頁顯示是常見的處理方法，在extjs中分頁只需要引入分業工具欄Ext.toolbar.Paging就可以實現基本的分頁功能。示例如下：
Ext.onReady(function(){
var itemsPerPage = 2;//指定分頁大小 var store = Ext.create('Ext.data.Store', { autoLoad: {start: 0, limit: itemsPerPage}, fields:['id', 'name', 'age'], pageSize: itemsPerPage, //設置分頁大小 proxy: { type: 'ajax', url: 'jsonServer.jsp', //請求的服務器地址 reader: { type: 'json', root: 'rows', totalProperty: 'results' } } }); //創建Grid表格組件 Ext.create('Ext.grid.Panel',{ title : 'Ext.toolbar.Paging示例', renderTo: Ext.getBody(), width:400, height:150, frame:true, store: store, columns: [//配置表格列 {header: "id", width: 30, dataIndex: 'id', sortable: true}, {header: "姓名", width: 80, dataIndex: 'name', sortable: true}, {header: "年齡", width: 80, dataIndex: 'age', sortable: true} ], bbar: [{ xtype: 'pagingtoolbar', store: store, //這里需要指定與表格相同的store displayInfo: true， displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條', emptyMsg: "當前查詢條件無數據,請重新查詢" }] }); });
服務器端返回的數據格式為:
{results:6 ,rows:[{ id : 0 , name : 'tom' , age : 24 },{ id : 1 , name : 'jack' , age : 18 }]}
最后附上本篇的源代碼： 點擊這里下載