PageRenderTime 74ms CodeModel.GetById 25ms app.highlight 41ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/src/grid/column/Column.js

https://bitbucket.org/srogerf/javascript
JavaScript | 880 lines | 457 code | 113 blank | 310 comment | 107 complexity | 61a535aae6acc79f3b0315ff3802a85a MD5 | raw file
  1/**
  2 * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses
  3 * both the grid header configuration as well as displaying data within the grid itself. If the
  4 * {@link #columns} configuration is specified, this column will become a column group and can
  5 * contain other columns inside. In general, this class will not be created directly, rather
  6 * an array of column configurations will be passed to the grid:
  7 *
  8 *     @example
  9 *     Ext.create('Ext.data.Store', {
 10 *         storeId:'employeeStore',
 11 *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
 12 *         data:[
 13 *             {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
 14 *             {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
 15 *             {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
 16 *             {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
 17 *             {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
 18 *         ]
 19 *     });
 20 *
 21 *     Ext.create('Ext.grid.Panel', {
 22 *         title: 'Column Demo',
 23 *         store: Ext.data.StoreManager.lookup('employeeStore'),
 24 *         columns: [
 25 *             {text: 'First Name',  dataIndex:'firstname'},
 26 *             {text: 'Last Name',  dataIndex:'lastname'},
 27 *             {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},
 28 *             {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
 29 *         ],
 30 *         width: 400,
 31 *         forceFit: true,
 32 *         renderTo: Ext.getBody()
 33 *     });
 34 *
 35 * # Convenience Subclasses
 36 *
 37 * There are several column subclasses that provide default rendering for various data types
 38 *
 39 *  - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline
 40 *  - {@link Ext.grid.column.Boolean}: Renders for boolean values
 41 *  - {@link Ext.grid.column.Date}: Renders for date values
 42 *  - {@link Ext.grid.column.Number}: Renders for numeric values
 43 *  - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data
 44 *
 45 * # Setting Sizes
 46 *
 47 * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either
 48 * be given an explicit width value or a flex configuration. If no width is specified the grid will
 49 * automatically the size the column to 100px. For column groups, the size is calculated by measuring
 50 * the width of the child columns, so a width option should not be specified in that case.
 51 *
 52 * # Header Options
 53 *
 54 *  - {@link #text}: Sets the header text for the column
 55 *  - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu
 56 *  - {@link #hideable}: Specifies whether the column can be hidden using the column menu
 57 *  - {@link #menuDisabled}: Disables the column header menu
 58 *  - {@link #cfg-draggable}: Specifies whether the column header can be reordered by dragging
 59 *  - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping}
 60 *
 61 * # Data Options
 62 *
 63 *  - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column.
 64 *  - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid
 65 */
 66Ext.define('Ext.grid.column.Column', {
 67    extend: 'Ext.grid.header.Container',
 68    alias: 'widget.gridcolumn',
 69    requires: ['Ext.util.KeyNav', 'Ext.grid.ColumnComponentLayout', 'Ext.grid.ColumnLayout'],
 70    alternateClassName: 'Ext.grid.Column',
 71
 72    baseCls: Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable',
 73
 74    // Not the standard, automatically applied overCls because we must filter out overs of child headers.
 75    hoverCls: Ext.baseCSSPrefix + 'column-header-over',
 76
 77    handleWidth: 5,
 78
 79    sortState: null,
 80
 81    possibleSortStates: ['ASC', 'DESC'],
 82
 83    childEls: [
 84        'titleEl', 'triggerEl', 'textEl'
 85    ],
 86
 87    renderTpl:
 88        '<div id="{id}-titleEl" class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
 89            '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text">' +
 90                '{text}' +
 91            '</span>' +
 92            '<tpl if="!menuDisabled">'+
 93                '<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div>'+
 94            '</tpl>' +
 95        '</div>' +
 96        '{%this.renderContainer(out,values)%}',
 97
 98    /**
 99     * @cfg {Object[]} columns
100     * An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the
101     * `columns` config.
102     *
103     * Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out
104     * of a group. Note that if all sub columns are dragged out of a group, the group is destroyed.
105     */
106
107    /**
108     * @cfg {String} dataIndex
109     * The name of the field in the grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from
110     * which to draw the column's value. **Required.**
111     */
112    dataIndex: null,
113
114    /**
115     * @cfg {String} text
116     * The header text to be used as innerHTML (html tags are accepted) to display in the Grid.
117     * **Note**: to have a clickable header with no text displayed you can use the default of `&#160;` aka `&nbsp;`.
118     */
119    text: '&#160;',
120
121    /**
122     * @cfg {String} [emptyCellText=undefined]
123     * The text to diplay in empty cells (cells with a value of `undefined`, `null`, or `''`).
124     *
125     * Defaults to `&#160;` aka `&nbsp;`.
126     */
127    emptyCellText: '&#160;',
128
129    /**
130     * @cfg {Boolean} sortable
131     * False to disable sorting of this column. Whether local/remote sorting is used is specified in
132     * `{@link Ext.data.Store#remoteSort}`.
133     */
134    sortable: true,
135
136    /**
137     * @cfg {Boolean} groupable
138     * If the grid uses a {@link Ext.grid.feature.Grouping}, this option may be used to disable the header menu
139     * item to group by the column selected. By default, the header menu group option is enabled. Set to false to
140     * disable (but still show) the group option in the header menu for the column.
141     */
142
143    /**
144     * @cfg {Boolean} fixed
145     * True to prevent the column from being resizable.
146     * @deprecated
147     */
148
149    /**
150     * @cfg {Boolean} resizable
151     * False to prevent the column from being resizable.
152     */
153    resizable: true,
154
155    /**
156     * @cfg {Boolean} hideable
157     * False to prevent the user from hiding this column.
158     */
159    hideable: true,
160
161    /**
162     * @cfg {Boolean} menuDisabled
163     * True to disable the column header menu containing sort/hide options.
164     */
165    menuDisabled: false,
166
167    /**
168     * @cfg {Function} renderer
169     * A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.)
170     * before it is rendered. Example:
171     *
172     *     {
173     *         renderer: function(value){
174     *             if (value === 1) {
175     *                 return '1 person';
176     *             }
177     *             return value + ' people';
178     *         }
179     *     }
180     *
181     * @cfg {Object} renderer.value The data value for the current cell
182     * @cfg {Object} renderer.metaData A collection of metadata about the current cell; can be used or modified
183     * by the renderer. Recognized properties are: tdCls, tdAttr, and style.
184     * @cfg {Ext.data.Model} renderer.record The record for the current row
185     * @cfg {Number} renderer.rowIndex The index of the current row
186     * @cfg {Number} renderer.colIndex The index of the current column
187     * @cfg {Ext.data.Store} renderer.store The data store
188     * @cfg {Ext.view.View} renderer.view The current view
189     * @cfg {String} renderer.return The HTML string to be rendered.
190     */
191    renderer: false,
192    
193    /**
194     * @cfg {Function} editRenderer
195     * A renderer to be used in conjunction with {@link Ext.grid.plugin.RowEditing RowEditing}. This renderer is used to
196     * display a custom value for non-editable fields.
197     */
198    editRenderer: false,
199
200    /**
201     * @cfg {String} align
202     * Sets the alignment of the header and rendered columns.
203     * Possible values are: `'left'`, `'center'`, and `'right'`.
204     */
205    align: 'left',
206
207    /**
208     * @cfg {Boolean} draggable
209     * False to disable drag-drop reordering of this column.
210     */
211    draggable: true,
212
213    // Header does not use the typical ComponentDraggable class and therefore we
214    // override this with an emptyFn. It is controlled at the HeaderDragZone.
215    initDraggable: Ext.emptyFn,
216
217    /**
218     * @cfg {String} tdCls
219     * A CSS class names to apply to the table cells for this column.
220     */
221
222    /**
223     * @cfg {Object/String} editor
224     * An optional xtype or config object for a {@link Ext.form.field.Field Field} to use for editing.
225     * Only applicable if the grid is using an {@link Ext.grid.plugin.Editing Editing} plugin.
226     */
227
228    /**
229     * @cfg {Object/String} field
230     * Alias for {@link #editor}.
231     * @deprecated 4.0.5 Use {@link #editor} instead.
232     */
233
234    /**
235     * @property {Ext.Element} triggerEl
236     * Element that acts as button for column header dropdown menu.
237     */
238
239    /**
240     * @property {Ext.Element} textEl
241     * Element that contains the text in column header.
242     */
243
244    /**
245     * @property {Boolean} isHeader
246     * Set in this class to identify, at runtime, instances which are not instances of the
247     * HeaderContainer base class, but are in fact, the subclass: Header.
248     */
249    isHeader: true,
250
251    componentLayout: 'columncomponent',
252    
253    // We need to override the default component resizable behaviour here
254    initResizable: Ext.emptyFn,
255
256    initComponent: function() {
257        var me = this,
258            renderer;
259
260        if (Ext.isDefined(me.header)) {
261            me.text = me.header;
262            delete me.header;
263        }
264
265        // Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the
266        // HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes
267        // method extends the available layout space to accommodate the "desiredWidth" of all the columns.
268        if (me.flex) {
269            me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
270        }
271        // Non-flexed Headers may never be squeezed in the event of a shortfall so
272        // always set their minWidth to their current width.
273        else {
274            //me.minWidth = me.width;
275            // we cannot set minWidth as that is a user controlled value... we need to not
276            // apply shortfall squeeze instead
277        }
278
279        if (!me.triStateSort) {
280            me.possibleSortStates.length = 2;
281        }
282
283        // A group header; It contains items which are themselves Headers
284        if (Ext.isDefined(me.columns)) {
285            me.isGroupHeader = true;
286
287            //<debug>
288            if (me.dataIndex) {
289                Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
290            }
291            if ((me.width && me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) {
292                Ext.Error.raise('Ext.grid.column.Column: Group header does not support setting explicit widths or flexs. The group header width is calculated by the sum of its children.');
293            }
294            //</debug>
295
296            // The headers become child items
297            me.items = me.columns;
298            delete me.columns;
299            delete me.flex;
300            delete me.width;
301            me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
302            me.sortable = false;
303            me.resizable = false;
304            me.align = 'center';
305        } else {
306            // If we are not a group header, then this is not to be used as a container, and must not have a container layout executed, and it must
307            // acquire layout height from DOM content, not from child items.
308            me.isContainer = false;
309        }
310        me.addCls(Ext.baseCSSPrefix + 'column-header-align-' + me.align);
311        
312        renderer = me.renderer;
313        if (renderer) {
314            // When specifying a renderer as a string, it always resolves
315            // to Ext.util.Format
316            if (typeof renderer == 'string') {
317                me.renderer = Ext.util.Format[renderer];
318            }
319            me.hasCustomRenderer = true;
320        } else if (me.defaultRenderer) {
321            me.scope = me;
322            me.renderer = me.defaultRenderer;
323        }
324
325        // Initialize as a HeaderContainer
326        me.callParent(arguments);
327
328        me.on({
329            element:  'el',
330            click:    me.onElClick,
331            dblclick: me.onElDblClick,
332            scope:    me
333        });
334        me.on({
335            element:    'titleEl',
336            mouseenter: me.onTitleMouseOver,
337            mouseleave: me.onTitleMouseOut,
338            scope:      me
339        });
340    },
341
342    onAdd: function(childHeader) {
343        childHeader.isSubHeader = true;
344        childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
345        this.callParent(arguments);
346    },
347
348    onRemove: function(childHeader) {
349        childHeader.isSubHeader = false;
350        childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
351        this.callParent(arguments);
352    },
353
354    initRenderData: function() {
355        var me = this;
356        return Ext.applyIf(me.callParent(arguments), {
357            text: me.text,
358            menuDisabled: me.menuDisabled
359        });
360    },
361
362    applyColumnState: function (state) {
363        var me = this,
364            defined = Ext.isDefined;
365            
366        // apply any columns
367        me.applyColumnsState(state.columns);
368
369        // Only state properties which were saved should be restored.
370        // (Only user-changed properties were saved by getState)
371        if (defined(state.hidden)) {
372            me.hidden = state.hidden;
373        }
374        if (defined(state.locked)) {
375            me.locked = state.locked;
376        }
377        if (defined(state.sortable)) {
378            me.sortable = state.sortable;
379        }
380        if (defined(state.width)) {
381            delete me.flex;
382            me.width = state.width;
383        } else if (defined(state.flex)) {
384            delete me.width;
385            me.flex = state.flex;
386        }
387    },
388
389    getColumnState: function () {
390        var me = this,
391            items = me.items.items,
392            // Check for the existence of items, since column.Action won't have them
393            iLen = items ? items.length : 0,
394            i,
395            columns = [],
396            state = {
397                id: me.headerId
398            };
399
400        me.savePropsToState(['hidden', 'sortable', 'locked', 'flex', 'width'], state);
401        
402        if (me.isGroupHeader) {
403            for (i = 0; i < iLen; i++) {
404                columns.push(items[i].getColumnState());
405            }
406
407            if (columns.length) {
408                state.columns = columns;
409            }
410        } else if (me.isSubHeader && me.ownerCt.hidden) {
411            // don't set hidden on the children so they can auto height
412            delete me.hidden;
413        }
414
415        if ('width' in state) {
416            delete state.flex; // width wins
417        }
418        return state;
419    },
420
421    /**
422     * Sets the header text for this Column.
423     * @param {String} text The header to display on this Column.
424     */
425    setText: function(text) {
426        this.text = text;
427        if (this.rendered) {
428            this.textEl.update(text);
429        }
430    },
431
432    // Find the topmost HeaderContainer: An ancestor which is NOT a Header.
433    // Group Headers are themselves HeaderContainers
434    getOwnerHeaderCt: function() {
435        return this.up(':not([isHeader])');
436    },
437
438    /**
439     * Returns the index of this column only if this column is a base level Column. If it
440     * is a group column, it returns `false`.
441     * @return {Number}
442     */
443    getIndex: function() {
444        return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
445    },
446    
447    /**
448     * Returns the index of this column in the list of *visible* columns only if this column is a base level Column. If it
449     * is a group column, it returns `false`.
450     * @return {Number}
451     */
452    getVisibleIndex: function() {
453        return this.isGroupColumn ? false : Ext.Array.indexOf(this.getOwnerHeaderCt().getVisibleGridColumns(), this);
454    },
455
456    beforeRender: function() {
457        var me = this,
458            grid = me.up('tablepanel');
459
460        me.callParent();
461
462        // Disable the menu if there's nothing to show in the menu, ie:
463        // Column cannot be sorted, grouped or locked, and there are no grid columns which may be hidden
464        if (grid && (!me.sortable || grid.sortableColumns === false) && !me.groupable &&
465                     !me.lockable && (grid.enableColumnHide === false ||
466                     !me.getOwnerHeaderCt().getHideableColumns().length)) {
467            me.menuDisabled = true;
468        }
469    },
470
471    afterRender: function() {
472        var me = this,
473            el = me.el;
474
475        me.callParent(arguments);
476
477        if (me.overCls) {
478            el.addClsOnOver(me.overCls);
479        }
480
481        // BrowserBug: Ie8 Strict Mode, this will break the focus for this browser,
482        // must be fixed when focus management will be implemented.
483        if (!Ext.isIE8 || !Ext.isStrict) {
484            me.mon(me.getFocusEl(), {
485                focus: me.onTitleMouseOver,
486                blur: me.onTitleMouseOut,
487                scope: me
488            });
489        }
490
491        me.keyNav = new Ext.util.KeyNav(el, {
492            enter: me.onEnterKey,
493            down: me.onDownKey,
494            scope: me
495        });
496    },
497
498    /**
499     * Sets the width of this Column.
500     * @param {Number} width New width.
501     */
502    setWidth: function(width, /* private - used internally */ doLayout) {
503        var me = this,
504            headerCt = me.ownerCt,
505            siblings,
506            len, i,
507            oldWidth = me.getWidth(),
508            groupWidth = 0,
509            sibling;
510
511        if (width !== oldWidth) {
512            me.oldWidth = oldWidth;
513
514            // Non-flexed Headers may never be squeezed in the event of a shortfall so
515            // always set the minWidth to their current width.
516            me.minWidth = me.width = width;
517
518            // Bubble size changes upwards to group headers
519            if (headerCt.isGroupHeader) {
520                siblings = headerCt.items.items;
521                len = siblings.length;
522
523                for (i = 0; i < len; i++) {
524                    sibling = siblings[i];
525                    if (!sibling.hidden) {
526                        groupWidth += (sibling === me) ? width : sibling.getWidth();
527                    }
528                }
529                headerCt.setWidth(groupWidth, doLayout);
530            } else if (doLayout !== false) {
531                // Allow the owning Container to perform the sizing
532                headerCt.doLayout();
533            }
534        }
535    },
536
537    afterComponentLayout: function(width, height, oldWidth, oldHeight) {
538        var me = this,
539            ownerHeaderCt = me.getOwnerHeaderCt();
540
541        me.callParent(arguments);
542
543        if (ownerHeaderCt && (width !== oldWidth)) {
544            ownerHeaderCt.onHeaderResize(me, width, true);
545        }
546        delete me.oldWidth;
547    },
548
549    // private
550    // After the container has laid out and stretched, it calls this to correctly pad the inner to center the text vertically
551    // Total available header height must be passed to enable padding for inner elements to be calculated.
552    setPadding: function(headerHeight) {
553        var me = this,
554            lineHeight = parseInt(me.textEl.getStyle('line-height'), 10),
555            textHeight = parseInt(me.textEl.dom.offsetHeight, 10);
556
557        // Top title containing element must stretch to match height of sibling group headers
558        if (!me.isGroupHeader) {
559            if (me.titleEl.getHeight() < headerHeight) {
560                me.titleEl.dom.style.height = headerHeight + 'px';
561            }
562        }
563        headerHeight = me.titleEl.getViewSize().height;
564
565        // Vertically center the header text in potentially vertically stretched header
566        if (textHeight) {
567            if(lineHeight) {
568                textHeight = Math.ceil(textHeight / lineHeight) * lineHeight;
569            }
570            me.titleEl.setStyle({
571                paddingTop: Math.max(((headerHeight - textHeight) / 2), 0) + 'px'
572            });
573        }
574
575        // Only IE needs this
576        if (Ext.isIE && me.triggerEl) {
577            me.triggerEl.setHeight(headerHeight);
578        }
579    },
580
581    onDestroy: function() {
582        var me = this;
583        // force destroy on the textEl, IE reports a leak
584        Ext.destroy(me.textEl, me.keyNav);
585        delete me.keyNav;
586        me.callParent(arguments);
587    },
588
589    onTitleMouseOver: function() {
590        this.titleEl.addCls(this.hoverCls);
591    },
592
593    onTitleMouseOut: function() {
594        this.titleEl.removeCls(this.hoverCls);
595    },
596
597    onDownKey: function(e) {
598        if (this.triggerEl) {
599            this.onElClick(e, this.triggerEl.dom || this.el.dom);
600        }
601    },
602
603    onEnterKey: function(e) {
604        this.onElClick(e, this.el.dom);
605    },
606
607    /**
608     * @private
609     * Double click
610     * @param e
611     * @param t
612     */
613    onElDblClick: function(e, t) {
614        var me = this,
615            ownerCt = me.ownerCt;
616        if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0 && me.isOnLeftEdge(e) ) {
617            ownerCt.expandToFit(me.previousSibling('gridcolumn'));
618        }
619    },
620
621    onElClick: function(e, t) {
622
623        // The grid's docked HeaderContainer.
624        var me = this,
625            ownerHeaderCt = me.getOwnerHeaderCt();
626
627        if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
628            // Firefox doesn't check the current target in a within check.
629            // Therefore we check the target directly and then within (ancestors)
630            if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
631                ownerHeaderCt.onHeaderTriggerClick(me, e, t);
632            // if its not on the left hand edge, sort
633            } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
634                me.toggleSortState();
635                ownerHeaderCt.onHeaderClick(me, e, t);
636            }
637        }
638    },
639
640    /**
641     * @private
642     * Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView
643     * @param {String} type Event type, eg 'click'
644     * @param {Ext.view.Table} view TableView Component
645     * @param {HTMLElement} cell Cell HtmlElement the event took place within
646     * @param {Number} recordIndex Index of the associated Store Model (-1 if none)
647     * @param {Number} cellIndex Cell index within the row
648     * @param {Ext.EventObject} e Original event
649     */
650    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
651        return this.fireEvent.apply(this, arguments);
652    },
653
654    toggleSortState: function() {
655        var me = this,
656            idx,
657            nextIdx;
658
659        if (me.sortable) {
660            idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
661
662            nextIdx = (idx + 1) % me.possibleSortStates.length;
663            me.setSortState(me.possibleSortStates[nextIdx]);
664        }
665    },
666
667    doSort: function(state) {
668        var ds = this.up('tablepanel').store;
669        ds.sort({
670            property: this.getSortParam(),
671            direction: state
672        });
673    },
674
675    /**
676     * Returns the parameter to sort upon when sorting this header. By default this returns the dataIndex and will not
677     * need to be overriden in most cases.
678     * @return {String}
679     */
680    getSortParam: function() {
681        return this.dataIndex;
682    },
683
684    //setSortState: function(state, updateUI) {
685    //setSortState: function(state, doSort) {
686    setSortState: function(state, skipClear, initial) {
687        var me = this,
688            colSortClsPrefix = Ext.baseCSSPrefix + 'column-header-sort-',
689            ascCls = colSortClsPrefix + 'ASC',
690            descCls = colSortClsPrefix + 'DESC',
691            nullCls = colSortClsPrefix + 'null',
692            ownerHeaderCt = me.getOwnerHeaderCt(),
693            oldSortState = me.sortState;
694
695        if (oldSortState !== state && me.getSortParam()) {
696            me.addCls(colSortClsPrefix + state);
697            // don't trigger a sort on the first time, we just want to update the UI
698            if (state && !initial) {
699                me.doSort(state);
700            }
701            switch (state) {
702                case 'DESC':
703                    me.removeCls([ascCls, nullCls]);
704                    break;
705                case 'ASC':
706                    me.removeCls([descCls, nullCls]);
707                    break;
708                case null:
709                    me.removeCls([ascCls, descCls]);
710                    break;
711            }
712            if (ownerHeaderCt && !me.triStateSort && !skipClear) {
713                ownerHeaderCt.clearOtherSortStates(me);
714            }
715            me.sortState = state;
716            // we only want to fire the event if we have a null state when using triStateSort
717            if (me.triStateSort || state !== null) {
718                ownerHeaderCt.fireEvent('sortchange', ownerHeaderCt, me, state);
719            }
720        }
721    },
722
723    hide: function(fromOwner) {
724        var me = this,
725            newWidth = 0,
726            ownerHeaderCt = me.getOwnerHeaderCt(),
727            owner = me.ownerCt,
728            ownerIsGroup = owner.isGroupHeader,
729            item, items, len, i;
730            
731        // owner is a group, hide call didn't come from the owner
732        if (ownerIsGroup && !fromOwner) {
733            items = owner.query('>:not([hidden])');
734            // only have one item that isn't hidden, this is it.
735            if (items.length === 1 && items[0] == me) {
736                me.ownerCt.hide();
737                return;
738            }
739        }
740
741        Ext.suspendLayouts();
742
743        // Hiding means setting to zero width, so cache the width
744        me.oldWidth = me.getWidth();
745
746        if (me.isGroupHeader) {
747            items = me.items.items;
748            for (i = 0, len = items.length; i < len; i++) {
749                item = items[i];
750                if (!item.hidden) {
751                    item.hide(true);
752                }
753            }
754        }
755
756        me.callParent();
757        // Notify owning HeaderContainer
758        ownerHeaderCt.onHeaderHide(me);
759
760        if (me.ownerCt.isGroupHeader) {
761            items = owner.query('>:not([hidden])');
762            if (items.length && !fromOwner) {
763                // We have visible child items and wasn't hidden by the owner
764                // Size the group down to accommodate fewer sub headers
765                for (i = 0, len = items.length; i < len; i++) {
766                    newWidth += items[i].getWidth();
767                }
768                owner.setWidth(newWidth);
769            }
770        }
771        Ext.resumeLayouts(true);
772    },
773
774    show: function(fromOwner, fromChild) {
775        var me = this,
776            ownerCt = me.ownerCt,
777            newWidth = 0,
778            items,
779            len, i,
780            item;
781
782        Ext.suspendLayouts();
783
784        // If a sub header, ensure that the group header is visible
785        if (me.isSubHeader && ownerCt.hidden) {
786            ownerCt.show(false, true);
787        }
788
789        me.callParent(arguments);
790
791        // If we've just shown a group with all its sub headers hidden, then show all its sub headers
792        if (me.isGroupHeader && fromChild !== true && !me.query(':not([hidden])').length) {
793            items = me.query('>*');
794            for (i = 0, len = items.length; i < len; i++) {
795                item = items[i];
796                if (item.hidden) {
797                    item.show(true);
798                }
799                newWidth += item.getWidth();
800            }
801            me.setWidth(newWidth);
802        }
803
804        // Resize the owning group to accommodate
805        if (ownerCt.isGroupHeader && !fromOwner) {
806            items = ownerCt.query('>:not([hidden])');
807            for (i = 0, len = items.length; i < len; i++) {
808                newWidth += items[i].getWidth();
809            }
810            ownerCt.minWidth = newWidth;
811            ownerCt.setWidth(newWidth);
812        }
813
814        // Notify owning HeaderContainer
815        ownerCt = me.getOwnerHeaderCt();
816        if (ownerCt) {
817            ownerCt.onHeaderShow(me);
818        }
819        Ext.resumeLayouts(true);
820    },
821
822    getDesiredWidth: function() {
823        var me = this;
824        if (me.rendered && me.componentLayout && me.componentLayout.lastComponentSize) {
825            // headers always have either a width or a flex
826            // because HeaderContainer sets a defaults width
827            // therefore we can ignore the natural width
828            // we use the componentLayout's tracked width so that
829            // we can calculate the desired width when rendered
830            // but not visible because its being obscured by a layout
831            return me.componentLayout.lastComponentSize.width;
832        // Flexed but yet to be rendered this could be the case
833        // where a HeaderContainer and Headers are simply used as data
834        // structures and not rendered.
835        }
836        else if (me.flex) {
837            // this is going to be wrong, the defaultWidth
838            return me.width;
839        }
840        else {
841            return me.width;
842        }
843    },
844
845    getCellSelector: function() {
846        return '.' + Ext.baseCSSPrefix + 'grid-cell-' + this.getItemId();
847    },
848
849    getCellInnerSelector: function() {
850        return this.getCellSelector() + ' .' + Ext.baseCSSPrefix + 'grid-cell-inner';
851    },
852
853    isOnLeftEdge: function(e) {
854        return (e.getXY()[0] - this.el.getLeft() <= this.handleWidth);
855    },
856
857    isOnRightEdge: function(e) {
858        return (this.el.getRight() - e.getXY()[0] <= this.handleWidth);
859    }
860
861    // intentionally omit getEditor and setEditor definitions bc we applyIf into columns
862    // when the editing plugin is injected
863
864    /**
865     * @method getEditor
866     * Retrieves the editing field for editing associated with this header. Returns false if there is no field
867     * associated with the Header the method will return false. If the field has not been instantiated it will be
868     * created. Note: These methods only has an implementation if a Editing plugin has been enabled on the grid.
869     * @param {Object} record The {@link Ext.data.Model Model} instance being edited.
870     * @param {Object} defaultField An object representing a default field to be created
871     * @return {Ext.form.field.Field} field
872     */
873    /**
874     * @method setEditor
875     * Sets the form field to be used for editing. Note: This method only has an implementation if an Editing plugin has
876     * been enabled on the grid.
877     * @param {Object} field An object representing a field to be created. If no xtype is specified a 'textfield' is
878     * assumed.
879     */
880});