examples/pivotgrid/AxisGrid.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.AxisGrid\r
   9  * @extends Ext.grid.EditorGridPanel\r
  10  * Grid used to control the dimensions in a PivotGrid axis\r
  11  */\r
  12 pivot.AxisGrid = Ext.extend(Ext.grid.EditorGridPanel, {\r
  13     border: false,\r
  14     style: 'border-top-width: 1px',\r
  15     flex: 1,\r
  16     clicksToEdit: 1,\r
  17 \r
  18     /**\r
  19      * @cfg {Array} fields The array of field names to control. Required\r
  20      */\r
  21     \r
  22     /**\r
  23      * @cfg {Boolean} hasWidthField True to add a column for 'width' (e.g. for left axes)\r
  24      */\r
  25     hasWidthField: false,\r
  26     \r
  27     /**\r
  28      * The Record used internally to manage the field name, sort direction and width of each dimension\r
  29      * @property record\r
  30      * @type Ext.data.Record\r
  31      */\r
  32     record: Ext.data.Record.create([\r
  33         {name: 'field',     type: 'string'},\r
  34         {name: 'direction', type: 'string'},\r
  35         {name: 'width',     type: 'int'}\r
  36     ]),\r
  37 \r
  38     initComponent: function() {\r
  39         this.store = new Ext.data.Store({\r
  40             data  : this.dimensionData || [], \r
  41             reader: new Ext.data.JsonReader({}, this.record)\r
  42         });\r
  43 \r
  44         var columns = [{\r
  45             header   : 'Dimension',\r
  46             dataIndex: 'field',\r
  47             editor   : this.buildDimensionEditor(),\r
  48             width    : this.hasWidthField ? 110 : 160\r
  49         }, {\r
  50             header   : 'Sort Direction',\r
  51             dataIndex: 'direction',\r
  52             editor   : this.buildDirectionEditor(),\r
  53             width    : 80\r
  54         }];\r
  55 \r
  56         if (this.hasWidthField) {\r
  57             columns.push({\r
  58                 header   : 'Width',\r
  59                 dataIndex: 'width',\r
  60                 editor   : new Ext.form.NumberField(),\r
  61                 width    : 50\r
  62             });\r
  63         }\r
  64 \r
  65         columns.push({\r
  66             xtype: 'actioncolumn',\r
  67             width: 30,\r
  68             icon   : '../shared/icons/fam/delete.gif',\r
  69             scope  : this,\r
  70             handler: this.onRemoveDimension,\r
  71             tooltip: 'Delete this axis',\r
  72             editable: false\r
  73         });\r
  74 \r
  75         Ext.applyIf(this, {\r
  76             bbar: [{\r
  77                 text   : 'Add Dimension',\r
  78                 icon   : '../shared/icons/fam/add.gif',\r
  79                 scope  : this,\r
  80                 handler: this.onAddDimension\r
  81             }],\r
  82             columns: columns\r
  83         });\r
  84         pivot.AxisGrid.superclass.initComponent.apply(this, arguments);\r
  85     },\r
  86 \r
  87     /**\r
  88      * @private\r
  89      * Adds a new row to the store and auto-focusses its first editor\r
  90      */\r
  91     onAddDimension: function() {\r
  92         this.store.add(new this.record({\r
  93             field    : this.fields[0],\r
  94             direction: "ASC",\r
  95             width    : 80\r
  96         }));\r
  97 \r
  98         this.startEditing(this.store.getCount() - 1, 0);\r
  99     },\r
 100 \r
 101     /**\r
 102      * @private\r
 103      */\r
 104     onRemoveDimension: function(grid, rowIndex, colIndex) {\r
 105         var store  = this.store,\r
 106             record = this.store.getAt(rowIndex);\r
 107         \r
 108         store.remove(record);\r
 109     },\r
 110 \r
 111     /**\r
 112      * @private\r
 113      * @return {Ext.form.ComboBox} The editor\r
 114      */\r
 115     buildDimensionEditor: function() {\r
 116         return new Ext.form.ComboBox({\r
 117             mode : 'local',\r
 118             store: this.getFieldStore(),\r
 119             editable      : false,\r
 120             valueField    : 'name',\r
 121             displayField  : 'name',\r
 122             triggerAction : 'all',\r
 123             forceSelection: true\r
 124         });\r
 125     },\r
 126 \r
 127     /**\r
 128      * @private\r
 129      * @return {Ext.data.Store} The store\r
 130      */\r
 131     getFieldStore: function() {\r
 132         /**\r
 133          * @property fieldStore\r
 134          * @type Ext.data.JsonStore\r
 135          * The store bound to the combo for selecting the field\r
 136          */\r
 137         if (this.fieldStore == undefined) {\r
 138             var fields = [],\r
 139                 length = this.fields.length,\r
 140                 i;\r
 141 \r
 142             for (i = 0; i < length; i++) {\r
 143                 fields[i] = [this.fields[i]];\r
 144             }\r
 145 \r
 146             this.fieldStore = new Ext.data.ArrayStore({\r
 147                 fields: ['name'],\r
 148                 data  : fields\r
 149             });\r
 150         }\r
 151         return this.fieldStore; \r
 152     },\r
 153 \r
 154     /**\r
 155      * @private\r
 156      * Creates a local combo with options for ASC and DESC\r
 157      * @return {Ext.form.ComboBox} The editor\r
 158      */\r
 159     buildDirectionEditor: function() {\r
 160         return new Ext.form.ComboBox({\r
 161             name          : 'name',\r
 162             mode          : 'local',\r
 163             editable      : false,\r
 164             forceSelection: true,\r
 165             triggerAction : 'all',\r
 166             displayField  : 'name',\r
 167             valueField    : 'name',\r
 168             value         : 'ASC',\r
 169             store: new Ext.data.JsonStore({\r
 170                 fields : ['name'],\r
 171                 data   : [{name : 'ASC'}, {name : 'DESC'}]\r
 172             })\r
 173         });\r
 174     }\r
 175 });