X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/docs/output/Ext.grid.PivotGrid.html diff --git a/docs/output/Ext.grid.PivotGrid.html b/docs/output/Ext.grid.PivotGrid.html new file mode 100644 index 00000000..2d820b41 --- /dev/null +++ b/docs/output/Ext.grid.PivotGrid.html @@ -0,0 +1,1631 @@ +
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