Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / Column.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-grid-column-Column'>/**
19 </span> * @class Ext.grid.column.Column
20  * @extends Ext.grid.header.Container
21  * 
22  * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses
23  * both the grid header configuration as well as displaying data within the grid itself. If the
24  * {@link #columns} configuration is specified, this column will become a column group and can
25  * container other columns inside. In general, this class will not be created directly, rather
26  * an array of column configurations will be passed to the grid:
27  * 
28  * {@img Ext.grid.column.Column/Ext.grid.column.Column.png Ext.grid.column.Column grid column}
29  *
30  * ## Code
31  *
32  *     Ext.create('Ext.data.Store', {
33  *         storeId:'employeeStore',
34  *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
35  *         data:[
36  *             {firstname:&quot;Michael&quot;, lastname:&quot;Scott&quot;, senority:7, dep:&quot;Manangement&quot;, hired:&quot;01/10/2004&quot;},
37  *             {firstname:&quot;Dwight&quot;, lastname:&quot;Schrute&quot;, senority:2, dep:&quot;Sales&quot;, hired:&quot;04/01/2004&quot;},
38  *             {firstname:&quot;Jim&quot;, lastname:&quot;Halpert&quot;, senority:3, dep:&quot;Sales&quot;, hired:&quot;02/22/2006&quot;},
39  *             {firstname:&quot;Kevin&quot;, lastname:&quot;Malone&quot;, senority:4, dep:&quot;Accounting&quot;, hired:&quot;06/10/2007&quot;},
40  *             {firstname:&quot;Angela&quot;, lastname:&quot;Martin&quot;, senority:5, dep:&quot;Accounting&quot;, hired:&quot;10/21/2008&quot;}                        
41  *         ]
42  *     });
43  *     
44  *     Ext.create('Ext.grid.Panel', {
45  *         title: 'Column Demo',
46  *         store: Ext.data.StoreManager.lookup('employeeStore'),
47  *         columns: [
48  *             {text: 'First Name',  dataIndex:'firstname'},
49  *             {text: 'Last Name',  dataIndex:'lastname'},
50  *             {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},              
51  *             {text: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
52  *         ],
53  *         width: 400,
54  *         renderTo: Ext.getBody()
55  *     });
56  *     
57  * ## Convenience Subclasses
58  * There are several column subclasses that provide default rendering for various data types
59  *
60  *  - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline
61  *  - {@link Ext.grid.column.Boolean}: Renders for boolean values 
62  *  - {@link Ext.grid.column.Date}: Renders for date values
63  *  - {@link Ext.grid.column.Number}: Renders for numeric values
64  *  - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data 
65  * 
66  * ## Setting Sizes
67  * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either
68  * be given an explicit width value or a flex configuration. If no width is specified the grid will
69  * automatically the size the column to 100px. For column groups, the size is calculated by measuring
70  * the width of the child columns, so a width option should not be specified in that case.
71  * 
72  * ## Header Options
73  *  - {@link #text}: Sets the header text for the column
74  *  - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu
75  *  - {@link #hideable}: Specifies whether the column can be hidden using the column menu
76  *  - {@link #menuDisabled}: Disables the column header menu
77  *  - {@link #draggable}: Specifies whether the column header can be reordered by dragging
78  *  - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping}
79  * 
80  * ## Data Options
81  *  - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column.
82  *  - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid
83  * 
84  * @xtype gridcolumn
85  */
86 Ext.define('Ext.grid.column.Column', {
87     extend: 'Ext.grid.header.Container',
88     alias: 'widget.gridcolumn',
89     requires: ['Ext.util.KeyNav'],
90     alternateClassName: 'Ext.grid.Column',
91
92     baseCls: Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable',
93
94     // Not the standard, automatically applied overCls because we must filter out overs of child headers.
95     hoverCls: Ext.baseCSSPrefix + 'column-header-over',
96
97     handleWidth: 5,
98
99     sortState: null,
100
101     possibleSortStates: ['ASC', 'DESC'],
102
103     renderTpl:
104         '&lt;div class=&quot;' + Ext.baseCSSPrefix + 'column-header-inner&quot;&gt;' +
105             '&lt;span class=&quot;' + Ext.baseCSSPrefix + 'column-header-text&quot;&gt;' +
106                 '{text}' +
107             '&lt;/span&gt;' +
108             '&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;' +
109         '&lt;/div&gt;',
110
111 <span id='Ext-grid-column-Column-cfg-columns'>    /**
112 </span>     * @cfg {Array} columns
113      * &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;
114      * &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
115      * if all sub columns are dragged out of a group, the group is destroyed.
116      */
117
118 <span id='Ext-grid-column-Column-cfg-dataIndex'>    /**
119 </span>     * @cfg {String} dataIndex &lt;p&gt;&lt;b&gt;Required&lt;/b&gt;. The name of the field in the
120      * grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from
121      * which to draw the column's value.&lt;/p&gt;
122      */
123     dataIndex: null,
124
125 <span id='Ext-grid-column-Column-cfg-text'>    /**
126 </span>     * @cfg {String} text Optional. The header text to be used as innerHTML
127      * (html tags are accepted) to display in the Grid.  &lt;b&gt;Note&lt;/b&gt;: to
128      * have a clickable header with no text displayed you can use the
129      * default of &lt;tt&gt;'&amp;#160;'&lt;/tt&gt;.
130      */
131     text: '&amp;#160',
132
133 <span id='Ext-grid-column-Column-cfg-sortable'>    /**
134 </span>     * @cfg {Boolean} sortable Optional. &lt;tt&gt;true&lt;/tt&gt; if sorting is to be allowed on this column.
135      * Whether local/remote sorting is used is specified in &lt;code&gt;{@link Ext.data.Store#remoteSort}&lt;/code&gt;.
136      */
137     sortable: true,
138     
139 <span id='Ext-grid-column-Column-cfg-groupable'>    /**
140 </span>     * @cfg {Boolean} groupable Optional. If the grid uses a {@link Ext.grid.feature.Grouping}, this option
141      * may be used to disable the header menu item to group by the column selected. By default,
142      * the header menu group option is enabled. Set to false to disable (but still show) the
143      * group option in the header menu for the column.
144      */
145      
146 <span id='Ext-grid-column-Column-cfg-hideable'>    /**
147 </span>     * @cfg {Boolean} hideable Optional. Specify as &lt;tt&gt;false&lt;/tt&gt; to prevent the user from hiding this column
148      * (defaults to true).
149      */
150     hideable: true,
151
152 <span id='Ext-grid-column-Column-cfg-menuDisabled'>    /**
153 </span>     * @cfg {Boolean} menuDisabled
154      * True to disabled the column header menu containing sort/hide options. Defaults to false.
155      */
156     menuDisabled: false,
157
158 <span id='Ext-grid-column-Column-cfg-renderer'>    /**
159 </span>     * @cfg {Function} renderer
160      * &lt;p&gt;A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it
161      * is rendered. Example:&lt;/p&gt;
162      * &lt;pre&gt;&lt;code&gt;{
163     renderer: function(value){
164         if (value === 1) {
165             return '1 person';
166         }
167         return value + ' people';
168     }
169 }
170      * &lt;/code&gt;&lt;/pre&gt;
171      * @param {Mixed} value The data value for the current cell
172      * @param {Object} metaData A collection of metadata about the current cell; can be used or modified by
173      * 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;.
174      * @param {Ext.data.Model} record The record for the current row
175      * @param {Number} rowIndex The index of the current row
176      * @param {Number} colIndex The index of the current column
177      * @param {Ext.data.Store} store The data store
178      * @param {Ext.view.View} view The current view
179      * @return {String} The HTML to be rendered
180      */
181     renderer: false,
182
183 <span id='Ext-grid-column-Column-cfg-align'>    /**
184 </span>     * @cfg {String} align Sets the alignment of the header and rendered columns.
185      * Defaults to 'left'.
186      */
187     align: 'left',
188
189 <span id='Ext-grid-column-Column-cfg-draggable'>    /**
190 </span>     * @cfg {Boolean} draggable Indicates whether or not the header can be drag and drop re-ordered.
191      * Defaults to true.
192      */
193     draggable: true,
194
195     // Header does not use the typical ComponentDraggable class and therefore we
196     // override this with an emptyFn. It is controlled at the HeaderDragZone.
197     initDraggable: Ext.emptyFn,
198
199 <span id='Ext-grid-column-Column-cfg-tdCls'>    /**
200 </span>     * @cfg {String} tdCls &lt;p&gt;Optional. A CSS class names to apply to the table cells for this column.&lt;/p&gt;
201      */
202
203 <span id='Ext-grid-column-Column-property-triggerEl'>    /**
204 </span>     * @property {Ext.core.Element} triggerEl
205      */
206
207 <span id='Ext-grid-column-Column-property-textEl'>    /**
208 </span>     * @property {Ext.core.Element} textEl
209      */
210
211 <span id='Ext-grid-column-Column-property-isHeader'>    /**
212 </span>     * @private
213      * Set in this class to identify, at runtime, instances which are not instances of the
214      * HeaderContainer base class, but are in fact, the subclass: Header.
215      */
216     isHeader: true,
217
218     initComponent: function() {
219         var me = this,
220             i,
221             len;
222         
223         if (Ext.isDefined(me.header)) {
224             me.text = me.header;
225             delete me.header;
226         }
227
228         // Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the
229         // HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes
230         // method extends the available layout space to accommodate the &quot;desiredWidth&quot; of all the columns.
231         if (me.flex) {
232             me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
233         }
234         // Non-flexed Headers may never be squeezed in the event of a shortfall so
235         // always set their minWidth to their current width.
236         else {
237             me.minWidth = me.width;
238         }
239
240         if (!me.triStateSort) {
241             me.possibleSortStates.length = 2;
242         }
243
244         // A group header; It contains items which are themselves Headers
245         if (Ext.isDefined(me.columns)) {
246             me.isGroupHeader = true;
247
248             //&lt;debug&gt;
249             if (me.dataIndex) {
250                 Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
251             }
252             if ((me.width &amp;&amp; me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) {
253                 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.');
254             }
255             //&lt;/debug&gt;
256
257             // The headers become child items
258             me.items = me.columns;
259             delete me.columns;
260             delete me.flex;
261             me.width = 0;
262
263             // Acquire initial width from sub headers
264             for (i = 0, len = me.items.length; i &lt; len; i++) {
265                 me.width += me.items[i].width || Ext.grid.header.Container.prototype.defaultWidth;
266                 //&lt;debug&gt;
267                 if (me.items[i].flex) {
268                     Ext.Error.raise('Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.');
269                 }
270                 //&lt;/debug&gt;
271             }
272             me.minWidth = me.width;
273
274             me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
275             me.sortable = false;
276             me.fixed = true;
277             me.align = 'center';
278         }
279
280         Ext.applyIf(me.renderSelectors, {
281             titleContainer: '.' + Ext.baseCSSPrefix + 'column-header-inner',
282             triggerEl: '.' + Ext.baseCSSPrefix + 'column-header-trigger',
283             textEl: '.' + Ext.baseCSSPrefix + 'column-header-text'
284         });
285
286         // Initialize as a HeaderContainer
287         me.callParent(arguments);
288     },
289
290     onAdd: function(childHeader) {
291         childHeader.isSubHeader = true;
292         childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
293     },
294
295     onRemove: function(childHeader) {
296         childHeader.isSubHeader = false;
297         childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
298     },
299
300     initRenderData: function() {
301         var me = this;
302         
303         Ext.applyIf(me.renderData, {
304             text: me.text,
305             menuDisabled: me.menuDisabled
306         });
307         return me.callParent(arguments);
308     },
309
310     // note that this should invalidate the menu cache
311     setText: function(text) {
312         this.text = text;
313         if (this.rendered) {
314             this.textEl.update(text);
315         } 
316     },
317
318     // Find the topmost HeaderContainer: An ancestor which is NOT a Header.
319     // Group Headers are themselves HeaderContainers
320     getOwnerHeaderCt: function() {
321         return this.up(':not([isHeader])');
322     },
323
324 <span id='Ext-grid-column-Column-method-getIndex'>    /**
325 </span>     * Returns the true grid column index assiciated with this Column only if this column is a base level Column.
326      * If it is a group column, it returns &lt;code&gt;false&lt;/code&gt;
327      */
328     getIndex: function() {
329         return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
330     },
331
332     afterRender: function() {
333         var me = this,
334             el = me.el;
335
336         me.callParent(arguments);
337
338         el.addCls(Ext.baseCSSPrefix + 'column-header-align-' + me.align).addClsOnOver(me.overCls);
339
340         me.mon(el, {
341             click:     me.onElClick,
342             dblclick:  me.onElDblClick,
343             scope:     me
344         });
345         
346         // BrowserBug: Ie8 Strict Mode, this will break the focus for this browser,
347         // must be fixed when focus management will be implemented.
348         if (!Ext.isIE8 || !Ext.isStrict) {
349             me.mon(me.getFocusEl(), {
350                 focus: me.onTitleMouseOver,
351                 blur: me.onTitleMouseOut,
352                 scope: me
353             });
354         }
355
356         me.mon(me.titleContainer, {
357             mouseenter:  me.onTitleMouseOver,
358             mouseleave:  me.onTitleMouseOut,
359             scope:      me
360         });
361
362         me.keyNav = Ext.create('Ext.util.KeyNav', el, {
363             enter: me.onEnterKey,
364             down: me.onDownKey,
365             scope: me
366         });
367     },
368
369     setSize: function(width, height) {
370         var me = this,
371             headerCt = me.ownerCt,
372             ownerHeaderCt = me.getOwnerHeaderCt(),
373             siblings,
374             len, i,
375             oldWidth = me.getWidth(),
376             newWidth = 0;
377
378         if (width !== oldWidth) {
379
380             // Bubble size changes upwards to group headers
381             if (headerCt.isGroupHeader) {
382
383                 siblings = headerCt.items.items;
384                 len = siblings.length;
385
386                 // Size the owning group to the size of its sub headers 
387                 if (siblings[len - 1].rendered) {
388
389                     for (i = 0; i &lt; len; i++) {
390                         newWidth += (siblings[i] === me) ? width : siblings[i].getWidth();
391                     }
392                     headerCt.minWidth = newWidth;
393                     headerCt.setWidth(newWidth);
394                 }
395             }
396             me.callParent(arguments);
397         }
398     },
399
400     afterComponentLayout: function(width, height) {
401         var me = this,
402             ownerHeaderCt = this.getOwnerHeaderCt();
403
404         me.callParent(arguments);
405
406         // Only changes at the base level inform the grid's HeaderContainer which will update the View
407         // Skip this if the width is null or undefined which will be the Box layout's initial pass  through the child Components
408         // Skip this if it's the initial size setting in which case there is no ownerheaderCt yet - that is set afterRender
409         if (width &amp;&amp; !me.isGroupHeader &amp;&amp; ownerHeaderCt) {
410             ownerHeaderCt.onHeaderResize(me, width, true);
411         }
412     },
413
414     // private
415     // After the container has laid out and stretched, it calls this to correctly pad the inner to center the text vertically
416     setPadding: function() {
417         var me = this,
418             headerHeight,
419             lineHeight = parseInt(me.textEl.getStyle('line-height'), 10);
420
421         // Top title containing element must stretch to match height of sibling group headers
422         if (!me.isGroupHeader) {
423             headerHeight = me.el.getViewSize().height;
424             if (me.titleContainer.getHeight() &lt; headerHeight) {
425                 me.titleContainer.dom.style.height = headerHeight + 'px';
426             }
427         }
428         headerHeight = me.titleContainer.getViewSize().height;
429
430         // Vertically center the header text in potentially vertically stretched header
431         if (lineHeight) {
432             me.titleContainer.setStyle({
433                 paddingTop: Math.max(((headerHeight - lineHeight) / 2), 0) + 'px'
434             });
435         }
436
437         // Only IE needs this
438         if (Ext.isIE &amp;&amp; me.triggerEl) {
439             me.triggerEl.setHeight(headerHeight);
440         }
441     },
442
443     onDestroy: function() {
444         var me = this;
445         Ext.destroy(me.keyNav);
446         delete me.keyNav;
447         me.callParent(arguments);
448     },
449
450     onTitleMouseOver: function() {
451         this.titleContainer.addCls(this.hoverCls);
452     },
453
454     onTitleMouseOut: function() {
455         this.titleContainer.removeCls(this.hoverCls);
456     },
457
458     onDownKey: function(e) {
459         if (this.triggerEl) {
460             this.onElClick(e, this.triggerEl.dom || this.el.dom);
461         }
462     },
463
464     onEnterKey: function(e) {
465         this.onElClick(e, this.el.dom);
466     },
467
468 <span id='Ext-grid-column-Column-method-onElDblClick'>    /**
469 </span>     * @private
470      * Double click 
471      * @param e
472      * @param t
473      */
474     onElDblClick: function(e, t) {
475         var me = this,
476             ownerCt = me.ownerCt;
477         if (ownerCt &amp;&amp; Ext.Array.indexOf(ownerCt.items, me) !== 0 &amp;&amp; me.isOnLeftEdge(e) ) {
478             ownerCt.expandToFit(me.previousSibling('gridcolumn'));
479         }
480     },
481
482     onElClick: function(e, t) {
483
484         // The grid's docked HeaderContainer.
485         var me = this,
486             ownerHeaderCt = me.getOwnerHeaderCt();
487
488         if (ownerHeaderCt &amp;&amp; !ownerHeaderCt.ddLock) {
489             // Firefox doesn't check the current target in a within check.
490             // Therefore we check the target directly and then within (ancestors)
491             if (me.triggerEl &amp;&amp; (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
492                 ownerHeaderCt.onHeaderTriggerClick(me, e, t);
493             // if its not on the left hand edge, sort
494             } else if (e.getKey() || (!me.isOnLeftEdge(e) &amp;&amp; !me.isOnRightEdge(e))) {
495                 me.toggleSortState();
496                 ownerHeaderCt.onHeaderClick(me, e, t);
497             }
498         }
499     },
500
501 <span id='Ext-grid-column-Column-method-processEvent'>    /**
502 </span>     * @private
503      * Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView
504      * @param {String} type Event type, eg 'click'
505      * @param {TableView} view TableView Component
506      * @param {HtmlElement} cell Cell HtmlElement the event took place within
507      * @param {Number} recordIndex Index of the associated Store Model (-1 if none)
508      * @param {Number} cellIndex Cell index within the row
509      * @param {EventObject} e Original event
510      */
511     processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
512         return this.fireEvent.apply(this, arguments);
513     },
514
515     toggleSortState: function() {
516         var me = this,
517             idx,
518             nextIdx;
519             
520         if (me.sortable) {
521             idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
522
523             nextIdx = (idx + 1) % me.possibleSortStates.length;
524             me.setSortState(me.possibleSortStates[nextIdx]);
525         }
526     },
527
528     doSort: function(state) {
529         var ds = this.up('tablepanel').store;
530         ds.sort({
531             property: this.getSortParam(),
532             direction: state
533         });
534     },
535
536 <span id='Ext-grid-column-Column-method-getSortParam'>    /**
537 </span>     * Returns the parameter to sort upon when sorting this header. By default
538      * this returns the dataIndex and will not need to be overriden in most cases.
539      */
540     getSortParam: function() {
541         return this.dataIndex;
542     },
543
544     //setSortState: function(state, updateUI) {
545     //setSortState: function(state, doSort) {
546     setSortState: function(state, skipClear, initial) {
547         var me = this,
548             colSortClsPrefix = Ext.baseCSSPrefix + 'column-header-sort-',
549             ascCls = colSortClsPrefix + 'ASC',
550             descCls = colSortClsPrefix + 'DESC',
551             nullCls = colSortClsPrefix + 'null',
552             ownerHeaderCt = me.getOwnerHeaderCt(),
553             oldSortState = me.sortState;
554
555         if (oldSortState !== state &amp;&amp; me.getSortParam()) {
556             me.addCls(colSortClsPrefix + state);
557             // don't trigger a sort on the first time, we just want to update the UI
558             if (state &amp;&amp; !initial) {
559                 me.doSort(state);
560             }
561             switch (state) {
562                 case 'DESC':
563                     me.removeCls([ascCls, nullCls]);
564                     break;
565                 case 'ASC':
566                     me.removeCls([descCls, nullCls]);
567                     break;
568                 case null:
569                     me.removeCls([ascCls, descCls]);
570                     break;
571             }
572             if (ownerHeaderCt &amp;&amp; !me.triStateSort &amp;&amp; !skipClear) {
573                 ownerHeaderCt.clearOtherSortStates(me);
574             }
575             me.sortState = state;
576             ownerHeaderCt.fireEvent('sortchange', ownerHeaderCt, me, state);
577         }
578     },
579
580     hide: function() {
581         var me = this,
582             items,
583             len, i,
584             lb,
585             newWidth = 0,
586             ownerHeaderCt = me.getOwnerHeaderCt();
587
588         // Hiding means setting to zero width, so cache the width
589         me.oldWidth = me.getWidth();
590
591         // Hiding a group header hides itself, and then informs the HeaderContainer about its sub headers (Suppressing header layout)
592         if (me.isGroupHeader) {
593             items = me.items.items;
594             me.callParent(arguments);
595             ownerHeaderCt.onHeaderHide(me);
596             for (i = 0, len = items.length; i &lt; len; i++) {
597                 items[i].hidden = true;
598                 ownerHeaderCt.onHeaderHide(items[i], true);
599             }
600             return;
601         }
602
603         // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
604         lb = me.ownerCt.componentLayout.layoutBusy;
605         me.ownerCt.componentLayout.layoutBusy = true;
606         me.callParent(arguments);
607         me.ownerCt.componentLayout.layoutBusy = lb;
608
609         // Notify owning HeaderContainer
610         ownerHeaderCt.onHeaderHide(me);
611
612         if (me.ownerCt.isGroupHeader) {
613             // If we've just hidden the last header in a group, then hide the group
614             items = me.ownerCt.query('&gt;:not([hidden])');
615             if (!items.length) {
616                 me.ownerCt.hide();
617             }
618             // Size the group down to accommodate fewer sub headers
619             else {
620                 for (i = 0, len = items.length; i &lt; len; i++) {
621                     newWidth += items[i].getWidth();
622                 }
623                 me.ownerCt.minWidth = newWidth;
624                 me.ownerCt.setWidth(newWidth);
625             }
626         }
627     },
628
629     show: function() {
630         var me = this,
631             ownerCt = me.getOwnerHeaderCt(),
632             lb,
633             items,
634             len, i,
635             newWidth = 0;
636
637         // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
638         lb = me.ownerCt.componentLayout.layoutBusy;
639         me.ownerCt.componentLayout.layoutBusy = true;
640         me.callParent(arguments);
641         me.ownerCt.componentLayout.layoutBusy = lb;
642
643         // If a sub header, ensure that the group header is visible
644         if (me.isSubHeader) {
645             if (!me.ownerCt.isVisible()) {
646                 me.ownerCt.show();
647             }
648         }
649
650         // If we've just shown a group with all its sub headers hidden, then show all its sub headers
651         if (me.isGroupHeader &amp;&amp; !me.query(':not([hidden])').length) {
652             items = me.query('&gt;*');
653             for (i = 0, len = items.length; i &lt; len; i++) {
654                 items[i].show();
655             }
656         }
657
658         // Resize the owning group to accommodate
659         if (me.ownerCt.isGroupHeader) {
660             items = me.ownerCt.query('&gt;:not([hidden])');
661             for (i = 0, len = items.length; i &lt; len; i++) {
662                 newWidth += items[i].getWidth();
663             }
664             me.ownerCt.minWidth = newWidth;
665             me.ownerCt.setWidth(newWidth);
666         }
667
668         // Notify owning HeaderContainer
669         if (ownerCt) {
670             ownerCt.onHeaderShow(me);
671         }
672     },
673
674     getDesiredWidth: function() {
675         var me = this;
676         if (me.rendered &amp;&amp; me.componentLayout &amp;&amp; me.componentLayout.lastComponentSize) {
677             // headers always have either a width or a flex
678             // because HeaderContainer sets a defaults width
679             // therefore we can ignore the natural width
680             // we use the componentLayout's tracked width so that
681             // we can calculate the desired width when rendered
682             // but not visible because its being obscured by a layout
683             return me.componentLayout.lastComponentSize.width;
684         // Flexed but yet to be rendered this could be the case
685         // where a HeaderContainer and Headers are simply used as data
686         // structures and not rendered.
687         }
688         else if (me.flex) {
689             // this is going to be wrong, the defaultWidth
690             return me.width;
691         }
692         else {
693             return me.width;
694         }
695     },
696
697     getCellSelector: function() {
698         return '.' + Ext.baseCSSPrefix + 'grid-cell-' + this.getItemId();
699     },
700
701     getCellInnerSelector: function() {
702         return this.getCellSelector() + ' .' + Ext.baseCSSPrefix + 'grid-cell-inner';
703     },
704
705     isOnLeftEdge: function(e) {
706         return (e.getXY()[0] - this.el.getLeft() &lt;= this.handleWidth);
707     },
708
709     isOnRightEdge: function(e) {
710         return (this.el.getRight() - e.getXY()[0] &lt;= this.handleWidth);
711     }
712     
713 <span id='Ext-grid-column-Column-method-getEditor'>    /**
714 </span>     * Retrieves the editing field for editing associated with this header. Returns false if there
715      * is no field associated with the Header the method will return false. If the
716      * field has not been instantiated it will be created. Note: These methods only has an implementation
717      * if a Editing plugin has been enabled on the grid.
718      * @param record The {@link Ext.data.Model Model} instance being edited.
719      * @param {Mixed} defaultField An object representing a default field to be created
720      * @returns {Ext.form.field.Field} field
721      * @method getEditor
722      */
723     // intentionally omit getEditor and setEditor definitions bc we applyIf into columns
724     // when the editing plugin is injected
725     
726     
727 <span id='Ext-grid-column-Column-method-setEditor'>    /**
728 </span>     * Sets the form field to be used for editing. Note: This method only has an implementation
729      * if an Editing plugin has been enabled on the grid.
730      * @param {Mixed} field An object representing a field to be created. If no xtype is specified a 'textfield' is assumed.
731      * @method setEditor
732      */
733 });</pre>
734 </body>
735 </html>