src/grid/column/Column.js

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