examples/pivotgrid/ConfigPanel.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**\r
   8  * @class pivot.ConfigPanel\r
   9  * @extends Ext.Panel\r
  10  * A configuration panel used for modifying the properties of a PivotGrid.\r
  11  */\r
  12 pivot.ConfigPanel = Ext.extend(Ext.Panel, {\r
  13     title: 'Configure',\r
  14     layout: {\r
  15         type: 'vbox',\r
  16         align: 'stretch'\r
  17     },\r
  18     /**\r
  19      * @cfg {Ext.data.Record} record The Ext.data.Record to extract the field list from. Required\r
  20      */\r
  21 \r
  22     initComponent: function() {\r
  23         var fields = this.getRecordFields();\r
  24 \r
  25         /**\r
  26          * @property form\r
  27          * @type Ext.form.FormPanel\r
  28          * Used to set the measure and aggregation function\r
  29          */\r
  30         this.form = new Ext.Container({\r
  31             layout: 'form',\r
  32             style: 'padding: 7px',\r
  33             items: [{\r
  34                 xtype:          'combo',\r
  35                 mode:           'local',\r
  36                 triggerAction:  'all',\r
  37                 forceSelection: true,\r
  38                 editable:       false,\r
  39                 anchor:         "0",\r
  40                 fieldLabel:     'Measure',\r
  41                 ref:            '/measure',\r
  42                 name:           'measure',\r
  43                 displayField:   'name',\r
  44                 valueField:     'name',\r
  45                 value:           this.measure || this.measures[0],\r
  46                 store:           this.getMeasureStore()\r
  47             }, {\r                xtype:          'combo',\r
  48                 mode:           'local',\r
  49                 triggerAction:  'all',\r                forceSelection: true,\r                editable:       false,\r                anchor:         "0",\r                fieldLabel:     'Aggregator',\r                ref:            '/aggregator',\r
  50                 name:           'aggregator',\r
  51                 displayField:   'name',\r                valueField:     'value',\r                value:          this.aggregator,\r
  52                 store:          new Ext.data.JsonStore({\r
  53                     fields : ['name', 'value'],\r
  54                     data   : [\r
  55                         {name : 'Sum',     value: 'sum'},\r
  56                         {name : 'Count',   value: 'count'},\r
  57                         {name : 'Min',     value: 'min'},\r
  58                         {name : 'Max',     value: 'max'},\r
  59                         {name : 'Average', value: 'avg'}\r
  60                     ]\r
  61                 })\r
  62             }]\r
  63         });\r
  64 \r
  65         /**\r
  66          * @property leftAxisGrid\r
  67          * @type pivot.AxisGrid\r
  68          */\r
  69         this.leftAxisGrid = new pivot.AxisGrid({\r
  70             title : 'Left Axis',\r
  71             fields: fields,\r
  72             dimensionData: this.leftAxisDimensions || [],\r
  73             hasWidthField: true\r
  74         });\r
  75 \r
  76         /**\r
  77          * @property topAxisGrid\r
  78          * @type pivot.AxisGrid\r
  79          */\r
  80         this.topAxisGrid = new pivot.AxisGrid({\r
  81             title : 'Top Axis',\r
  82             fields: fields,\r
  83             dimensionData: this.topAxisDimensions || []\r
  84         });\r
  85 \r
  86         Ext.applyIf(this, {\r
  87             items: [\r
  88                 this.form,\r
  89                 this.topAxisGrid,\r
  90                 this.leftAxisGrid\r
  91             ],\r
  92             fbar: {\r
  93                 buttonAlign: 'left',\r
  94                 items: [{\r
  95                     icon   : '../shared/icons/fam/accept.png',\r
  96                     text   : 'Update',\r
  97                     scope  : this,\r
  98                     handler: this.updateGrid\r
  99                 }]\r
 100             }\r
 101         });\r
 102         \r
 103         pivot.ConfigPanel.superclass.initComponent.apply(this, arguments);\r
 104     },\r
 105 \r
 106     /**\r
 107      * @private\r
 108      * Retrieves the configured axis dimensions for the top and left grids and updates the PivotGrid accordingly\r
 109      */\r
 110     updateGrid: function() {\r
 111         var leftDimensions = [],\r
 112             topDimensions  = [],\r
 113             leftGridItems  = this.leftAxisGrid.store.data.items,\r
 114             topGridItems   = this.topAxisGrid.store.data.items,\r
 115             i;\r
 116 \r
 117         for (i = 0; i < leftGridItems.length; i++) {\r
 118             leftDimensions.push({\r
 119                 dataIndex: leftGridItems[i].get('field'),\r
 120                 direction: leftGridItems[i].get('direction'),\r
 121                 width    : leftGridItems[i].get('width')\r
 122             });\r
 123         }\r
 124 \r
 125         for (i = 0; i < topGridItems.length; i++) {\r
 126             topDimensions.push({\r
 127                 dataIndex: topGridItems[i].get('field'),\r
 128                 direction: topGridItems[i].get('direction')\r
 129             });\r
 130         }\r
 131 \r
 132         this.fireEvent('update', {\r
 133             leftDimensions: leftDimensions,\r
 134             topDimensions : topDimensions,\r
 135             aggregator    : this.aggregator.getValue(),\r
 136             measure       : this.measure.getValue()\r
 137         });\r
 138     },\r
 139 \r
 140     /**\r
 141      * Extracts the field names from the configured record\r
 142      * @return {Array} The set of Record fields\r
 143      */\r
 144     getRecordFields: function() {\r
 145         return Ext.pluck(this.record.prototype.fields.items, 'name');\r
 146     },\r
 147 \r
 148     /**\r
 149      * @private\r
 150      * @return {Ext.data.Store} The store\r
 151      */\r
 152     getMeasureStore: function() {\r
 153         /**\r
 154          * @property measureStore\r
 155          * @type Ext.data.JsonStore\r
 156          * The store bound to the combo for selecting the field\r
 157          */\r
 158         if (this.measureStore == undefined) {\r
 159             var fields = [],\r
 160                 measures = this.measures,\r
 161                 length   = measures.length,\r
 162                 i;\r
 163 \r
 164             for (i = 0; i < length; i++) {\r
 165                 fields[i] = [measures[i]];\r
 166             }\r
 167 \r
 168             this.measureStore = new Ext.data.ArrayStore({\r
 169                 fields: ['name'],\r
 170                 data  : fields\r
 171             });\r
 172         }\r
 173 \r
 174         return this.measureStore; \r
 175     }\r
 176 });\r
 177 \r
 178 Ext.reg('pivotconfig', pivot.ConfigPanel);