mzPivotGrid 是一个报表组件，采用这个组件之后，可以令你的应用体现更多的价值。
-
- [什么是pivot grid](#)
- [什么是mzPivotGrid](#)
- [学习资源](#)
- [与图表组件的融合](#)
### 什么是pivot grid
extjs的面板panel对于展示大批量数据来说是pefect的，并且还提供了各种各样的展示方式。但是唯一缺少一个pivot grid，当需要做数据报表的时候，pivot grid就起作用了。
### 什么是mzPivotGrid
mzPivotGrid是可以在extjs中使用的表格报表组件，你只需要引入组件就可以制作报表了。
### 学习资源
[官方网站](http://www.mzsolutions.eu/mzPivotGrid.html)： [http://www.mzsolutions.eu/mzPivotGrid.html](http://www.mzsolutions.eu/mzPivotGrid.html)
[extjs官网推荐博客](http://www.sencha.com/blog/mzpivotgrid-a-pivot-table-for-ext-js?mkt_tok=3RkMMJWWfF9wsRokvq3BZKXonjHpfsX77%2BsqWK%2B0lMI%2F0ER3fOvrPUfGjI4JSMZ0dvycMRAVFZl5nR9dFOOdfQ%3D%3D):[http://www.sencha.com/blog/mzpivotgrid-a-pivot-table-for-ext-js?mkt_tok=3RkMMJWWfF9wsRokvq3BZKXonjHpfsX77%2BsqWK%2B0lMI%2F0ER3fOvrPUfGjI4JSMZ0dvycMRAVFZl5nR9dFOOdfQ%3D%3D](http://www.sencha.com/blog/mzpivotgrid-a-pivot-table-for-ext-js?mkt_tok=3RkMMJWWfF9wsRokvq3BZKXonjHpfsX77%2BsqWK%2B0lMI%2F0ER3fOvrPUfGjI4JSMZ0dvycMRAVFZl5nR9dFOOdfQ%3D%3D)
[API DOC](http://www.mzsolutions.eu/docs/)[http://www.mzsolutions.eu/docs/](http://www.mzsolutions.eu/docs/)
### 与图表组件的融合
看效果图;
而完成这个报表仅仅需要以下这些代码即可。
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
~~~
var height = 250, width = 700;
var store = new Ext.data.JsonStore({
filters: [
function(item) {
return item.get('year') >= 2012;
}
],
proxy: {
type: 'ajax',
url: 'charts.json',
reader: {
type: 'json',
root: 'rows'
}
},
autoLoad: true,
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");
}
}
]
});
var pivotChart = null;
var pivotGrid = Ext.create('Mz.pivot.Grid', {
renderTo: document.body,
title: 'Chart integration',
height: height,
width: width,
enableLocking: false,
enableGrouping: true,
viewConfig: {
trackOver: true,
stripeRows: false
},
tbar: [{
xtype: 'combo',
itemId: 'idSelect',
fieldLabel: 'Select report',
flex: 1,
editable: false,
//value: 'r1',
store: [
['r1', 'What are the order amounts of each salesperson?'],
['r2', 'What are the order amounts of each salesperson in a specific country?'],
['r3', 'How did salespeople perform in a specific year?']
],
listeners: {
change: function(combo, newValue, oldValue, eOpts){
switch(newValue){
case 'r1':
pivotGrid.reconfigurePivot({
topAxis: []
});
break;
case 'r2':
pivotGrid.reconfigurePivot({
topAxis: [{
dataIndex: 'country',
direction: 'ASC'
}]
});
break;
case 'r3':
pivotGrid.reconfigurePivot({
topAxis: [{
dataIndex: 'year',
direction: 'ASC'
}]
});
break;
}
}
}
}],
store: store,
aggregate: [{
measure: 'amount',
header: 'Sales',
aggregator: 'sum',
align: 'right',
width: 85,
renderer: Ext.util.Format.numberRenderer('0,000.00')
}],
caption: '',
leftAxis: [{
width: 80,
id: 'salesperson',
dataIndex: 'salesperson',
header: 'Sales person'
}],
topAxis: [],
listeners: {
afterrender: function(pivotGrid){
setTimeout(function(){
var combo = pivotGrid.down('#idSelect');
combo.select(combo.getStore().getAt(0));
}, 100);
},
pivotdone: function(){
if(pivotChart){
pivotChart.destroy();
}
var fields = [],
titles = [],
columns = pivotGrid.headerCt.getGridColumns();
for(var i = 0; i < columns.length; i++){
if(!columns[i].leftAxis){
fields.push(columns[i].dataIndex);
titles.push(columns[i].text);
}
}
pivotChart = Ext.create('Ext.chart.Chart', {
renderTo: document.body,
width: width,
height: height,
store: pivotGrid.getPivotStore(),
legend: {
position: 'top'
},
axes: [{
title: 'Sales person',
type: 'Category',
fields: ['salesperson'],
position: 'bottom'
},{
title: 'Total',
fields: fields,
type: 'Numeric',
position: 'left'
}],
series: [{
type: 'column',
highlight: true,
axis: 'bottom',
xField: 'salesperson',
yField: fields,
title: titles
}]
});
}
}
});
});
~~~
看不同层次的报表只需要一次配置即可
