new Ext.grid.PivotGrid({
viewConfig: {
title: 'My Pivot Grid',
getCellCls: function(value) {
return value > 10 'red' : 'green';
}
}
});
Currently title and getCellCls are the only configuration options accepted by PivotGridView. All other interaction is performed via the PivotGrid class.
[
{
items: [
{header: 'England', colspan: 5},
{header: 'USA', colspan: 3}
]
},
{
items: [
{header: 'London', colspan: 2},
{header: 'Cambridge', colspan: 3},
{header: 'Palo Alto', colspan: 3}
]
}
]
In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country ->
State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure.viewConfig: {
forceFit: true,
showPreview: true, // custom property
enableRowBody: true, // required to create a second, full-width row to show expanded Record data
getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
if(this.showPreview){
rp.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
If enableRowBody is configured true, then the following properties may be set by this function, and will be used to render a full-width expansion row below each grid row:
body
: String bodyStyle
: String tstyle
: String [
{
width: 90,
items: [
{header: 'England', rowspan: 5},
{header: 'USA', rowspan: 3}
]
},
{
width: 50,
items: [
{header: 'London', rowspan: 2},
{header: 'Cambridge', rowspan: 3},
{header: 'Palo Alto', rowspan: 3}
]
}
]
In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country ->
State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure.