Ext.grid.PivotGridView

Optional function which should return a CSS class name for each cell value. This is useful when color coding cells based on their value. Defaults to undefined.

The selector used to find row bodies internally (defaults to 'div.x-grid3-row')

Optional title to be placed in the top left corner of the PivotGrid. Defaults to an empty string.

The template to use when rendering the body. Has a default template

The template to use to render each cell. Has a default template

The CSS class added to all group header cells. Defaults to 'grid-hd-group-cell'

Returns the headers to be rendered at the top of the grid. Should be a 2-dimensional array, where each item specifies the number of columns it groups (column in this case refers to normal grid columns). In the example below we have 5 city groups, which are each part of a continent supergroup. The colspan for each city group refers to the number of normal grid columns that group spans, so in this case the grid would be expected to have a total of 12 columns:

[
    {
        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.

Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters to the row template for the current row to customize how it is rendered using the rowParams parameter. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g., 'my-class another-class'). Example usage:

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';
    }
},

Parameters

• record : Record
  The Ext.data.Record corresponding to the current row.
• index : Number
  The row index.
• rowParams : Object
  A config object that is passed to the row template during rendering that allows customization of various aspects of a grid row.

  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
    An HTML fragment to be used as the expansion row's body content (defaults to '').
  • bodyStyle : String
    A CSS style specification that will be applied to the expansion row's <tr> element. (defaults to '').

  The following property will be passed in, and may be appended to:

  • tstyle : String
    A CSS style specification that willl be applied to the <table> element which encapsulates both the standard grid row, and any expansion row.
• store : Store
  The Ext.data.Store this grid is bound to

Returns

• String   a CSS class name to add to the row.

Returns the headers to be rendered on the left of the grid. Should be a 2-dimensional array, where each item specifies the number of rows it groups. In the example below we have 5 city groups, which are each part of a continent supergroup. The rowspan for each city group refers to the number of normal grid columns that group spans, so in this case the grid would be expected to have a total of 12 rows:

[
    {
        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.

Returns the total width of all row headers as specified by getRowHeaders

Refreshs the grid UI

Parameters

• headersToo : Boolean
  (optional) True to also refresh the headers

Returns

• Void

Sets the title text in the top left segment of the PivotGridView

Parameters

• title : String
  The title

Returns

• Void