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