原文地址：http://www.sencha.com/blog/mzpivotgrid-a-pivot-table-for-ext-js?mkt_tok=3RkMMJWWfF9wsRokvq3BZKXonjHpfsX77%2BsqWK%2B0lMI%2F0ER3fOvrPUfGjI4JSMZ0dvycMRAVFZl5nR9dFOOdfQ%3D%3D
在mzSolutions，我的工作是為Ext JS和Sencha Touch建立組件。在這篇文章中，我會告訴你如何在Sencha的Ext JS中使用mzPivotGrid。
什麼是樞紐分析表？Ext JS的Grid面板可以完美的顯示大型資料集，且提供了許多功能。但它不能顯示一種叫做樞紐分析表的資料類型。在談到表格的時候，就會用到樞紐分析表，因為它可以協助你組織和摘要資料並建立報告，它能使使用者根據資料做出更明智的決策。
mzPivotGrid是什嗎？mzPivotGrid是一個可以在Ext JS中用來建立樞紐分析表的組件。可以想象一下以下情形。一些銷售資料帶有以下欄位：國家country）、銷售人員salesperson）、訂單日期order date）、訂單金額order amoutnt）和訂單IDorder ID）。如果想去編輯這些資料，可輕易的通過GridPanel並使用CellEditing或RowEditing外掛程式來實現。
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1153104138-0.png" alt="" />如果要回答系列問題，要怎麼做：
可以使用mzPivotGrid來建立這些報表，以下是他們的顯示效果：650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1153105326-1.png" alt="" />650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1153106257-2.png" alt="" />650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1153103117-3.png" alt="" />
mzPivotGrid的使用方法mzPivotGrid繼承自Ext JS的Grid面板組件，因此可以使用哪些已經熟悉的功能：調整列寬、鎖定列、儲存格渲染器、行/儲存格事件等。當需要使用GridPanel沒有提供的匯總和資料透視功能的時候，就可以使用mzPivotGrid要根據銷售人員和年份分解資料集，只需要使用以下代碼設定頂部和左側的軸：
[javascript] view plaincopy
- leftAxis: [{
- width: 80,
- dataIndex: 'salesperson',
- header: 'Salesperson'
- }],
-
- topAxis: [{
- dataIndex: 'year',
- header: 'Year',
- direction: 'ASC'
- }]
由於支援多層，因此可以在頂部或左側的軸來指定他們。在這裡對行或列進行分組很方便，因此可以簡單的通過設定enableGrouping為true來實現。
現在已經在頂部和左側的軸分解了資料集，可以對儲存格的值進行合計了。可用的彙總包括以下幾種：求和、求平均值、最小值、最大值以及計數等。如果這些還不能滿足需求，可以提供自己的彙總函式。
[javascript] view plaincopy
- aggregate: [{
- measure: 'amount',
- header: 'Sales',
- aggregator: 'sum',
- align: 'right',
- width: 85,
- renderer: Ext.util.Format.numberRenderer('0,000.00')
- },{
- measure: 'orderid',
- header: 'Qnt',
- aggregator: function(records, measure, matrix, rowGroupKey, colGroupKey) {
- // do your own algorithm
- return records.length;
- },
- align: 'right',
- width: 85,
- renderer: Ext.util.Format.numberRenderer('0,000.00')
- }]
正如已經在以上例子留意到的，可以根據sales和quantity來彙總多個資料欄位。可以通過設定所有所需的集合來輕鬆紅絲線他們。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1153103228-4.png" alt="" />
用來顯示的合計的行grand totals）的行或列的設定很簡單“enableRowGrandTotals: true” or “enableColGrandTotals: true”）。分組合計group totals）也可以通過enableRowSummary和enableColSummary來社會自。樣式也很容易，甚至可通過定義儲存格渲染器來實現。
樞紐分析表可以使用Ext JS中任何類型的Store，因而在Store對象中對資料進行過濾也相當容易。這意味著可以實現一個外掛程式來處理過濾。
Ext JS的資料模型類相當的棒，可以通過它強大的convert功能來擴充模型和在自訂的分組間隔內分解資料。例如以下樣本：
[javascript] view plaincopy
- fields: [
- {name: 'orderid', type: 'int'},
- {name: 'salesperson', type: 'string'},
- {name: 'country', type: 'string'},
- {name: 'orderdate', type: 'date', dateFormat: 'd/m/Y'},
- {name: 'amount', type: 'int'},
- {
- name: 'person-range',
- convert: function(v, record){
- if(/^[a-j]/i.test(record.get('salesperson'))) return 'A-J';
- if(/^[k-s]/i.test(record.get('salesperson'))) return 'K-S';
- if(/^[t-z]/i.test(record.get('salesperson'))) return 'T-Z';
- return v;
- }
- },{
- name: 'year',
- convert: function(v, record){
- return Ext.Date.format(record.get('orderdate'), "Y");
- }
- }
- ]
-
顯示效果如下：650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1153103R7-5.png" alt="" />
一個樣本用例：
[javascript] view plaincopy
- var pivotGrid = Ext.create('Mz.pivot.Grid', {
- title: 'Pivot grid',
- height: 400,
- width: 600,
- enableLocking: false,
- enableGrouping: true,
- viewConfig: {
- trackOver: true,
- stripeRows: false
- },
- store: store,
- aggregate: [{
- measure: 'amount',
- header: 'Sales',
- aggregator: 'sum',
- align: 'right',
- width: 85,
- renderer: Ext.util.Format.numberRenderer('0,000.00')
- }],
- caption: 'Sales report',
- leftAxis: [{
- width: 80,
- dataIndex: 'salesperson',
- header: 'Sales Person'
- }],
- topAxis: [{
- dataIndex: 'year',
- header: 'Year',
- direction: 'ASC'
- }]
- });
未來由於mzPivotGrid是一個商業產品，因而它會不斷的獲得改進，並會有新的外掛程式和功能。如果需要一些特別的實現，可以隨時聯絡我們。
要瞭解
