Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Column.html
index 3687433..909501c 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../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>
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><span id='Ext-grid-column-Column'>/**
-</span> * @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
+</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
- * container other columns inside. In general, this class will not be created directly, rather
+ * 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:
- * 
- * {@img Ext.grid.column.Column/Ext.grid.column.Column.png Ext.grid.column.Column grid column}
- *
- * ## Code
  *
+ *     @example
  *     Ext.create('Ext.data.Store', {
  *         storeId:'employeeStore',
  *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
  *             {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;}                        
+ *             {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: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
+ *             {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},
+ *             {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
  *         ],
  *         width: 400,
  *         renderTo: Ext.getBody()
  *     });
- *     
- * ## Convenience Subclasses
+ *
+ * # 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.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
+ *  - {@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
+ *
+ * # 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
+ *
+ * # 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',
@@ -101,94 +97,110 @@ Ext.define('Ext.grid.column.Column', {
     possibleSortStates: ['ASC', 'DESC'],
 
     renderTpl:
-        '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'column-header-inner&quot;&gt;' +
-            '&lt;span class=&quot;' + Ext.baseCSSPrefix + 'column-header-text&quot;&gt;' +
+        '&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 class=&quot;' + Ext.baseCSSPrefix + 'column-header-trigger&quot;&gt;&lt;/div&gt;&lt;/tpl&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 {Array} columns
-     * &lt;p&gt;An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the &lt;code&gt;columns&lt;/code&gt; config.&lt;/p&gt;
-     * &lt;p&gt;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.
+</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.
      */
 
 <span id='Ext-grid-column-Column-cfg-dataIndex'>    /**
-</span>     * @cfg {String} dataIndex &lt;p&gt;&lt;b&gt;Required&lt;/b&gt;. 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.&lt;/p&gt;
+</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.**
      */
     dataIndex: null,
 
 <span id='Ext-grid-column-Column-cfg-text'>    /**
-</span>     * @cfg {String} text Optional. The header text to be used as innerHTML
-     * (html tags are accepted) to display in the Grid.  &lt;b&gt;Note&lt;/b&gt;: to
-     * have a clickable header with no text displayed you can use the
-     * default of &lt;tt&gt;'&amp;#160;'&lt;/tt&gt;.
+</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;`.
      */
-    text: '&amp;#160',
+    text: '&amp;#160;',
 
 <span id='Ext-grid-column-Column-cfg-sortable'>    /**
-</span>     * @cfg {Boolean} sortable Optional. &lt;tt&gt;true&lt;/tt&gt; if sorting is to be allowed on this column.
-     * Whether local/remote sorting is used is specified in &lt;code&gt;{@link Ext.data.Store#remoteSort}&lt;/code&gt;.
+</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.
      */
     sortable: true,
-    
+
 <span id='Ext-grid-column-Column-cfg-groupable'>    /**
-</span>     * @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.
+</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.
      */
-     
+
+<span id='Ext-grid-column-Column-cfg-fixed'>    /**
+</span>     * @cfg {Boolean} fixed
+     * @deprecated.
+     * True to prevent the column from being resizable.
+     */
+
+<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;
+     */
+
 <span id='Ext-grid-column-Column-cfg-hideable'>    /**
-</span>     * @cfg {Boolean} hideable Optional. Specify as &lt;tt&gt;false&lt;/tt&gt; to prevent the user from hiding this column
-     * (defaults to true).
+</span>     * @cfg {Boolean} hideable
+     * False to prevent the user from hiding this column. Defaults to true.
      */
     hideable: true,
 
 <span id='Ext-grid-column-Column-cfg-menuDisabled'>    /**
 </span>     * @cfg {Boolean} menuDisabled
-     * True to disabled the column header menu containing sort/hide options. Defaults to false.
+     * True to disable the column header menu containing sort/hide options. Defaults to false.
      */
     menuDisabled: false,
 
 <span id='Ext-grid-column-Column-cfg-renderer'>    /**
 </span>     * @cfg {Function} renderer
-     * &lt;p&gt;A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it
-     * is rendered. Example:&lt;/p&gt;
-     * &lt;pre&gt;&lt;code&gt;{
-    renderer: function(value){
-        if (value === 1) {
-            return '1 person';
-        }
-        return value + ' people';
-    }
-}
-     * &lt;/code&gt;&lt;/pre&gt;
-     * @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: &lt;tt&gt;tdCls&lt;/tt&gt;, &lt;tt&gt;tdAttr&lt;/tt&gt;, and &lt;tt&gt;style&lt;/tt&gt;.
-     * @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
+     * 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'.
+</span>     * @cfg {String} align
+     * Sets the alignment of the header and rendered columns. Defaults to 'left'.
      */
     align: 'left',
 
 <span id='Ext-grid-column-Column-cfg-draggable'>    /**
-</span>     * @cfg {Boolean} draggable Indicates whether or not the header can be drag and drop re-ordered.
-     * Defaults to true.
+</span>     * @cfg {Boolean} draggable
+     * False to disable drag-drop reordering of this column. Defaults to true.
      */
     draggable: true,
 
@@ -197,15 +209,30 @@ Ext.define('Ext.grid.column.Column', {
     initDraggable: Ext.emptyFn,
 
 <span id='Ext-grid-column-Column-cfg-tdCls'>    /**
-</span>     * @cfg {String} tdCls &lt;p&gt;Optional. A CSS class names to apply to the table cells for this column.&lt;/p&gt;
+</span>     * @cfg {String} tdCls
+     * A CSS class names to apply to the table cells for this column.
+     */
+
+<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.
+     */
+
+<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.
      */
 
 <span id='Ext-grid-column-Column-property-triggerEl'>    /**
-</span>     * @property {Ext.core.Element} triggerEl
+</span>     * @property {Ext.Element} triggerEl
+     * Element that acts as button for column header dropdown menu.
      */
 
 <span id='Ext-grid-column-Column-property-textEl'>    /**
-</span>     * @property {Ext.core.Element} textEl
+</span>     * @property {Ext.Element} textEl
+     * Element that contains the text in column header.
      */
 
 <span id='Ext-grid-column-Column-property-isHeader'>    /**
@@ -218,8 +245,9 @@ Ext.define('Ext.grid.column.Column', {
     initComponent: function() {
         var me = this,
             i,
-            len;
-        
+            len,
+            item;
+
         if (Ext.isDefined(me.header)) {
             me.text = me.header;
             delete me.header;
@@ -262,9 +290,12 @@ Ext.define('Ext.grid.column.Column', {
 
             // Acquire initial width from sub headers
             for (i = 0, len = me.items.length; i &lt; len; i++) {
-                me.width += me.items[i].width || Ext.grid.header.Container.prototype.defaultWidth;
+                item = me.items[i];
+                if (!item.hidden) {
+                    me.width += item.width || Ext.grid.header.Container.prototype.defaultWidth;
+                }
                 //&lt;debug&gt;
-                if (me.items[i].flex) {
+                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;
@@ -273,15 +304,11 @@ Ext.define('Ext.grid.column.Column', {
 
             me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
             me.sortable = false;
-            me.fixed = true;
+            me.resizable = false;
             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'
-        });
+        me.addChildEls('titleContainer', 'triggerEl', 'textEl');
 
         // Initialize as a HeaderContainer
         me.callParent(arguments);
@@ -290,16 +317,18 @@ Ext.define('Ext.grid.column.Column', {
     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
@@ -307,12 +336,69 @@ Ext.define('Ext.grid.column.Column', {
         return me.callParent(arguments);
     },
 
-    // note that this should invalidate the menu cache
+    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);
-        } 
+        }
     },
 
     // Find the topmost HeaderContainer: An ancestor which is NOT a Header.
@@ -322,13 +408,26 @@ Ext.define('Ext.grid.column.Column', {
     },
 
 <span id='Ext-grid-column-Column-method-getIndex'>    /**
-</span>     * 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 &lt;code&gt;false&lt;/code&gt;
+</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}
      */
     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;
@@ -342,7 +441,7 @@ Ext.define('Ext.grid.column.Column', {
             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) {
@@ -366,34 +465,42 @@ Ext.define('Ext.grid.column.Column', {
         });
     },
 
-    setSize: function(width, height) {
+<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,
-            ownerHeaderCt = me.getOwnerHeaderCt(),
             siblings,
             len, i,
             oldWidth = me.getWidth(),
-            newWidth = 0;
+            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;
 
-                // Size the owning group to the size of its sub headers 
-                if (siblings[len - 1].rendered) {
-
-                    for (i = 0; i &lt; len; i++) {
-                        newWidth += (siblings[i] === me) ? width : siblings[i].getWidth();
+                for (i = 0; i &lt; len; i++) {
+                    sibling = siblings[i];
+                    if (!sibling.hidden) {
+                        groupWidth += (sibling === me) ? width : sibling.getWidth();
                     }
-                    headerCt.minWidth = newWidth;
-                    headerCt.setWidth(newWidth);
                 }
+                headerCt.setWidth(groupWidth, doLayout);
+            } else if (doLayout !== false) {
+                // Allow the owning Container to perform the sizing
+                headerCt.doLayout();
             }
-            me.callParent(arguments);
         }
     },
 
@@ -409,18 +516,21 @@ Ext.define('Ext.grid.column.Column', {
         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
-    setPadding: function() {
+    // Total available header height must be passed to enable padding for inner elements to be calculated.
+    setPadding: function(headerHeight) {
         var me = this,
-            headerHeight,
-            lineHeight = parseInt(me.textEl.getStyle('line-height'), 10);
+            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) {
-            headerHeight = me.el.getViewSize().height;
             if (me.titleContainer.getHeight() &lt; headerHeight) {
                 me.titleContainer.dom.style.height = headerHeight + 'px';
             }
@@ -442,7 +552,8 @@ Ext.define('Ext.grid.column.Column', {
 
     onDestroy: function() {
         var me = this;
-        Ext.destroy(me.keyNav);
+        // force destroy on the textEl, IE reports a leak
+        Ext.destroy(me.textEl, me.keyNav);
         delete me.keyNav;
         me.callParent(arguments);
     },
@@ -467,7 +578,7 @@ Ext.define('Ext.grid.column.Column', {
 
 <span id='Ext-grid-column-Column-method-onElDblClick'>    /**
 </span>     * @private
-     * Double click 
+     * Double click
      * @param e
      * @param t
      */
@@ -502,11 +613,11 @@ Ext.define('Ext.grid.column.Column', {
 </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 {TableView} view TableView Component
-     * @param {HtmlElement} cell Cell HtmlElement the event took place within
+     * @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 {EventObject} e Original event
+     * @param {Ext.EventObject} e Original event
      */
     processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
         return this.fireEvent.apply(this, arguments);
@@ -516,7 +627,7 @@ Ext.define('Ext.grid.column.Column', {
         var me = this,
             idx,
             nextIdx;
-            
+
         if (me.sortable) {
             idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
 
@@ -534,8 +645,9 @@ Ext.define('Ext.grid.column.Column', {
     },
 
 <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.
+</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}
      */
     getSortParam: function() {
         return this.dataIndex;
@@ -628,22 +740,30 @@ Ext.define('Ext.grid.column.Column', {
 
     show: function() {
         var me = this,
-            ownerCt = me.getOwnerHeaderCt(),
-            lb,
+            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
-        lb = me.ownerCt.componentLayout.layoutBusy;
-        me.ownerCt.componentLayout.layoutBusy = true;
+
+        // Suspend our owner's layouts (both component and container):
+        ownerCtCompLayout.layoutBusy = ownerCtLayout.layoutBusy = true;
+
         me.callParent(arguments);
-        me.ownerCt.componentLayout.layoutBusy = lb;
+
+        ownerCtCompLayout.layoutBusy = ownerCtCompLayoutBusy;
+        ownerCtLayout.layoutBusy = ownerCtLayoutBusy;
 
         // If a sub header, ensure that the group header is visible
         if (me.isSubHeader) {
-            if (!me.ownerCt.isVisible()) {
-                me.ownerCt.show();
+            if (!ownerCt.isVisible()) {
+                ownerCt.show();
             }
         }
 
@@ -651,23 +771,29 @@ Ext.define('Ext.grid.column.Column', {
         if (me.isGroupHeader &amp;&amp; !me.query(':not([hidden])').length) {
             items = me.query('&gt;*');
             for (i = 0, len = items.length; i &lt; len; i++) {
-                items[i].show();
+                item = items[i];
+                item.preventLayout = true;
+                item.show();
+                newWidth += item.getWidth();
+                delete item.preventLayout;
             }
+            me.setWidth(newWidth);
         }
 
         // Resize the owning group to accommodate
-        if (me.ownerCt.isGroupHeader) {
-            items = me.ownerCt.query('&gt;:not([hidden])');
+        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();
             }
-            me.ownerCt.minWidth = newWidth;
-            me.ownerCt.setWidth(newWidth);
+            ownerCt.minWidth = newWidth;
+            ownerCt.setWidth(newWidth);
         }
 
         // Notify owning HeaderContainer
+        ownerCt = me.getOwnerHeaderCt();
         if (ownerCt) {
-            ownerCt.onHeaderShow(me);
+            ownerCt.onHeaderShow(me, me.preventLayout);
         }
     },
 
@@ -709,27 +835,27 @@ Ext.define('Ext.grid.column.Column', {
     isOnRightEdge: function(e) {
         return (this.el.getRight() - e.getXY()[0] &lt;= this.handleWidth);
     }
-    
-<span id='Ext-grid-column-Column-method-getEditor'>    /**
-</span>     * 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
-    
-    
+
+<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>     * 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
+</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.
      */
-});</pre>
+});
+</pre>
 </body>
 </html>