X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Column.html diff --git a/docs/source/Column.html b/docs/source/Column.html index 4c2c4c43..bb7976d5 100644 --- a/docs/source/Column.html +++ b/docs/source/Column.html @@ -1,409 +1,716 @@ - - - The source code - - - - - 
/**
- * @class Ext.grid.Column
- * 
This class encapsulates column configuration data to be used in the initialization of a
- * {@link Ext.grid.ColumnModel ColumnModel}.

- * 
While subclasses are provided to render data in different ways, this class renders a passed
- * data field unchanged and is usually used for textual columns.

- */
-Ext.grid.Column = function(config){
-    Ext.apply(this, config);
-
-    if(typeof this.renderer == 'string'){
-        this.renderer = Ext.util.Format[this.renderer];
-    } else if(Ext.isObject(this.renderer)){
-        this.scope = this.renderer.scope;
-        this.renderer = this.renderer.fn;
-    }
-    this.renderer = this.renderer.createDelegate(this.scope || config);
-
-    if(this.id === undefined){
-        this.id = ++Ext.grid.Column.AUTO_ID;
-    }
-    if(this.editor){
-        this.editor = Ext.create(this.editor, 'textfield');
-    }
-};
-
-Ext.grid.Column.AUTO_ID = 0;
-
-Ext.grid.Column.prototype = {
-    
/**
-     * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured
-     * {@link #editor}.  Set to false to initially disable editing on this column.
-     * The initial configuration may be dynamically altered using
-     * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
-     */
-    
/**
-     * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
-     * ordinal position.) The id is used to create a CSS class name which is applied to all
-     * table cells (including headers) in that column (in this context the id does not need to be
-     * unique). The class name takes the form of 
x-grid3-td-id

-     * Header cells will also receive this class name, but will also have the class 
x-grid3-hd

-     * So, to target header cells, use CSS selectors such as:
.x-grid3-hd-row .x-grid3-td-id

-     * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
-     * unique identifier.
-     */
-    
/**
-     * @cfg {String} header Optional. The header text to be used as innerHTML
-     * (html tags are accepted) to display in the Grid view.  Note: to
-     * have a clickable header with no text displayed use ' '.
-     */
-    
/**
-     * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to disable the header menu item to group by the column selected. Defaults to true,
-     * which enables the header menu group option.  Set to false to disable (but still show) the
-     * group option in the header menu for the column. See also {@link #groupName}.
-     */
-    
/**
-     * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the text with which to prefix the group field value in the group header line.
-     * See also {@link #groupRenderer} and
-     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
-     */
-    
/**
-     * @cfg {Function} groupRenderer 
Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the function used to format the grouping field value for display in the group
-     * {@link #groupName header}.  If a groupRenderer is not specified, the configured
-     * {@link #renderer} will be called; if a {@link #renderer} is also not specified
-     * the new value of the group field will be used.

-     * 
The called function (either the groupRenderer or {@link #renderer}) will be
-     * passed the following parameters:
-     * 

-     * 
The function should return a string value.

-     */
-    
/**
-     * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
-     * may be used to specify the text to display when there is an empty group value. Defaults to the
-     * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
-     */
-    
/**
-     * @cfg {String} dataIndex 
Required. The name of the field in the
-     * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
-     * which to draw the column's value.

-     */
-    
/**
-     * @cfg {Number} width
-     * Optional. The initial width in pixels of the column.
-     * The width of each column can also be affected if any of the following are configured:
-     *
- - \ No newline at end of file +Sencha Documentation Project
/**
+ * @class Ext.grid.column.Column
+ * @extends Ext.grid.header.Container
+ * 
+ * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses
+ * both the grid header configuration as well as displaying data within the grid itself. If the
+ * {@link #columns} configuration is specified, this column will become a column group and can
+ * container other columns inside. In general, this class will not be created directly, rather
+ * an array of column configurations will be passed to the grid:
+ * 
+ * {@img Ext.grid.column.Column/Ext.grid.column.Column.png Ext.grid.column.Column grid column}
+ *
+ * ## Code
+ *
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'employeeStore',
+ *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
+ *         data:[
+ *             {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
+ *             {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
+ *             {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
+ *             {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
+ *             {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}                        
+ *         ]
+ *     });
+ *     
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Column Demo',
+ *         store: Ext.data.StoreManager.lookup('employeeStore'),
+ *         columns: [
+ *             {text: 'First Name',  dataIndex:'firstname'},
+ *             {text: 'Last Name',  dataIndex:'lastname'},
+ *             {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},              
+ *             {text: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
+ *         ],
+ *         width: 400,
+ *         renderTo: Ext.getBody()
+ *     });
+ *     
+ * ## Convenience Subclasses
+ * There are several column subclasses that provide default rendering for various data types
+ *
+ *  - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline
+ *  - {@link Ext.grid.column.Boolean}: Renders for boolean values 
+ *  - {@link Ext.grid.column.Date}: Renders for date values
+ *  - {@link Ext.grid.column.Number}: Renders for numeric values
+ *  - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data 
+ * 
+ * ## Setting Sizes
+ * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either
+ * be given an explicit width value or a flex configuration. If no width is specified the grid will
+ * automatically the size the column to 100px. For column groups, the size is calculated by measuring
+ * the width of the child columns, so a width option should not be specified in that case.
+ * 
+ * ## Header Options
+ *  - {@link #text}: Sets the header text for the column
+ *  - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu
+ *  - {@link #hideable}: Specifies whether the column can be hidden using the column menu
+ *  - {@link #menuDisabled}: Disables the column header menu
+ *  - {@link #draggable}: Specifies whether the column header can be reordered by dragging
+ *  - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping}
+ * 
+ * ## Data Options
+ *  - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column.
+ *  - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid
+ * 
+ * @xtype gridcolumn
+ */
+Ext.define('Ext.grid.column.Column', {
+    extend: 'Ext.grid.header.Container',
+    alias: 'widget.gridcolumn',
+    requires: ['Ext.util.KeyNav'],
+    alternateClassName: 'Ext.grid.Column',
+
+    baseCls: Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable',
+
+    // Not the standard, automatically applied overCls because we must filter out overs of child headers.
+    hoverCls: Ext.baseCSSPrefix + 'column-header-over',
+
+    handleWidth: 5,
+
+    sortState: null,
+
+    possibleSortStates: ['ASC', 'DESC'],
+
+    renderTpl:
+        '<div class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
+            '<span class="' + Ext.baseCSSPrefix + 'column-header-text">' +
+                '{text}' +
+            '</span>' +
+            '<tpl if="!values.menuDisabled"><div class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div></tpl>' +
+        '</div>',
+
+    /**
+     * @cfg {Array} columns
+     * <p>An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the <code>columns</code> config.</p>
+     * <p>Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out of a group. Note that
+     * if all sub columns are dragged out of a group, the group is destroyed.
+     */
+
+    /**
+     * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
+     * grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from
+     * which to draw the column's value.</p>
+     */
+    dataIndex: null,
+
+    /**
+     * @cfg {String} text Optional. The header text to be used as innerHTML
+     * (html tags are accepted) to display in the Grid.  <b>Note</b>: to
+     * have a clickable header with no text displayed you can use the
+     * default of <tt>'&#160;'</tt>.
+     */
+    text: '&#160',
+
+    /**
+     * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
+     * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.
+     */
+    sortable: true,
+    
+    /**
+     * @cfg {Boolean} groupable Optional. If the grid uses a {@link Ext.grid.feature.Grouping}, this option
+     * may be used to disable the header menu item to group by the column selected. By default,
+     * the header menu group option is enabled. Set to false to disable (but still show) the
+     * group option in the header menu for the column.
+     */
+     
+    /**
+     * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column
+     * (defaults to true).
+     */
+    hideable: true,
+
+    /**
+     * @cfg {Boolean} menuDisabled
+     * True to disabled the column header menu containing sort/hide options. Defaults to false.
+     */
+    menuDisabled: false,
+
+    /**
+     * @cfg {Function} renderer
+     * <p>A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it
+     * is rendered. Example:</p>
+     * <pre><code>{
+    renderer: function(value){
+        if (value === 1) {
+            return '1 person';
+        }
+        return value + ' people';
+    }
+}
+     * </code></pre>
+     * @param {Mixed} value The data value for the current cell
+     * @param {Object} metaData A collection of metadata about the current cell; can be used or modified by
+     * the renderer. Recognized properties are: <tt>tdCls</tt>, <tt>tdAttr</tt>, and <tt>style</tt>.
+     * @param {Ext.data.Model} record The record for the current row
+     * @param {Number} rowIndex The index of the current row
+     * @param {Number} colIndex The index of the current column
+     * @param {Ext.data.Store} store The data store
+     * @param {Ext.view.View} view The current view
+     * @return {String} The HTML to be rendered
+     */
+    renderer: false,
+
+    /**
+     * @cfg {String} align Sets the alignment of the header and rendered columns.
+     * Defaults to 'left'.
+     */
+    align: 'left',
+
+    /**
+     * @cfg {Boolean} draggable Indicates whether or not the header can be drag and drop re-ordered.
+     * Defaults to true.
+     */
+    draggable: true,
+
+    // Header does not use the typical ComponentDraggable class and therefore we
+    // override this with an emptyFn. It is controlled at the HeaderDragZone.
+    initDraggable: Ext.emptyFn,
+
+    /**
+     * @cfg {String} tdCls <p>Optional. A CSS class names to apply to the table cells for this column.</p>
+     */
+
+    /**
+     * @property {Ext.core.Element} triggerEl
+     */
+
+    /**
+     * @property {Ext.core.Element} textEl
+     */
+
+    /**
+     * @private
+     * Set in this class to identify, at runtime, instances which are not instances of the
+     * HeaderContainer base class, but are in fact, the subclass: Header.
+     */
+    isHeader: true,
+
+    initComponent: function() {
+        var me = this,
+            i,
+            len;
+        
+        if (Ext.isDefined(me.header)) {
+            me.text = me.header;
+            delete me.header;
+        }
+
+        // Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the
+        // HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes
+        // method extends the available layout space to accommodate the "desiredWidth" of all the columns.
+        if (me.flex) {
+            me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
+        }
+        // Non-flexed Headers may never be squeezed in the event of a shortfall so
+        // always set their minWidth to their current width.
+        else {
+            me.minWidth = me.width;
+        }
+
+        if (!me.triStateSort) {
+            me.possibleSortStates.length = 2;
+        }
+
+        // A group header; It contains items which are themselves Headers
+        if (Ext.isDefined(me.columns)) {
+            me.isGroupHeader = true;
+
+            //<debug>
+            if (me.dataIndex) {
+                Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
+            }
+            if ((me.width && me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) {
+                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.');
+            }
+            //</debug>
+
+            // The headers become child items
+            me.items = me.columns;
+            delete me.columns;
+            delete me.flex;
+            me.width = 0;
+
+            // Acquire initial width from sub headers
+            for (i = 0, len = me.items.length; i < len; i++) {
+                me.width += me.items[i].width || Ext.grid.header.Container.prototype.defaultWidth;
+                //<debug>
+                if (me.items[i].flex) {
+                    Ext.Error.raise('Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.');
+                }
+                //</debug>
+            }
+            me.minWidth = me.width;
+
+            me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
+            me.sortable = false;
+            me.fixed = true;
+            me.align = 'center';
+        }
+
+        Ext.applyIf(me.renderSelectors, {
+            titleContainer: '.' + Ext.baseCSSPrefix + 'column-header-inner',
+            triggerEl: '.' + Ext.baseCSSPrefix + 'column-header-trigger',
+            textEl: '.' + Ext.baseCSSPrefix + 'column-header-text'
+        });
+
+        // Initialize as a HeaderContainer
+        me.callParent(arguments);
+    },
+
+    onAdd: function(childHeader) {
+        childHeader.isSubHeader = true;
+        childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
+    },
+
+    onRemove: function(childHeader) {
+        childHeader.isSubHeader = false;
+        childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
+    },
+
+    initRenderData: function() {
+        var me = this;
+        
+        Ext.applyIf(me.renderData, {
+            text: me.text,
+            menuDisabled: me.menuDisabled
+        });
+        return me.callParent(arguments);
+    },
+
+    // note that this should invalidate the menu cache
+    setText: function(text) {
+        this.text = text;
+        if (this.rendered) {
+            this.textEl.update(text);
+        } 
+    },
+
+    // Find the topmost HeaderContainer: An ancestor which is NOT a Header.
+    // Group Headers are themselves HeaderContainers
+    getOwnerHeaderCt: function() {
+        return this.up(':not([isHeader])');
+    },
+
+    /**
+     * Returns the true grid column index assiciated with this Column only if this column is a base level Column.
+     * If it is a group column, it returns <code>false</code>
+     */
+    getIndex: function() {
+        return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
+    },
+
+    afterRender: function() {
+        var me = this,
+            el = me.el;
+
+        me.callParent(arguments);
+
+        el.addCls(Ext.baseCSSPrefix + 'column-header-align-' + me.align).addClsOnOver(me.overCls);
+
+        me.mon(el, {
+            click:     me.onElClick,
+            dblclick:  me.onElDblClick,
+            scope:     me
+        });
+        
+        // BrowserBug: Ie8 Strict Mode, this will break the focus for this browser,
+        // must be fixed when focus management will be implemented.
+        if (!Ext.isIE8 || !Ext.isStrict) {
+            me.mon(me.getFocusEl(), {
+                focus: me.onTitleMouseOver,
+                blur: me.onTitleMouseOut,
+                scope: me
+            });
+        }
+
+        me.mon(me.titleContainer, {
+            mouseenter:  me.onTitleMouseOver,
+            mouseleave:  me.onTitleMouseOut,
+            scope:      me
+        });
+
+        me.keyNav = Ext.create('Ext.util.KeyNav', el, {
+            enter: me.onEnterKey,
+            down: me.onDownKey,
+            scope: me
+        });
+    },
+
+    setSize: function(width, height) {
+        var me = this,
+            headerCt = me.ownerCt,
+            ownerHeaderCt = me.getOwnerHeaderCt(),
+            siblings,
+            len, i,
+            oldWidth = me.getWidth(),
+            newWidth = 0;
+
+        if (width !== oldWidth) {
+
+            // Bubble size changes upwards to group headers
+            if (headerCt.isGroupHeader) {
+
+                siblings = headerCt.items.items;
+                len = siblings.length;
+
+                // Size the owning group to the size of its sub headers 
+                if (siblings[len - 1].rendered) {
+
+                    for (i = 0; i < len; i++) {
+                        newWidth += (siblings[i] === me) ? width : siblings[i].getWidth();
+                    }
+                    headerCt.minWidth = newWidth;
+                    headerCt.setWidth(newWidth);
+                }
+            }
+            me.callParent(arguments);
+        }
+    },
+
+    afterComponentLayout: function(width, height) {
+        var me = this,
+            ownerHeaderCt = this.getOwnerHeaderCt();
+
+        me.callParent(arguments);
+
+        // Only changes at the base level inform the grid's HeaderContainer which will update the View
+        // Skip this if the width is null or undefined which will be the Box layout's initial pass  through the child Components
+        // Skip this if it's the initial size setting in which case there is no ownerheaderCt yet - that is set afterRender
+        if (width && !me.isGroupHeader && ownerHeaderCt) {
+            ownerHeaderCt.onHeaderResize(me, width, true);
+        }
+    },
+
+    // private
+    // After the container has laid out and stretched, it calls this to correctly pad the inner to center the text vertically
+    setPadding: function() {
+        var me = this,
+            headerHeight,
+            lineHeight = parseInt(me.textEl.getStyle('line-height'), 10);
+
+        // Top title containing element must stretch to match height of sibling group headers
+        if (!me.isGroupHeader) {
+            headerHeight = me.el.getViewSize().height;
+            if (me.titleContainer.getHeight() < headerHeight) {
+                me.titleContainer.dom.style.height = headerHeight + 'px';
+            }
+        }
+        headerHeight = me.titleContainer.getViewSize().height;
+
+        // Vertically center the header text in potentially vertically stretched header
+        if (lineHeight) {
+            me.titleContainer.setStyle({
+                paddingTop: Math.max(((headerHeight - lineHeight) / 2), 0) + 'px'
+            });
+        }
+
+        // Only IE needs this
+        if (Ext.isIE && me.triggerEl) {
+            me.triggerEl.setHeight(headerHeight);
+        }
+    },
+
+    onDestroy: function() {
+        var me = this;
+        Ext.destroy(me.keyNav);
+        delete me.keyNav;
+        me.callParent(arguments);
+    },
+
+    onTitleMouseOver: function() {
+        this.titleContainer.addCls(this.hoverCls);
+    },
+
+    onTitleMouseOut: function() {
+        this.titleContainer.removeCls(this.hoverCls);
+    },
+
+    onDownKey: function(e) {
+        if (this.triggerEl) {
+            this.onElClick(e, this.triggerEl.dom || this.el.dom);
+        }
+    },
+
+    onEnterKey: function(e) {
+        this.onElClick(e, this.el.dom);
+    },
+
+    /**
+     * @private
+     * Double click 
+     * @param e
+     * @param t
+     */
+    onElDblClick: function(e, t) {
+        var me = this,
+            ownerCt = me.ownerCt;
+        if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0 && me.isOnLeftEdge(e) ) {
+            ownerCt.expandToFit(me.previousSibling('gridcolumn'));
+        }
+    },
+
+    onElClick: function(e, t) {
+
+        // The grid's docked HeaderContainer.
+        var me = this,
+            ownerHeaderCt = me.getOwnerHeaderCt();
+
+        if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
+            // Firefox doesn't check the current target in a within check.
+            // Therefore we check the target directly and then within (ancestors)
+            if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
+                ownerHeaderCt.onHeaderTriggerClick(me, e, t);
+            // if its not on the left hand edge, sort
+            } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
+                me.toggleSortState();
+                ownerHeaderCt.onHeaderClick(me, e, t);
+            }
+        }
+    },
+
+    /**
+     * @private
+     * Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView
+     * @param {String} type Event type, eg 'click'
+     * @param {TableView} view TableView Component
+     * @param {HtmlElement} cell Cell HtmlElement the event took place within
+     * @param {Number} recordIndex Index of the associated Store Model (-1 if none)
+     * @param {Number} cellIndex Cell index within the row
+     * @param {EventObject} e Original event
+     */
+    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
+        return this.fireEvent.apply(this, arguments);
+    },
+
+    toggleSortState: function() {
+        var me = this,
+            idx,
+            nextIdx;
+            
+        if (me.sortable) {
+            idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
+
+            nextIdx = (idx + 1) % me.possibleSortStates.length;
+            me.setSortState(me.possibleSortStates[nextIdx]);
+        }
+    },
+
+    doSort: function(state) {
+        var ds = this.up('tablepanel').store;
+        ds.sort({
+            property: this.getSortParam(),
+            direction: state
+        });
+    },
+
+    /**
+     * Returns the parameter to sort upon when sorting this header. By default
+     * this returns the dataIndex and will not need to be overriden in most cases.
+     */
+    getSortParam: function() {
+        return this.dataIndex;
+    },
+
+    //setSortState: function(state, updateUI) {
+    //setSortState: function(state, doSort) {
+    setSortState: function(state, skipClear, initial) {
+        var me = this,
+            colSortClsPrefix = Ext.baseCSSPrefix + 'column-header-sort-',
+            ascCls = colSortClsPrefix + 'ASC',
+            descCls = colSortClsPrefix + 'DESC',
+            nullCls = colSortClsPrefix + 'null',
+            ownerHeaderCt = me.getOwnerHeaderCt(),
+            oldSortState = me.sortState;
+
+        if (oldSortState !== state && me.getSortParam()) {
+            me.addCls(colSortClsPrefix + state);
+            // don't trigger a sort on the first time, we just want to update the UI
+            if (state && !initial) {
+                me.doSort(state);
+            }
+            switch (state) {
+                case 'DESC':
+                    me.removeCls([ascCls, nullCls]);
+                    break;
+                case 'ASC':
+                    me.removeCls([descCls, nullCls]);
+                    break;
+                case null:
+                    me.removeCls([ascCls, descCls]);
+                    break;
+            }
+            if (ownerHeaderCt && !me.triStateSort && !skipClear) {
+                ownerHeaderCt.clearOtherSortStates(me);
+            }
+            me.sortState = state;
+            ownerHeaderCt.fireEvent('sortchange', ownerHeaderCt, me, state);
+        }
+    },
+
+    hide: function() {
+        var me = this,
+            items,
+            len, i,
+            lb,
+            newWidth = 0,
+            ownerHeaderCt = me.getOwnerHeaderCt();
+
+        // Hiding means setting to zero width, so cache the width
+        me.oldWidth = me.getWidth();
+
+        // Hiding a group header hides itself, and then informs the HeaderContainer about its sub headers (Suppressing header layout)
+        if (me.isGroupHeader) {
+            items = me.items.items;
+            me.callParent(arguments);
+            ownerHeaderCt.onHeaderHide(me);
+            for (i = 0, len = items.length; i < len; i++) {
+                items[i].hidden = true;
+                ownerHeaderCt.onHeaderHide(items[i], true);
+            }
+            return;
+        }
+
+        // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+        lb = me.ownerCt.componentLayout.layoutBusy;
+        me.ownerCt.componentLayout.layoutBusy = true;
+        me.callParent(arguments);
+        me.ownerCt.componentLayout.layoutBusy = lb;
+
+        // Notify owning HeaderContainer
+        ownerHeaderCt.onHeaderHide(me);
+
+        if (me.ownerCt.isGroupHeader) {
+            // If we've just hidden the last header in a group, then hide the group
+            items = me.ownerCt.query('>:not([hidden])');
+            if (!items.length) {
+                me.ownerCt.hide();
+            }
+            // Size the group down to accommodate fewer sub headers
+            else {
+                for (i = 0, len = items.length; i < len; i++) {
+                    newWidth += items[i].getWidth();
+                }
+                me.ownerCt.minWidth = newWidth;
+                me.ownerCt.setWidth(newWidth);
+            }
+        }
+    },
+
+    show: function() {
+        var me = this,
+            ownerCt = me.getOwnerHeaderCt(),
+            lb,
+            items,
+            len, i,
+            newWidth = 0;
+
+        // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+        lb = me.ownerCt.componentLayout.layoutBusy;
+        me.ownerCt.componentLayout.layoutBusy = true;
+        me.callParent(arguments);
+        me.ownerCt.componentLayout.layoutBusy = lb;
+
+        // If a sub header, ensure that the group header is visible
+        if (me.isSubHeader) {
+            if (!me.ownerCt.isVisible()) {
+                me.ownerCt.show();
+            }
+        }
+
+        // If we've just shown a group with all its sub headers hidden, then show all its sub headers
+        if (me.isGroupHeader && !me.query(':not([hidden])').length) {
+            items = me.query('>*');
+            for (i = 0, len = items.length; i < len; i++) {
+                items[i].show();
+            }
+        }
+
+        // Resize the owning group to accommodate
+        if (me.ownerCt.isGroupHeader) {
+            items = me.ownerCt.query('>:not([hidden])');
+            for (i = 0, len = items.length; i < len; i++) {
+                newWidth += items[i].getWidth();
+            }
+            me.ownerCt.minWidth = newWidth;
+            me.ownerCt.setWidth(newWidth);
+        }
+
+        // Notify owning HeaderContainer
+        if (ownerCt) {
+            ownerCt.onHeaderShow(me);
+        }
+    },
+
+    getDesiredWidth: function() {
+        var me = this;
+        if (me.rendered && me.componentLayout && me.componentLayout.lastComponentSize) {
+            // headers always have either a width or a flex
+            // because HeaderContainer sets a defaults width
+            // therefore we can ignore the natural width
+            // we use the componentLayout's tracked width so that
+            // we can calculate the desired width when rendered
+            // but not visible because its being obscured by a layout
+            return me.componentLayout.lastComponentSize.width;
+        // Flexed but yet to be rendered this could be the case
+        // where a HeaderContainer and Headers are simply used as data
+        // structures and not rendered.
+        }
+        else if (me.flex) {
+            // this is going to be wrong, the defaultWidth
+            return me.width;
+        }
+        else {
+            return me.width;
+        }
+    },
+
+    getCellSelector: function() {
+        return '.' + Ext.baseCSSPrefix + 'grid-cell-' + this.getItemId();
+    },
+
+    getCellInnerSelector: function() {
+        return this.getCellSelector() + ' .' + Ext.baseCSSPrefix + 'grid-cell-inner';
+    },
+
+    isOnLeftEdge: function(e) {
+        return (e.getXY()[0] - this.el.getLeft() <= this.handleWidth);
+    },
+
+    isOnRightEdge: function(e) {
+        return (this.el.getRight() - e.getXY()[0] <= this.handleWidth);
+    }
+    
+    /**
+     * Retrieves the editing field for editing associated with this header. Returns false if there
+     * is no field associated with the Header the method will return false. If the
+     * field has not been instantiated it will be created. Note: These methods only has an implementation
+     * if a Editing plugin has been enabled on the grid.
+     * @param record The {@link Ext.data.Model Model} instance being edited.
+     * @param {Mixed} defaultField An object representing a default field to be created
+     * @returns {Ext.form.field.Field} field
+     * @method getEditor
+     */
+    // intentionally omit getEditor and setEditor definitions bc we applyIf into columns
+    // when the editing plugin is injected
+    
+    
+    /**
+     * Sets the form field to be used for editing. Note: This method only has an implementation
+     * if an Editing plugin has been enabled on the grid.
+     * @param {Mixed} field An object representing a field to be created. If no xtype is specified a 'textfield' is assumed.
+     * @method setEditor
+     */
+});
\ No newline at end of file