3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * @class pivot.AxisGrid
\r
9 * @extends Ext.grid.EditorGridPanel
\r
10 * Grid used to control the dimensions in a PivotGrid axis
\r
12 pivot.AxisGrid = Ext.extend(Ext.grid.EditorGridPanel, {
\r
14 style: 'border-top-width: 1px',
\r
19 * @cfg {Array} fields The array of field names to control. Required
\r
23 * @cfg {Boolean} hasWidthField True to add a column for 'width' (e.g. for left axes)
\r
25 hasWidthField: false,
\r
28 * The Record used internally to manage the field name, sort direction and width of each dimension
\r
30 * @type Ext.data.Record
\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
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
45 header : 'Dimension',
\r
47 editor : this.buildDimensionEditor(),
\r
48 width : this.hasWidthField ? 110 : 160
\r
50 header : 'Sort Direction',
\r
51 dataIndex: 'direction',
\r
52 editor : this.buildDirectionEditor(),
\r
56 if (this.hasWidthField) {
\r
60 editor : new Ext.form.NumberField(),
\r
66 xtype: 'actioncolumn',
\r
68 icon : '../shared/icons/fam/delete.gif',
\r
70 handler: this.onRemoveDimension,
\r
71 tooltip: 'Delete this axis',
\r
77 text : 'Add Dimension',
\r
78 icon : '../shared/icons/fam/add.gif',
\r
80 handler: this.onAddDimension
\r
84 pivot.AxisGrid.superclass.initComponent.apply(this, arguments);
\r
89 * Adds a new row to the store and auto-focusses its first editor
\r
91 onAddDimension: function() {
\r
92 this.store.add(new this.record({
\r
93 field : this.fields[0],
\r
98 this.startEditing(this.store.getCount() - 1, 0);
\r
104 onRemoveDimension: function(grid, rowIndex, colIndex) {
\r
105 var store = this.store,
\r
106 record = this.store.getAt(rowIndex);
\r
108 store.remove(record);
\r
113 * @return {Ext.form.ComboBox} The editor
\r
115 buildDimensionEditor: function() {
\r
116 return new Ext.form.ComboBox({
\r
118 store: this.getFieldStore(),
\r
120 valueField : 'name',
\r
121 displayField : 'name',
\r
122 triggerAction : 'all',
\r
123 forceSelection: true
\r
129 * @return {Ext.data.Store} The store
\r
131 getFieldStore: function() {
\r
133 * @property fieldStore
\r
134 * @type Ext.data.JsonStore
\r
135 * The store bound to the combo for selecting the field
\r
137 if (this.fieldStore == undefined) {
\r
139 length = this.fields.length,
\r
142 for (i = 0; i < length; i++) {
\r
143 fields[i] = [this.fields[i]];
\r
146 this.fieldStore = new Ext.data.ArrayStore({
\r
151 return this.fieldStore;
\r
156 * Creates a local combo with options for ASC and DESC
\r
157 * @return {Ext.form.ComboBox} The editor
\r
159 buildDirectionEditor: function() {
\r
160 return new Ext.form.ComboBox({
\r
164 forceSelection: true,
\r
165 triggerAction : 'all',
\r
166 displayField : 'name',
\r
167 valueField : 'name',
\r
169 store: new Ext.data.JsonStore({
\r
171 data : [{name : 'ASC'}, {name : 'DESC'}]
\r