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