Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Column.html
index 1c85728..909501c 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.grid.Column"></div>/**
- * @class Ext.grid.Column
- * <p>This class encapsulates column configuration data to be used in the initialization of a
- * {@link Ext.grid.ColumnModel ColumnModel}.</p>
- * <p>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.</p>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-grid-column-Column'>/**
+</span> * 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
+ * contain other columns inside. In general, this class will not be created directly, rather
+ * an array of column configurations will be passed to the grid:
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'employeeStore',
+ *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
+ *         data:[
+ *             {firstname:&quot;Michael&quot;, lastname:&quot;Scott&quot;, senority:7, dep:&quot;Manangement&quot;, hired:&quot;01/10/2004&quot;},
+ *             {firstname:&quot;Dwight&quot;, lastname:&quot;Schrute&quot;, senority:2, dep:&quot;Sales&quot;, hired:&quot;04/01/2004&quot;},
+ *             {firstname:&quot;Jim&quot;, lastname:&quot;Halpert&quot;, senority:3, dep:&quot;Sales&quot;, hired:&quot;02/22/2006&quot;},
+ *             {firstname:&quot;Kevin&quot;, lastname:&quot;Malone&quot;, senority:4, dep:&quot;Accounting&quot;, hired:&quot;06/10/2007&quot;},
+ *             {firstname:&quot;Angela&quot;, lastname:&quot;Martin&quot;, senority:5, dep:&quot;Accounting&quot;, hired:&quot;10/21/2008&quot;}
+ *         ]
+ *     });
+ *
+ *     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: 'Department (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
  */
-Ext.grid.Column = Ext.extend(Object, {
-    <div id="cfg-Ext.grid.Column-editable"></div>/**
-     * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured
-     * <tt>{@link #editor}</tt>.  Set to <tt>false</tt> 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()}.
-     */
-    <div id="cfg-Ext.grid.Column-id"></div>/**
-     * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
-     * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
-     * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
-     * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
-     * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
-     * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>
-     * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
-     * unique identifier.
-     */
-    <div id="cfg-Ext.grid.Column-header"></div>/**
-     * @cfg {String} header Optional. The header text to be used as innerHTML
-     * (html tags are accepted) to display in the Grid view.  <b>Note</b>: to
-     * have a clickable header with no text displayed use <tt>'&#160;'</tt>.
-     */
-    <div id="cfg-Ext.grid.Column-groupable"></div>/**
-     * @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 <tt>true</tt>,
-     * which enables the header menu group option.  Set to <tt>false</tt> to disable (but still show) the
-     * group option in the header menu for the column. See also <code>{@link #groupName}</code>.
-     */
-    <div id="cfg-Ext.grid.Column-groupName"></div>/**
-     * @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}.
-     */
-    <div id="cfg-Ext.grid.Column-groupRenderer"></div>/**
-     * @cfg {Function} groupRenderer <p>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 <tt><b>groupRenderer</b></tt> is not specified, the configured
-     * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
-     * the new value of the group field will be used.</p>
-     * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
-     * passed the following parameters:
-     * <div class="mdetail-params"><ul>
-     * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
-     * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
-     * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
-     * for the row which caused group change.</p></li>
-     * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
-     * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
-     * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
-     * </ul></div></p>
-     * <p>The function should return a string value.</p>
-     */
-    <div id="cfg-Ext.grid.Column-emptyGroupText"></div>/**
-     * @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}.
-     */
-    <div id="cfg-Ext.grid.Column-dataIndex"></div>/**
-     * @cfg {String} dataIndex <p><b>Required</b>. 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.</p>
+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:
+        '&lt;div id=&quot;{id}-titleContainer&quot; class=&quot;' + Ext.baseCSSPrefix + 'column-header-inner&quot;&gt;' +
+            '&lt;span id=&quot;{id}-textEl&quot; class=&quot;' + Ext.baseCSSPrefix + 'column-header-text&quot;&gt;' +
+                '{text}' +
+            '&lt;/span&gt;' +
+            '&lt;tpl if=&quot;!values.menuDisabled&quot;&gt;'+
+                '&lt;div id=&quot;{id}-triggerEl&quot; class=&quot;' + Ext.baseCSSPrefix + 'column-header-trigger&quot;&gt;&lt;/div&gt;'+
+            '&lt;/tpl&gt;' +
+        '&lt;/div&gt;',
+
+<span id='Ext-grid-column-Column-cfg-columns'>    /**
+</span>     * @cfg {Object[]} columns
+     * An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the
+     * `columns` config.
+     *
+     * 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.
      */
-    <div id="cfg-Ext.grid.Column-width"></div>/**
-     * @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:
-     * <div class="mdetail-params"><ul>
-     * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
-     * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
-     * <div class="sub-desc">
-     * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be
-     * re-proportioned (based on the relative initial widths) to fill the width of the grid so
-     * that no horizontal scrollbar is shown.</p>
-     * </div></li>
-     * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
-     * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
-     * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side
-     * is reserved for the vertical scrollbar.  The
-     * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
-     * can be modified to reduce or eliminate the reserved offset.</p>
+
+<span id='Ext-grid-column-Column-cfg-dataIndex'>    /**
+</span>     * @cfg {String} dataIndex
+     * 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. **Required.**
      */
-    <div id="cfg-Ext.grid.Column-sortable"></div>/**
-     * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
-     * Defaults to the value of the <code>{@link Ext.grid.ColumnModel#defaultSortable}</code> property.
-     * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.
+    dataIndex: null,
+
+<span id='Ext-grid-column-Column-cfg-text'>    /**
+</span>     * @cfg {String} text
+     * The header text to be used as innerHTML (html tags are accepted) to display in the Grid.
+     * **Note**: to have a clickable header with no text displayed you can use the default of `&amp;#160;` aka `&amp;nbsp;`.
      */
-    <div id="cfg-Ext.grid.Column-fixed"></div>/**
-     * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed.  Defaults to <tt>false</tt>.
+    text: '&amp;#160;',
+
+<span id='Ext-grid-column-Column-cfg-sortable'>    /**
+</span>     * @cfg {Boolean} sortable
+     * False to disable sorting of this column. Whether local/remote sorting is used is specified in
+     * `{@link Ext.data.Store#remoteSort}`. Defaults to true.
      */
-    <div id="cfg-Ext.grid.Column-resizable"></div>/**
-     * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
+    sortable: true,
+
+<span id='Ext-grid-column-Column-cfg-groupable'>    /**
+</span>     * @cfg {Boolean} groupable
+     * 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.
      */
-    <div id="cfg-Ext.grid.Column-menuDisabled"></div>/**
-     * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
+
+<span id='Ext-grid-column-Column-cfg-fixed'>    /**
+</span>     * @cfg {Boolean} fixed
+     * @deprecated.
+     * True to prevent the column from being resizable.
      */
-    <div id="cfg-Ext.grid.Column-hidden"></div>/**
-     * @cfg {Boolean} hidden
-     * Optional. <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>.
-     * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.
-     * If a column is never to be shown, simply do not include this column in the Column Model at all.
+
+<span id='Ext-grid-column-Column-cfg-resizable'>    /**
+</span>     * @cfg {Boolean} resizable
+     * Set to &lt;code&gt;false&lt;/code&gt; to prevent the column from being resizable. Defaults to &lt;code&gt;true&lt;/code&gt;
      */
-    <div id="cfg-Ext.grid.Column-tooltip"></div>/**
-     * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip.  If Quicktips
-     * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
-     * header's HTML title attribute. Defaults to ''.
+
+<span id='Ext-grid-column-Column-cfg-hideable'>    /**
+</span>     * @cfg {Boolean} hideable
+     * False to prevent the user from hiding this column. Defaults to true.
      */
-    <div id="cfg-Ext.grid.Column-renderer"></div>/**
-     * @cfg {Mixed} renderer
-     * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>
-     * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,
-     * appearance, etc.) before it is rendered). This may be specified in either of three ways:
-     * <div class="mdetail-params"><ul>
-     * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
-     * <li>A string which references a property name of the {@link Ext.util.Format} class which
-     * provides a renderer function.</li>
-     * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
-     * reference) e.g.:<pre style="margin-left:1.2em"><code>
-{
-    fn: this.gridRenderer,
-    scope: this
-}
-</code></pre></li></ul></div>
-     * If not specified, the default renderer uses the raw data value.</p>
-     * <p>For information about the renderer function (passed parameters, etc.), see
-     * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
-var companyColumn = {
-   header: 'Company Name',
-   dataIndex: 'company',
-   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
-      // provide the logic depending on business rules
-      // name of your own choosing to manipulate the cell depending upon
-      // the data in the underlying Record object.
-      if (value == 'whatever') {
-          //metaData.css : String : A CSS class name to add to the TD element of the cell.
-          //metaData.attr : String : An html attribute definition string to apply to
-          //                         the data container element within the table
-          //                         cell (e.g. 'style="color:red;"').
-          metaData.css = 'name-of-css-class-you-will-define';
-      }
-      return value;
-   }
-}
-     * </code></pre>
-     * See also {@link #scope}.
+    hideable: true,
+
+<span id='Ext-grid-column-Column-cfg-menuDisabled'>    /**
+</span>     * @cfg {Boolean} menuDisabled
+     * True to disable the column header menu containing sort/hide options. Defaults to false.
      */
-    <div id="cfg-Ext.grid.Column-xtype"></div>/**
-     * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
-     * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily
-     * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>
-     * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>
-     * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>
-     * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>
-     * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>
-     * </ul></div>
-     * <p>Configuration properties for the specified <code>xtype</code> may be specified with
-     * the Column configuration properties, for example:</p>
-     * <pre><code>
-var grid = new Ext.grid.GridPanel({
-    ...
-    columns: [{
-        header: 'Last Updated',
-        dataIndex: 'lastChange',
-        width: 85,
-        sortable: true,
-        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
-        xtype: 'datecolumn', // use xtype instead of renderer
-        format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
-    }, {
-        ...
-    }]
-});
-     * </code></pre>
+    menuDisabled: false,
+
+<span id='Ext-grid-column-Column-cfg-renderer'>    /**
+</span>     * @cfg {Function} renderer
+     * A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.)
+     * before it is rendered. Example:
+     *
+     *     {
+     *         renderer: function(value){
+     *             if (value === 1) {
+     *                 return '1 person';
+     *             }
+     *             return value + ' people';
+     *         }
+     *     }
+     *
+     * @cfg {Object} renderer.value The data value for the current cell
+     * @cfg {Object} renderer.metaData A collection of metadata about the current cell; can be used or modified
+     * by the renderer. Recognized properties are: tdCls, tdAttr, and style.
+     * @cfg {Ext.data.Model} renderer.record The record for the current row
+     * @cfg {Number} renderer.rowIndex The index of the current row
+     * @cfg {Number} renderer.colIndex The index of the current column
+     * @cfg {Ext.data.Store} renderer.store The data store
+     * @cfg {Ext.view.View} renderer.view The current view
+     * @cfg {String} renderer.return The HTML string to be rendered.
+     */
+    renderer: false,
+
+<span id='Ext-grid-column-Column-cfg-align'>    /**
+</span>     * @cfg {String} align
+     * Sets the alignment of the header and rendered columns. Defaults to 'left'.
      */
-    <div id="cfg-Ext.grid.Column-scope"></div>/**
-     * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the
-     * renderer.  Defaults to the Column configuration object.
+    align: 'left',
+
+<span id='Ext-grid-column-Column-cfg-draggable'>    /**
+</span>     * @cfg {Boolean} draggable
+     * False to disable drag-drop reordering of this column. Defaults to true.
      */
-    <div id="cfg-Ext.grid.Column-align"></div>/**
-     * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to undefined.
+    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,
+
+<span id='Ext-grid-column-Column-cfg-tdCls'>    /**
+</span>     * @cfg {String} tdCls
+     * A CSS class names to apply to the table cells for this column.
      */
-    <div id="cfg-Ext.grid.Column-css"></div>/**
-     * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
-     * (excluding headers). Defaults to undefined.
+
+<span id='Ext-grid-column-Column-cfg-editor'>    /**
+</span>     * @cfg {Object/String} editor
+     * An optional xtype or config object for a {@link Ext.form.field.Field Field} to use for editing.
+     * Only applicable if the grid is using an {@link Ext.grid.plugin.Editing Editing} plugin.
      */
-    <div id="cfg-Ext.grid.Column-hideable"></div>/**
-     * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column
-     * (defaults to true).  To disallow column hiding globally for all columns in the grid, use
-     * {@link Ext.grid.GridPanel#enableColumnHide} instead.
+
+<span id='Ext-grid-column-Column-cfg-field'>    /**
+</span>     * @cfg {Object/String} field
+     * Alias for {@link #editor}.
+     * @deprecated 4.0.5 Use {@link #editor} instead.
      */
-    <div id="cfg-Ext.grid.Column-editor"></div>/**
-     * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
-     * if editing is supported by the grid. See <tt>{@link #editable}</tt> also.
+
+<span id='Ext-grid-column-Column-property-triggerEl'>    /**
+</span>     * @property {Ext.Element} triggerEl
+     * Element that acts as button for column header dropdown menu.
      */
 
-    /**
-     * @private
-     * @cfg {Boolean} isColumn
-     * Used by ColumnModel setConfig method to avoid reprocessing a Column
-     * if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column
-     * Defaults to true.
+<span id='Ext-grid-column-Column-property-textEl'>    /**
+</span>     * @property {Ext.Element} textEl
+     * Element that contains the text in column header.
      */
-    isColumn : true,
-
-    constructor : function(config){
-        Ext.apply(this, config);
-
-        if(Ext.isString(this.renderer)){
-            this.renderer = Ext.util.Format[this.renderer];
-        }else if(Ext.isObject(this.renderer)){
-            this.scope = this.renderer.scope;
-            this.renderer = this.renderer.fn;
-        }
-        if(!this.scope){
-            this.scope = this;
-        }
-
-        var ed = this.editor;
-        delete this.editor;
-        this.setEditor(ed);
-    },
-
-    <div id="prop-Ext.grid.Column-renderer"></div>/**
-     * Optional. A function which returns displayable data when passed the following parameters:
-     * <div class="mdetail-params"><ul>
-     * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
-     * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
-     * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
-     * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container
-     * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>
-     * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was
-     * extracted.</p></li>
-     * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
-     * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
-     * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record
-     * was extracted.</p></li>
-     * </ul></div>
-     * @property renderer
-     * @type Function
+
+<span id='Ext-grid-column-Column-property-isHeader'>    /**
+</span>     * @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.
      */
-    renderer : function(value){
-        if(Ext.isString(value) && value.length < 1){
-            return '&#160;';
+    isHeader: true,
+
+    initComponent: function() {
+        var me = this,
+            i,
+            len,
+            item;
+
+        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 &quot;desiredWidth&quot; 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;
+
+            //&lt;debug&gt;
+            if (me.dataIndex) {
+                Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
+            }
+            if ((me.width &amp;&amp; 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.');
+            }
+            //&lt;/debug&gt;
+
+            // 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 &lt; len; i++) {
+                item = me.items[i];
+                if (!item.hidden) {
+                    me.width += item.width || Ext.grid.header.Container.prototype.defaultWidth;
+                }
+                //&lt;debug&gt;
+                if (item.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.');
+                }
+                //&lt;/debug&gt;
+            }
+            me.minWidth = me.width;
+
+            me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
+            me.sortable = false;
+            me.resizable = false;
+            me.align = 'center';
         }
-        return value;
+
+        me.addChildEls('titleContainer', 'triggerEl', 'textEl');
+
+        // Initialize as a HeaderContainer
+        me.callParent(arguments);
     },
 
-    // private
-    getEditor: function(rowIndex){
-        return this.editable !== false ? this.editor : null;
+    onAdd: function(childHeader) {
+        childHeader.isSubHeader = true;
+        childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
+        this.callParent(arguments);
+    },
+
+    onRemove: function(childHeader) {
+        childHeader.isSubHeader = false;
+        childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
+        this.callParent(arguments);
+    },
+
+    initRenderData: function() {
+        var me = this;
+
+        Ext.applyIf(me.renderData, {
+            text: me.text,
+            menuDisabled: me.menuDisabled
+        });
+        return me.callParent(arguments);
+    },
+
+    applyColumnState: function (state) {
+        var me = this,
+            defined = Ext.isDefined;
+            
+        // apply any columns
+        me.applyColumnsState(state.columns);
+
+        // Only state properties which were saved should be restored.
+        // (Only user-changed properties were saved by getState)
+        if (defined(state.hidden)) {
+            me.hidden = state.hidden;
+        }
+        if (defined(state.locked)) {
+            me.locked = state.locked;
+        }
+        if (defined(state.sortable)) {
+            me.sortable = state.sortable;
+        }
+        if (defined(state.width)) {
+            delete me.flex;
+            me.width = state.width;
+        } else if (defined(state.flex)) {
+            delete me.width;
+            me.flex = state.flex;
+        }
+    },
+
+    getColumnState: function () {
+        var me = this,
+            columns = [],
+            state = {
+                id: me.headerId
+            };
+
+        me.savePropsToState(['hidden', 'sortable', 'locked', 'flex', 'width'], state);
+        
+        if (me.isGroupHeader) {
+            me.items.each(function(column){
+                columns.push(column.getColumnState());
+            });
+            if (columns.length) {
+                state.columns = columns;
+            }
+        } else if (me.isSubHeader &amp;&amp; me.ownerCt.hidden) {
+            // don't set hidden on the children so they can auto height
+            delete me.hidden;
+        }
+
+        if ('width' in state) {
+            delete state.flex; // width wins
+        }
+        return state;
+    },
+
+<span id='Ext-grid-column-Column-method-setText'>    /**
+</span>     * Sets the header text for this Column.
+     * @param {String} text The header to display on this Column.
+     */
+    setText: function(text) {
+        this.text = text;
+        if (this.rendered) {
+            this.textEl.update(text);
+        }
     },
 
-    <div id="method-Ext.grid.Column-setEditor"></div>/**
-     * Sets a new editor for this column.
-     * @param {Ext.Editor/Ext.form.Field} editor The editor to set
+    // Find the topmost HeaderContainer: An ancestor which is NOT a Header.
+    // Group Headers are themselves HeaderContainers
+    getOwnerHeaderCt: function() {
+        return this.up(':not([isHeader])');
+    },
+
+<span id='Ext-grid-column-Column-method-getIndex'>    /**
+</span>     * Returns the true grid column index associated with this column only if this column is a base level Column. If it
+     * is a group column, it returns `false`.
+     * @return {Number}
      */
-    setEditor : function(editor){
-        var ed = this.editor;
-        if(ed){
-            if(ed.gridEditor){
-                ed.gridEditor.destroy();
-                delete ed.gridEditor;
-            }else{
-                ed.destroy();
+    getIndex: function() {
+        return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
+    },
+
+    onRender: function() {
+        var me = this,
+            grid = me.up('tablepanel');
+
+        // Disable the menu if there's nothing to show in the menu, ie:
+        // Column cannot be sorted, grouped or locked, and there are no grid columns which may be hidden
+        if (grid &amp;&amp; (!me.sortable || grid.sortableColumns === false) &amp;&amp; !me.groupable &amp;&amp; !me.lockable &amp;&amp; (grid.enableColumnHide === false || !me.getOwnerHeaderCt().getHideableColumns().length)) {
+            me.menuDisabled = true;
+        }
+        me.callParent(arguments);
+    },
+
+    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
+        });
+    },
+
+<span id='Ext-grid-column-Column-method-setWidth'>    /**
+</span>     * Sets the width of this Column.
+     * @param {Number} width New width.
+     */
+    setWidth: function(width, /* private - used internally */ doLayout) {
+        var me = this,
+            headerCt = me.ownerCt,
+            siblings,
+            len, i,
+            oldWidth = me.getWidth(),
+            groupWidth = 0,
+            sibling;
+
+        if (width !== oldWidth) {
+            me.oldWidth = oldWidth;
+
+            // Non-flexed Headers may never be squeezed in the event of a shortfall so
+            // always set the minWidth to their current width.
+            me.minWidth = me.width = width;
+
+            // Bubble size changes upwards to group headers
+            if (headerCt.isGroupHeader) {
+                siblings = headerCt.items.items;
+                len = siblings.length;
+
+                for (i = 0; i &lt; len; i++) {
+                    sibling = siblings[i];
+                    if (!sibling.hidden) {
+                        groupWidth += (sibling === me) ? width : sibling.getWidth();
+                    }
+                }
+                headerCt.setWidth(groupWidth, doLayout);
+            } else if (doLayout !== false) {
+                // Allow the owning Container to perform the sizing
+                headerCt.doLayout();
+            }
+        }
+    },
+
+    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 &amp;&amp; !me.isGroupHeader &amp;&amp; ownerHeaderCt) {
+            ownerHeaderCt.onHeaderResize(me, width, true);
+        }
+        if (me.oldWidth &amp;&amp; (width !== me.oldWidth)) {
+            ownerHeaderCt.fireEvent('columnresize', ownerHeaderCt, this, width);
+        }
+        delete me.oldWidth;
+    },
+
+    // private
+    // After the container has laid out and stretched, it calls this to correctly pad the inner to center the text vertically
+    // Total available header height must be passed to enable padding for inner elements to be calculated.
+    setPadding: function(headerHeight) {
+        var me = this,
+            lineHeight = Ext.util.TextMetrics.measure(me.textEl.dom, me.text).height;
+
+        // Top title containing element must stretch to match height of sibling group headers
+        if (!me.isGroupHeader) {
+            if (me.titleContainer.getHeight() &lt; headerHeight) {
+                me.titleContainer.dom.style.height = headerHeight + 'px';
             }
         }
-        this.editor = null;
-        if(editor){
-            //not an instance, create it
-            if(!editor.isXType){
-                editor = Ext.create(editor, 'textfield');
+        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 &amp;&amp; me.triggerEl) {
+            me.triggerEl.setHeight(headerHeight);
+        }
+    },
+
+    onDestroy: function() {
+        var me = this;
+        // force destroy on the textEl, IE reports a leak
+        Ext.destroy(me.textEl, 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);
+    },
+
+<span id='Ext-grid-column-Column-method-onElDblClick'>    /**
+</span>     * @private
+     * Double click
+     * @param e
+     * @param t
+     */
+    onElDblClick: function(e, t) {
+        var me = this,
+            ownerCt = me.ownerCt;
+        if (ownerCt &amp;&amp; Ext.Array.indexOf(ownerCt.items, me) !== 0 &amp;&amp; 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 &amp;&amp; !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 &amp;&amp; (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) &amp;&amp; !me.isOnRightEdge(e))) {
+                me.toggleSortState();
+                ownerHeaderCt.onHeaderClick(me, e, t);
             }
-            this.editor = editor;
         }
     },
 
-    <div id="method-Ext.grid.Column-getCellEditor"></div>/**
-     * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
-     * used to edit the cell.
-     * @param {Number} rowIndex The row index
-     * @return {Ext.Editor}
+<span id='Ext-grid-column-Column-method-processEvent'>    /**
+</span>     * @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 {Ext.view.Table} 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 {Ext.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
+        });
+    },
+
+<span id='Ext-grid-column-Column-method-getSortParam'>    /**
+</span>     * 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.
+     * @return {String}
      */
-    getCellEditor: function(rowIndex){
-        var ed = this.getEditor(rowIndex);
-        if(ed){
-            if(!ed.startEdit){
-                if(!ed.gridEditor){
-                    ed.gridEditor = new Ext.grid.GridEditor(ed);
+    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 &amp;&amp; me.getSortParam()) {
+            me.addCls(colSortClsPrefix + state);
+            // don't trigger a sort on the first time, we just want to update the UI
+            if (state &amp;&amp; !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 &amp;&amp; !me.triStateSort &amp;&amp; !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 &lt; 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('&gt;: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 &lt; len; i++) {
+                    newWidth += items[i].getWidth();
                 }
-                ed = ed.gridEditor;
+                me.ownerCt.minWidth = newWidth;
+                me.ownerCt.setWidth(newWidth);
             }
         }
-        return ed;
-    }
-});
+    },
 
-<div id="cls-Ext.grid.BooleanColumn"></div>/**
- * @class Ext.grid.BooleanColumn
- * @extends Ext.grid.Column
- * <p>A Column definition class which renders boolean data fields.  See the {@link Ext.grid.Column#xtype xtype}
- * config option of {@link Ext.grid.Column} for more details.</p>
- */
-Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
-    <div id="cfg-Ext.grid.BooleanColumn-trueText"></div>/**
-     * @cfg {String} trueText
-     * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
-     */
-    trueText: 'true',
-    <div id="cfg-Ext.grid.BooleanColumn-falseText"></div>/**
-     * @cfg {String} falseText
-     * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
-     * <tt>'false'</tt>).
-     */
-    falseText: 'false',
-    <div id="cfg-Ext.grid.BooleanColumn-undefinedText"></div>/**
-     * @cfg {String} undefinedText
-     * The string returned by the renderer when the column value is undefined (defaults to <tt>'&#160;'</tt>).
-     */
-    undefinedText: '&#160;',
-
-    constructor: function(cfg){
-        Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
-        var t = this.trueText, f = this.falseText, u = this.undefinedText;
-        this.renderer = function(v){
-            if(v === undefined){
-                return u;
+    show: function() {
+        var me = this,
+            ownerCt = me.ownerCt,
+            ownerCtCompLayout = ownerCt.componentLayout,
+            ownerCtCompLayoutBusy = ownerCtCompLayout.layoutBusy,
+            ownerCtLayout = ownerCt.layout,
+            ownerCtLayoutBusy = ownerCtLayout.layoutBusy,
+            items,
+            len, i,
+            item,
+            newWidth = 0;
+
+        // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+
+        // Suspend our owner's layouts (both component and container):
+        ownerCtCompLayout.layoutBusy = ownerCtLayout.layoutBusy = true;
+
+        me.callParent(arguments);
+
+        ownerCtCompLayout.layoutBusy = ownerCtCompLayoutBusy;
+        ownerCtLayout.layoutBusy = ownerCtLayoutBusy;
+
+        // If a sub header, ensure that the group header is visible
+        if (me.isSubHeader) {
+            if (!ownerCt.isVisible()) {
+                ownerCt.show();
             }
-            if(!v || v === 'false'){
-                return f;
+        }
+
+        // If we've just shown a group with all its sub headers hidden, then show all its sub headers
+        if (me.isGroupHeader &amp;&amp; !me.query(':not([hidden])').length) {
+            items = me.query('&gt;*');
+            for (i = 0, len = items.length; i &lt; len; i++) {
+                item = items[i];
+                item.preventLayout = true;
+                item.show();
+                newWidth += item.getWidth();
+                delete item.preventLayout;
             }
-            return t;
-        };
-    }
-});
+            me.setWidth(newWidth);
+        }
 
-<div id="cls-Ext.grid.NumberColumn"></div>/**
- * @class Ext.grid.NumberColumn
- * @extends Ext.grid.Column
- * <p>A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
- * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.</p>
- */
-Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
-    <div id="cfg-Ext.grid.NumberColumn-format"></div>/**
-     * @cfg {String} format
-     * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
-     * (defaults to <tt>'0,000.00'</tt>).
-     */
-    format : '0,000.00',
-    constructor: function(cfg){
-        Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
-        this.renderer = Ext.util.Format.numberRenderer(this.format);
-    }
-});
+        // Resize the owning group to accommodate
+        if (ownerCt.isGroupHeader &amp;&amp; me.preventLayout !== true) {
+            items = ownerCt.query('&gt;:not([hidden])');
+            for (i = 0, len = items.length; i &lt; len; i++) {
+                newWidth += items[i].getWidth();
+            }
+            ownerCt.minWidth = newWidth;
+            ownerCt.setWidth(newWidth);
+        }
 
-<div id="cls-Ext.grid.DateColumn"></div>/**
- * @class Ext.grid.DateColumn
- * @extends Ext.grid.Column
- * <p>A Column definition class which renders a passed date according to the default locale, or a configured
- * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}
- * for more details.</p>
- */
-Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
-    <div id="cfg-Ext.grid.DateColumn-format"></div>/**
-     * @cfg {String} format
-     * A formatting string as used by {@link Date#format} to format a Date for this Column
-     * (defaults to <tt>'m/d/Y'</tt>).
-     */
-    format : 'm/d/Y',
-    constructor: function(cfg){
-        Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
-        this.renderer = Ext.util.Format.dateRenderer(this.format);
+        // Notify owning HeaderContainer
+        ownerCt = me.getOwnerHeaderCt();
+        if (ownerCt) {
+            ownerCt.onHeaderShow(me, me.preventLayout);
+        }
+    },
+
+    getDesiredWidth: function() {
+        var me = this;
+        if (me.rendered &amp;&amp; me.componentLayout &amp;&amp; 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() &lt;= this.handleWidth);
+    },
+
+    isOnRightEdge: function(e) {
+        return (this.el.getRight() - e.getXY()[0] &lt;= this.handleWidth);
     }
-});
 
-<div id="cls-Ext.grid.TemplateColumn"></div>/**
- * @class Ext.grid.TemplateColumn
- * @extends Ext.grid.Column
- * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
- * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
- * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more
- * details.</p>
- */
-Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
-    <div id="cfg-Ext.grid.TemplateColumn-tpl"></div>/**
-     * @cfg {String/XTemplate} tpl
-     * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a
-     * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
+    // intentionally omit getEditor and setEditor definitions bc we applyIf into columns
+    // when the editing plugin is injected
+
+<span id='Ext-grid-column-Column-method-getEditor'>    /**
+</span>     * @method getEditor
+     * 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 {Object} record The {@link Ext.data.Model Model} instance being edited.
+     * @param {Object} defaultField An object representing a default field to be created
+     * @return {Ext.form.field.Field} field
+     */
+<span id='Ext-grid-column-Column-method-setEditor'>    /**
+</span>     * @method setEditor
+     * 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 {Object} field An object representing a field to be created. If no xtype is specified a 'textfield' is
+     * assumed.
      */
-    constructor: function(cfg){
-        Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
-        var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
-        this.renderer = function(value, p, r){
-            return tpl.apply(r.data);
-        };
-        this.tpl = tpl;
-    }
 });
-
-/*
- * @property types
- * @type Object
- * @member Ext.grid.Column
- * @static
- * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced
- * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>
- * <p>This contains the following properties</p><div class="mdesc-details"><ul>
- * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>
- * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>
- * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>
- * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>
- * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>
- * </ul></div>
- */
-Ext.grid.Column.types = {
-    gridcolumn : Ext.grid.Column,
-    booleancolumn: Ext.grid.BooleanColumn,
-    numbercolumn: Ext.grid.NumberColumn,
-    datecolumn: Ext.grid.DateColumn,
-    templatecolumn: Ext.grid.TemplateColumn
-};</pre>    
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>