原文地址: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的Grid面板组件,因此可以使用哪些已经熟悉的功能:调整列宽、锁定列、单元格渲染器、行/单元格事件等。当需要使用GridPanel没有提供的汇总和数据透视功能的时候,就可以使用mzPivotGrid
要根据销售人员和年份分解数据集,只需要使用以下代码设置顶部和左侧的轴:
leftAxis: [{
width: 80,
dataIndex: 'salesperson',
header: 'Salesperson'
}],
topAxis: [{
dataIndex: 'year',
header: 'Year',
direction: 'ASC'
}]
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')
}]
用来显示的合计的行(grand totals)的行或列的设置很简单(“enableRowGrandTotals: true” or “enableColGrandTotals: true”)。分组合计(group totals)也可以通过enableRowSummary和enableColSummary来社会自。样式也很容易,甚至可通过定义单元格渲染器来实现。
数据透视表可以使用Ext JS中任何类型的Store,因而在Store对象中对数据进行过滤也相当容易。这意味着可以实现一个插件来处理过滤。
Ext JS的数据模型类相当的棒,可以通过它强大的convert功能来扩展模型和在自定义的分组间隔内分解数据。例如以下示例:
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 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是一个商业产品,因而它会不断的获得改进,并会有新的插件和功能。如果需要一些特别的实现,可以随时联系我们。
要了解更多关于mzPivotGrid的许可,请单击这里。