docs/source/Column.html

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