X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/output/Ext.grid.PivotGrid.html diff --git a/docs/output/Ext.grid.PivotGrid.html b/docs/output/Ext.grid.PivotGrid.html deleted file mode 100644 index a67697cf..00000000 --- a/docs/output/Ext.grid.PivotGrid.html +++ /dev/null @@ -1,1637 +0,0 @@ -
Properties Methods Events Config Options Direct Link 
Observable
-  Component
-    BoxComponent
-      Container
-        Panel
-          GridPanel
-            PivotGrid

Class Ext.grid.PivotGrid

Package:Ext.grid
Defined In:PivotGrid.js
Class:PivotGrid
Extends:GridPanel

The PivotGrid component enables rapid summarization of large data sets. It provides a way to reduce a large set of -data down into a format where trends and insights become more apparent. A classic example is in sales data; a company -will often have a record of all sales it makes for a given period - this will often encompass thousands of rows of -data. The PivotGrid allows you to see how well each salesperson performed, which cities generate the most revenue, -how products perform between cities and so on.

-

A PivotGrid is composed of two axes (left and top), one measure and one aggregation -function. Each axis can contain one or more dimension, which are ordered into a hierarchy. Dimensions on the -left axis can also specify a width. Each dimension in each axis can specify its sort ordering, defaulting to "ASC", -and must specify one of the fields in the Record used by the PivotGrid's -Store.

-
// This is the record representing a single sale
-var SaleRecord = Ext.data.Record.create([
-    {name: 'person',   type: 'string'},
-    {name: 'product',  type: 'string'},
-    {name: 'city',     type: 'string'},
-    {name: 'state',    type: 'string'},
-    {name: 'year',     type: 'int'},
-    {name: 'value',    type: 'int'}
-]);
-
-// A simple store that loads SaleRecord data from a url
-var myStore = new Ext.data.Store({
-    url: 'data.json',
-    autoLoad: true,
-    reader: new Ext.data.JsonReader({
-        root: 'rows',
-        idProperty: 'id'
-    }, SaleRecord)
-});
-
-// Create the PivotGrid itself, referencing the store
-var pivot = new Ext.grid.PivotGrid({
-    store     : myStore,
-    aggregator: 'sum',
-    measure   : 'value',
-
-    leftAxis: [
-        {
-            width: 60,
-            dataIndex: 'product'
-        },
-        {
-            width: 120,
-            dataIndex: 'person',
-            direction: 'DESC'
-        }
-    ],
-
-    topAxis: [
-        {
-            dataIndex: 'year'
-        }
-    ]
-});
-

The specified measure is the field from SaleRecord that is extracted from each combination -of product and person (on the left axis) and year on the top axis. There may be several SaleRecords in the -data set that share this combination, so an array of measure fields is produced. This array is then -aggregated using the aggregator function.

-

The default aggregator function is sum, which simply adds up all of the extracted measure values. Other -built-in aggregator functions are count, avg, min and max. In addition, you can specify your own function. -In this example we show the code used to sum the measures, but you can return any value you like. See -aggregator for more details.

-
new Ext.grid.PivotGrid({
-    aggregator: function(records, measure) {
-        var length = records.length,
-            total  = 0,
-            i;
-
-        for (i = 0; i < length; i++) {
-            total += records[i].get(measure);
-        }
-
-        return total;
-    },
-    
-    renderer: function(value) {
-        return Math.round(value);
-    },
-    
-    //your normal config here
-});
-

Renderers

-

PivotGrid optionally accepts a renderer function which can modify the data in each cell before it -is rendered. The renderer is passed the value that would usually be placed in the cell and is expected to return -the new value. For example let's imagine we had height data expressed as a decimal - here's how we might use a -renderer to display the data in feet and inches notation:

-
new Ext.grid.PivotGrid({
-    //in each case the value is a decimal number of feet
-    renderer  : function(value) {
-        var feet   = Math.floor(value),
-            inches = Math.round((value - feet) * 12);
-
-        return String.format("{0}' {1}\"", feet, inches);
-    },
-    //normal config here
-});
-

Reconfiguring

-

All aspects PivotGrid's configuration can be updated at runtime. It is easy to change the measure, -aggregation function, left and top axes and refresh the grid.

-

In this case we reconfigure the PivotGrid to have city and year as the top axis dimensions, rendering the average sale -value into the cells:

-
//the left axis can also be changed
-pivot.topAxis.setDimensions([
-    {dataIndex: 'city', direction: 'DESC'},
-    {dataIndex: 'year', direction: 'ASC'}
-]);
-
-pivot.setMeasure('value');
-pivot.setAggregator('avg');
-
-pivot.view.refresh(true);
-

See the PivotAxis documentation for further detail on reconfiguring axes.

Config Options

Config OptionsDefined By
 autoExpandMax : Number
The maximum width the autoExpandColumn -can have (if enabled). Defaults to 1000.
GridPanel
 autoExpandMin : Number
The minimum width the autoExpandColumn -can have (if enabled). Defaults to 50.
GridPanel
 cm : Object
Shorthand for colModel.
GridPanel
 colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
 collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to -false).
Panel
 collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to -'x-panel-collapsed').
Panel
 columnLines : Boolean
true to add css for column separation lines. -Default is false.
GridPanel
 data : Mixed
The initial set of data to apply to the tpl to -update the content area of the Component.
Component
 ddGroup : String
The DD group this GridPanel belongs to. Defaults to 'GridDD' if not specified.
GridPanel
 disableSelection : Boolean

true to disable selections in the grid. Defaults to false.

-

Ignored if a SelectionModel is specified.

GridPanel
 enableColumnHide : Boolean
Defaults to true to enable hiding of columns -with the header menu.
GridPanel
 enableColumnMove : Boolean
Defaults to true to enable drag and drop reorder of columns. false -to turn off column reordering via drag drop.
GridPanel
 enableColumnResize : Boolean
false to turn off column resizing for the whole grid. Defaults to true.
GridPanel
 enableHdMenu : Boolean
Defaults to true to enable the drop down button for menu in the headers.
GridPanel
 headerAsText : Boolean
true to display the panel title in the header, -false to hide it (defaults to true).
Panel
 hidden : Boolean
Render this component hidden (default is false). If true, the -hide method will be called internally.
Component
 hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, -false to display it (defaults to false).
Panel
 hideHeaders : Boolean
True to hide the grid's header. Defaults to false.
GridPanel
 loadMask : Object
An Ext.LoadMask config or true to mask the grid while -loading. Defaults to false.
GridPanel
 maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
 measure : String
The field to extract from each Record when pivoting around the two axes. See the class -introduction docs for usage
PivotGrid
 minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
 minColumnWidth : Number
The minimum width a column can be resized to. Defaults to 25.
GridPanel
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
Panel
 sm : Object
Shorthand for selModel.
GridPanel
 store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required).
GridPanel
 trackMouseOver : Boolean
True to highlight rows when the mouse is over. Default is true -for GridPanel, but false for EditorGridPanel.
GridPanel
 view : Object
The Ext.grid.GridView used by the grid. This can be set -before a call to render().
GridPanel
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 buttons : Array
This Panel's Array of buttons as created from the buttons -config property. Read only.
Panel
 bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements -(tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
 collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 leftAxis : Ext.grid.PivotAxis
The configured Ext.grid.PivotAxis used as the left Axis for this Pivot Grid
PivotGrid
 rendered : Boolean
True if this component has been rendered. Read-only.
Component
 topAxis : Ext.grid.PivotAxis
The configured Ext.grid.PivotAxis used as the top Axis for this Pivot Grid
PivotGrid

Public Methods

MethodDefined By

Public Events

EventDefined By
\ No newline at end of file