extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
88 lines (77 loc) • 2.29 kB
JavaScript
/**
*
* This example shows how to create a pivot grid and integrate it with Sencha Charts.
*
*/
Ext.define('KitchenSink.view.pivot.ChartIntegration', {
extend: 'Ext.panel.Panel',
xtype: 'chart-pivot-grid',
controller: 'chartintegration',
requires: [
'KitchenSink.store.pivot.Sales',
'KitchenSink.view.pivot.ChartIntegrationController'
],
//<example>
otherContent: [{
type: 'Controller',
path: 'classic/samples/view/pivot/ChartIntegrationController.js'
},{
type: 'Model',
path: 'classic/samples/model/pivot/Sale.js'
},{
type: 'Store',
path: 'classic/samples/store/pivot/Sales.js'
}],
profiles: {
classic: {
width: 600
},
neptune: {
width: 750
}
},
//</example>
title: 'Pivot Grid with chart integration',
width: '${width}',
height: 450,
collapsible: true,
layout: 'border',
items: [{
xtype: 'pivotgrid',
region: 'center',
flex: 1,
selModel: {
type: 'cellmodel'
},
matrix: {
type: 'local',
store: {
type: 'sales'
},
// Configure the aggregate dimensions. Multiple dimensions are supported.
aggregate: [{
dataIndex: 'value',
header: 'Total',
aggregator: 'sum',
flex: 1
}],
// Configure the left axis dimensions that will be used to generate the grid rows
leftAxis: [{
dataIndex: 'person',
header: 'Person',
flex: 1
}],
// Configure the top axis dimensions that will be used to generate the columns.
// When columns are generated the aggregate dimensions are also used. If multiple aggregation dimensions
// are defined then each top axis result will have in the end a column header with children
// columns for each aggregate dimension defined.
topAxis: [{
dataIndex: 'year',
header: 'Year'
}]
},
listeners: {
pivotdone: 'onPivotDone'
}
}]
});