Upgrade to ExtJS 3.3.0 - Released 10/06/2010

[extjs.git] / examples / pivotgrid / AxisGrid.js

diff --git a/examples/pivotgrid/AxisGrid.js b/examples/pivotgrid/AxisGrid.js
new file mode 100644 (file)
index 0000000..0e241ed
--- /dev/null
+++ b/examples/pivotgrid/AxisGrid.js
@@ -0,0 +1,175 @@
+/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**\r
+ * @class pivot.AxisGrid\r
+ * @extends Ext.grid.EditorGridPanel\r
+ * Grid used to control the dimensions in a PivotGrid axis\r
+ */\r
+pivot.AxisGrid = Ext.extend(Ext.grid.EditorGridPanel, {\r
+    border: false,\r
+    style: 'border-top-width: 1px',\r
+    flex: 1,\r
+    clicksToEdit: 1,\r
+\r
+    /**\r
+     * @cfg {Array} fields The array of field names to control. Required\r
+     */\r
+    \r
+    /**\r
+     * @cfg {Boolean} hasWidthField True to add a column for 'width' (e.g. for left axes)\r
+     */\r
+    hasWidthField: false,\r
+    \r
+    /**\r
+     * The Record used internally to manage the field name, sort direction and width of each dimension\r
+     * @property record\r
+     * @type Ext.data.Record\r
+     */\r
+    record: Ext.data.Record.create([\r
+        {name: 'field',     type: 'string'},\r
+        {name: 'direction', type: 'string'},\r
+        {name: 'width',     type: 'int'}\r
+    ]),\r
+\r
+    initComponent: function() {\r
+        this.store = new Ext.data.Store({\r
+            data  : this.dimensionData || [], \r
+            reader: new Ext.data.JsonReader({}, this.record)\r
+        });\r
+\r
+        var columns = [{\r
+            header   : 'Dimension',\r
+            dataIndex: 'field',\r
+            editor   : this.buildDimensionEditor(),\r
+            width    : this.hasWidthField ? 110 : 160\r
+        }, {\r
+            header   : 'Sort Direction',\r
+            dataIndex: 'direction',\r
+            editor   : this.buildDirectionEditor(),\r
+            width    : 80\r
+        }];\r
+\r
+        if (this.hasWidthField) {\r
+            columns.push({\r
+                header   : 'Width',\r
+                dataIndex: 'width',\r
+                editor   : new Ext.form.NumberField(),\r
+                width    : 50\r
+            });\r
+        }\r
+\r
+        columns.push({\r
+            xtype: 'actioncolumn',\r
+            width: 30,\r
+            icon   : '../shared/icons/fam/delete.gif',\r
+            scope  : this,\r
+            handler: this.onRemoveDimension,\r
+            tooltip: 'Delete this axis',\r
+            editable: false\r
+        });\r
+\r
+        Ext.applyIf(this, {\r
+            bbar: [{\r
+                text   : 'Add Dimension',\r
+                icon   : '../shared/icons/fam/add.gif',\r
+                scope  : this,\r
+                handler: this.onAddDimension\r
+            }],\r
+            columns: columns\r
+        });\r
+        pivot.AxisGrid.superclass.initComponent.apply(this, arguments);\r
+    },\r
+\r
+    /**\r
+     * @private\r
+     * Adds a new row to the store and auto-focusses its first editor\r
+     */\r
+    onAddDimension: function() {\r
+        this.store.add(new this.record({\r
+            field    : this.fields[0],\r
+            direction: "ASC",\r
+            width    : 80\r
+        }));\r
+\r
+        this.startEditing(this.store.getCount() - 1, 0);\r
+    },\r
+\r
+    /**\r
+     * @private\r
+     */\r
+    onRemoveDimension: function(grid, rowIndex, colIndex) {\r
+        var store  = this.store,\r
+            record = this.store.getAt(rowIndex);\r
+        \r
+        store.remove(record);\r
+    },\r
+\r
+    /**\r
+     * @private\r
+     * @return {Ext.form.ComboBox} The editor\r
+     */\r
+    buildDimensionEditor: function() {\r
+        return new Ext.form.ComboBox({\r
+            mode : 'local',\r
+            store: this.getFieldStore(),\r
+            editable      : false,\r
+            valueField    : 'name',\r
+            displayField  : 'name',\r
+            triggerAction : 'all',\r
+            forceSelection: true\r
+        });\r
+    },\r
+\r
+    /**\r
+     * @private\r
+     * @return {Ext.data.Store} The store\r
+     */\r
+    getFieldStore: function() {\r
+        /**\r
+         * @property fieldStore\r
+         * @type Ext.data.JsonStore\r
+         * The store bound to the combo for selecting the field\r
+         */\r
+        if (this.fieldStore == undefined) {\r
+            var fields = [],\r
+                length = this.fields.length,\r
+                i;\r
+\r
+            for (i = 0; i < length; i++) {\r
+                fields[i] = [this.fields[i]];\r
+            }\r
+\r
+            this.fieldStore = new Ext.data.ArrayStore({\r
+                fields: ['name'],\r
+                data  : fields\r
+            });\r
+        }\r
+        return this.fieldStore; \r
+    },\r
+\r
+    /**\r
+     * @private\r
+     * Creates a local combo with options for ASC and DESC\r
+     * @return {Ext.form.ComboBox} The editor\r
+     */\r
+    buildDirectionEditor: function() {\r
+        return new Ext.form.ComboBox({\r
+            name          : 'name',\r
+            mode          : 'local',\r
+            editable      : false,\r
+            forceSelection: true,\r
+            triggerAction : 'all',\r
+            displayField  : 'name',\r
+            valueField    : 'name',\r
+            value         : 'ASC',\r
+            store: new Ext.data.JsonStore({\r
+                fields : ['name'],\r
+                data   : [{name : 'ASC'}, {name : 'DESC'}]\r
+            })\r
+        });\r
+    }\r
+});
\ No newline at end of file