docs/source/GridView.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.grid.GridView"></div>/**
  15  * @class Ext.grid.GridView
  16  * @extends Ext.util.Observable
  17  * <p>This class encapsulates the user interface of an {@link Ext.grid.GridPanel}.
  18  * Methods of this class may be used to access user interface elements to enable
  19  * special display effects. Do not change the DOM structure of the user interface.</p>
  20  * <p>This class does not provide ways to manipulate the underlying data. The data
  21  * model of a Grid is held in an {@link Ext.data.Store}.</p>
  22  * @constructor
  23  * @param {Object} config
  24  */
  25 Ext.grid.GridView = function(config){
  26     Ext.apply(this, config);
  27     // These events are only used internally by the grid components
  28     this.addEvents(
  29         <div id="event-Ext.grid.GridView-beforerowremoved"></div>/**
  30          * @event beforerowremoved
  31          * Internal UI Event. Fired before a row is removed.
  32          * @param {Ext.grid.GridView} view
  33          * @param {Number} rowIndex The index of the row to be removed.
  34          * @param {Ext.data.Record} record The Record to be removed
  35          */
  36         'beforerowremoved',
  37         <div id="event-Ext.grid.GridView-beforerowsinserted"></div>/**
  38          * @event beforerowsinserted
  39          * Internal UI Event. Fired before rows are inserted.
  40          * @param {Ext.grid.GridView} view
  41          * @param {Number} firstRow The index of the first row to be inserted.
  42          * @param {Number} lastRow The index of the last row to be inserted.
  43          */
  44         'beforerowsinserted',
  45         <div id="event-Ext.grid.GridView-beforerefresh"></div>/**
  46          * @event beforerefresh
  47          * Internal UI Event. Fired before the view is refreshed.
  48          * @param {Ext.grid.GridView} view
  49          */
  50         'beforerefresh',
  51         <div id="event-Ext.grid.GridView-rowremoved"></div>/**
  52          * @event rowremoved
  53          * Internal UI Event. Fired after a row is removed.
  54          * @param {Ext.grid.GridView} view
  55          * @param {Number} rowIndex The index of the row that was removed.
  56          * @param {Ext.data.Record} record The Record that was removed
  57          */
  58         'rowremoved',
  59         <div id="event-Ext.grid.GridView-rowsinserted"></div>/**
  60          * @event rowsinserted
  61          * Internal UI Event. Fired after rows are inserted.
  62          * @param {Ext.grid.GridView} view
  63          * @param {Number} firstRow The index of the first inserted.
  64          * @param {Number} lastRow The index of the last row inserted.
  65          */
  66         'rowsinserted',
  67         <div id="event-Ext.grid.GridView-rowupdated"></div>/**
  68          * @event rowupdated
  69          * Internal UI Event. Fired after a row has been updated.
  70          * @param {Ext.grid.GridView} view
  71          * @param {Number} firstRow The index of the row updated.
  72          * @param {Ext.data.record} record The Record backing the row updated.
  73          */
  74         'rowupdated',
  75         <div id="event-Ext.grid.GridView-refresh"></div>/**
  76          * @event refresh
  77          * Internal UI Event. Fired after the GridView's body has been refreshed.
  78          * @param {Ext.grid.GridView} view
  79          */
  80         'refresh'
  81     );
  82     Ext.grid.GridView.superclass.constructor.call(this);
  83 };
  84
  85 Ext.extend(Ext.grid.GridView, Ext.util.Observable, {
  86     <div id="method-Ext.grid.GridView-getRowClass"></div>/**
  87      * Override this function to apply custom CSS classes to rows during rendering.  You can also supply custom
  88      * parameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b>
  89      * parameter.  This function should return the CSS class name (or empty string '' for none) that will be added
  90      * to the row's wrapping div.  To apply multiple class names, simply return them space-delimited within the string
  91      * (e.g., 'my-class another-class'). Example usage:
  92     <pre><code>
  93 viewConfig: {
  94     forceFit: true,
  95     showPreview: true, // custom property
  96     enableRowBody: true, // required to create a second, full-width row to show expanded Record data
  97     getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
  98         if(this.showPreview){
  99             rp.body = '&lt;p>'+record.data.excerpt+'&lt;/p>';
 100             return 'x-grid3-row-expanded';
 101         }
 102         return 'x-grid3-row-collapsed';
 103     }
 104 },
 105     </code></pre>
 106      * @param {Record} record The {@link Ext.data.Record} corresponding to the current row.
 107      * @param {Number} index The row index.
 108      * @param {Object} rowParams A config object that is passed to the row template during rendering that allows
 109      * customization of various aspects of a grid row.
 110      * <p>If {@link #enableRowBody} is configured <b><tt></tt>true</b>, then the following properties may be set
 111      * by this function, and will be used to render a full-width expansion row below each grid row:</p>
 112      * <ul>
 113      * <li><code>body</code> : String <div class="sub-desc">An HTML fragment to be used as the expansion row's body content (defaults to '').</div></li>
 114      * <li><code>bodyStyle</code> : String <div class="sub-desc">A CSS style specification that will be applied to the expansion row's &lt;tr> element. (defaults to '').</div></li>
 115      * </ul>
 116      * The following property will be passed in, and may be appended to:
 117      * <ul>
 118      * <li><code>tstyle</code> : String <div class="sub-desc">A CSS style specification that willl be applied to the &lt;table> element which encapsulates
 119      * both the standard grid row, and any expansion row.</div></li>
 120      * </ul>
 121      * @param {Store} store The {@link Ext.data.Store} this grid is bound to
 122      * @method getRowClass
 123      * @return {String} a CSS class name to add to the row.
 124      */
 125     <div id="cfg-Ext.grid.GridView-enableRowBody"></div>/**
 126      * @cfg {Boolean} enableRowBody True to add a second TR element per row that can be used to provide a row body
 127      * that spans beneath the data row.  Use the {@link #getRowClass} method's rowParams config to customize the row body.
 128      */
 129     <div id="cfg-Ext.grid.GridView-emptyText"></div>/**
 130      * @cfg {String} emptyText Default text (html tags are accepted) to display in the grid body when no rows
 131      * are available (defaults to ''). This value will be used to update the <tt>{@link #mainBody}</tt>:
 132     <pre><code>
 133     this.mainBody.update('&lt;div class="x-grid-empty">' + this.emptyText + '&lt;/div>');
 134     </code></pre>
 135      */
 136     <div id="cfg-Ext.grid.GridView-headersDisabled"></div>/**
 137      * @cfg {Boolean} headersDisabled True to disable the grid column headers (defaults to <tt>false</tt>).
 138      * Use the {@link Ext.grid.ColumnModel ColumnModel} <tt>{@link Ext.grid.ColumnModel#menuDisabled menuDisabled}</tt>
 139      * config to disable the <i>menu</i> for individual columns.  While this config is true the
 140      * following will be disabled:<div class="mdetail-params"><ul>
 141      * <li>clicking on header to sort</li>
 142      * <li>the trigger to reveal the menu.</li>
 143      * </ul></div>
 144      */
 145     <div id="prop-Ext.grid.GridView-dragZone"></div>/**
 146      * <p>A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations
 147      * of the template methods of DragZone to enable dragging of the selected rows of a GridPanel.
 148      * See {@link Ext.grid.GridDragZone} for details.</p>
 149      * <p>This will <b>only</b> be present:<div class="mdetail-params"><ul>
 150      * <li><i>if</i> the owning GridPanel was configured with {@link Ext.grid.GridPanel#enableDragDrop enableDragDrop}: <tt>true</tt>.</li>
 151      * <li><i>after</i> the owning GridPanel has been rendered.</li>
 152      * </ul></div>
 153      * @property dragZone
 154      * @type {Ext.grid.GridDragZone}
 155      */
 156     <div id="cfg-Ext.grid.GridView-deferEmptyText"></div>/**
 157      * @cfg {Boolean} deferEmptyText True to defer <tt>{@link #emptyText}</tt> being applied until the store's
 158      * first load (defaults to <tt>true</tt>).
 159      */
 160     deferEmptyText : true,
 161     <div id="cfg-Ext.grid.GridView-scrollOffset"></div>/**
 162      * @cfg {Number} scrollOffset The amount of space to reserve for the vertical scrollbar
 163      * (defaults to <tt>undefined</tt>). If an explicit value isn't specified, this will be automatically
 164      * calculated.
 165      */
 166     scrollOffset : undefined,
 167     <div id="cfg-Ext.grid.GridView-autoFill"></div>/**
 168      * @cfg {Boolean} autoFill
 169      * Defaults to <tt>false</tt>.  Specify <tt>true</tt> to have the column widths re-proportioned
 170      * when the grid is <b>initially rendered</b>.  The
 171      * {@link Ext.grid.Column#width initially configured width}</tt> of each column will be adjusted
 172      * to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually
 173      * or programmatically), the other columns in the grid will <b>not</b> be resized to fit the grid width.
 174      * See <tt>{@link #forceFit}</tt> also.
 175      */
 176     autoFill : false,
 177     <div id="cfg-Ext.grid.GridView-forceFit"></div>/**
 178      * @cfg {Boolean} forceFit
 179      * Defaults to <tt>false</tt>.  Specify <tt>true</tt> to have the column widths re-proportioned
 180      * at <b>all times</b>.  The {@link Ext.grid.Column#width initially configured width}</tt> of each
 181      * column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are
 182      * later resized (manually or programmatically), the other columns in the grid <b>will</b> be resized
 183      * to fit the grid width. See <tt>{@link #autoFill}</tt> also.
 184      */
 185     forceFit : false,
 186     <div id="cfg-Ext.grid.GridView-sortClasses"></div>/**
 187      * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
 188      */
 189     sortClasses : ['sort-asc', 'sort-desc'],
 190     <div id="cfg-Ext.grid.GridView-sortAscText"></div>/**
 191      * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)
 192      */
 193     sortAscText : 'Sort Ascending',
 194     <div id="cfg-Ext.grid.GridView-sortDescText"></div>/**
 195      * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</tt>)
 196      */
 197     sortDescText : 'Sort Descending',
 198     <div id="cfg-Ext.grid.GridView-columnsText"></div>/**
 199      * @cfg {String} columnsText The text displayed in the 'Columns' menu item (defaults to <tt>'Columns'</tt>)
 200      */
 201     columnsText : 'Columns',
 202
 203     <div id="cfg-Ext.grid.GridView-selectedRowClass"></div>/**
 204      * @cfg {String} selectedRowClass The CSS class applied to a selected row (defaults to <tt>'x-grid3-row-selected'</tt>). An
 205      * example overriding the default styling:
 206     <pre><code>
 207     .x-grid3-row-selected {background-color: yellow;}
 208     </code></pre>
 209      * Note that this only controls the row, and will not do anything for the text inside it.  To style inner
 210      * facets (like text) use something like:
 211     <pre><code>
 212     .x-grid3-row-selected .x-grid3-cell-inner {
 213         color: #FFCC00;
 214     }
 215     </code></pre>
 216      * @type String
 217      */
 218     selectedRowClass : 'x-grid3-row-selected',
 219
 220     // private
 221     borderWidth : 2,
 222     tdClass : 'x-grid3-cell',
 223     hdCls : 'x-grid3-hd',
 224     markDirty : true,
 225
 226     <div id="cfg-Ext.grid.GridView-cellSelectorDepth"></div>/**
 227      * @cfg {Number} cellSelectorDepth The number of levels to search for cells in event delegation (defaults to <tt>4</tt>)
 228      */
 229     cellSelectorDepth : 4,
 230     <div id="cfg-Ext.grid.GridView-rowSelectorDepth"></div>/**
 231      * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to <tt>10</tt>)
 232      */
 233     rowSelectorDepth : 10,
 234
 235     <div id="cfg-Ext.grid.GridView-cellSelector"></div>/**
 236      * @cfg {String} cellSelector The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>)
 237      */
 238     cellSelector : 'td.x-grid3-cell',
 239     <div id="cfg-Ext.grid.GridView-rowSelector"></div>/**
 240      * @cfg {String} rowSelector The selector used to find rows internally (defaults to <tt>'div.x-grid3-row'</tt>)
 241      */
 242     rowSelector : 'div.x-grid3-row',
 243
 244     // private
 245     firstRowCls: 'x-grid3-row-first',
 246     lastRowCls: 'x-grid3-row-last',
 247     rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g,
 248
 249     /* -------------------------------- UI Specific ----------------------------- */
 250
 251     // private
 252     initTemplates : function(){
 253         var ts = this.templates || {};
 254         if(!ts.master){
 255             ts.master = new Ext.Template(
 256                     '<div class="x-grid3" hidefocus="true">',
 257                         '<div class="x-grid3-viewport">',
 258                             '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
 259                             '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
 260                         '</div>',
 261                         '<div class="x-grid3-resize-marker">&#160;</div>',
 262                         '<div class="x-grid3-resize-proxy">&#160;</div>',
 263                     '</div>'
 264                     );
 265         }
 266
 267         if(!ts.header){
 268             ts.header = new Ext.Template(
 269                     '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
 270                     '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
 271                     '</table>'
 272                     );
 273         }
 274
 275         if(!ts.hcell){
 276             ts.hcell = new Ext.Template(
 277                     '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
 278                     '{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
 279                     '</div></td>'
 280                     );
 281         }
 282
 283         if(!ts.body){
 284             ts.body = new Ext.Template('{rows}');
 285         }
 286
 287         if(!ts.row){
 288             ts.row = new Ext.Template(
 289                     '<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
 290                     '<tbody><tr>{cells}</tr>',
 291                     (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
 292                     '</tbody></table></div>'
 293                     );
 294         }
 295
 296         if(!ts.cell){
 297             ts.cell = new Ext.Template(
 298                     '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
 299                     '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',
 300                     '</td>'
 301                     );
 302         }
 303
 304         for(var k in ts){
 305             var t = ts[k];
 306             if(t && typeof t.compile == 'function' && !t.compiled){
 307                 t.disableFormats = true;
 308                 t.compile();
 309             }
 310         }
 311
 312         this.templates = ts;
 313         this.colRe = new RegExp('x-grid3-td-([^\\s]+)', '');
 314     },
 315
 316     // private
 317     fly : function(el){
 318         if(!this._flyweight){
 319             this._flyweight = new Ext.Element.Flyweight(document.body);
 320         }
 321         this._flyweight.dom = el;
 322         return this._flyweight;
 323     },
 324
 325     // private
 326     getEditorParent : function(){
 327         return this.scroller.dom;
 328     },
 329
 330     // private
 331     initElements : function(){
 332         var E = Ext.Element;
 333
 334         var el = this.grid.getGridEl().dom.firstChild;
 335         var cs = el.childNodes;
 336
 337         this.el = new E(el);
 338
 339         this.mainWrap = new E(cs[0]);
 340         this.mainHd = new E(this.mainWrap.dom.firstChild);
 341
 342         if(this.grid.hideHeaders){
 343             this.mainHd.setDisplayed(false);
 344         }
 345
 346         this.innerHd = this.mainHd.dom.firstChild;
 347         this.scroller = new E(this.mainWrap.dom.childNodes[1]);
 348         if(this.forceFit){
 349             this.scroller.setStyle('overflow-x', 'hidden');
 350         }
 351         <div id="prop-Ext.grid.GridView-mainBody"></div>/**
 352          * <i>Read-only</i>. The GridView's body Element which encapsulates all rows in the Grid.
 353          * This {@link Ext.Element Element} is only available after the GridPanel has been rendered.
 354          * @type Ext.Element
 355          * @property mainBody
 356          */
 357         this.mainBody = new E(this.scroller.dom.firstChild);
 358
 359         this.focusEl = new E(this.scroller.dom.childNodes[1]);
 360         this.focusEl.swallowEvent('click', true);
 361
 362         this.resizeMarker = new E(cs[1]);
 363         this.resizeProxy = new E(cs[2]);
 364     },
 365
 366     // private
 367     getRows : function(){
 368         return this.hasRows() ? this.mainBody.dom.childNodes : [];
 369     },
 370
 371     // finder methods, used with delegation
 372
 373     // private
 374     findCell : function(el){
 375         if(!el){
 376             return false;
 377         }
 378         return this.fly(el).findParent(this.cellSelector, this.cellSelectorDepth);
 379     },
 380
 381     <div id="method-Ext.grid.GridView-findCellIndex"></div>/**
 382      * <p>Return the index of the grid column which contains the passed HTMLElement.</p>
 383      * See also {@link #findRowIndex}
 384      * @param {HTMLElement} el The target element
 385      * @return {Number} The column index, or <b>false</b> if the target element is not within a row of this GridView.
 386      */
 387     findCellIndex : function(el, requiredCls){
 388         var cell = this.findCell(el);
 389         if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){
 390             return this.getCellIndex(cell);
 391         }
 392         return false;
 393     },
 394
 395     // private
 396     getCellIndex : function(el){
 397         if(el){
 398             var m = el.className.match(this.colRe);
 399             if(m && m[1]){
 400                 return this.cm.getIndexById(m[1]);
 401             }
 402         }
 403         return false;
 404     },
 405
 406     // private
 407     findHeaderCell : function(el){
 408         var cell = this.findCell(el);
 409         return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null;
 410     },
 411
 412     // private
 413     findHeaderIndex : function(el){
 414         return this.findCellIndex(el, this.hdCls);
 415     },
 416
 417     <div id="method-Ext.grid.GridView-findRow"></div>/**
 418      * Return the HtmlElement representing the grid row which contains the passed element.
 419      * @param {HTMLElement} el The target HTMLElement
 420      * @return {HTMLElement} The row element, or null if the target element is not within a row of this GridView.
 421      */
 422     findRow : function(el){
 423         if(!el){
 424             return false;
 425         }
 426         return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth);
 427     },
 428
 429     <div id="method-Ext.grid.GridView-findRowIndex"></div>/**
 430      * <p>Return the index of the grid row which contains the passed HTMLElement.</p>
 431      * See also {@link #findCellIndex}
 432      * @param {HTMLElement} el The target HTMLElement
 433      * @return {Number} The row index, or <b>false</b> if the target element is not within a row of this GridView.
 434      */
 435     findRowIndex : function(el){
 436         var r = this.findRow(el);
 437         return r ? r.rowIndex : false;
 438     },
 439
 440     // getter methods for fetching elements dynamically in the grid
 441
 442     <div id="method-Ext.grid.GridView-getRow"></div>/**
 443      * Return the <tt>&lt;div></tt> HtmlElement which represents a Grid row for the specified index.
 444      * @param {Number} index The row index
 445      * @return {HtmlElement} The div element.
 446      */
 447     getRow : function(row){
 448         return this.getRows()[row];
 449     },
 450
 451     <div id="method-Ext.grid.GridView-getCell"></div>/**
 452      * Returns the grid's <tt>&lt;td></tt> HtmlElement at the specified coordinates.
 453      * @param {Number} row The row index in which to find the cell.
 454      * @param {Number} col The column index of the cell.
 455      * @return {HtmlElement} The td at the specified coordinates.
 456      */
 457     getCell : function(row, col){
 458         return this.getRow(row).getElementsByTagName('td')[col];
 459     },
 460
 461     <div id="method-Ext.grid.GridView-getHeaderCell"></div>/**
 462      * Return the <tt>&lt;td></tt> HtmlElement which represents the Grid's header cell for the specified column index.
 463      * @param {Number} index The column index
 464      * @return {HtmlElement} The td element.
 465      */
 466     getHeaderCell : function(index){
 467       return this.mainHd.dom.getElementsByTagName('td')[index];
 468     },
 469
 470     // manipulating elements
 471
 472     // private - use getRowClass to apply custom row classes
 473     addRowClass : function(row, cls){
 474         var r = this.getRow(row);
 475         if(r){
 476             this.fly(r).addClass(cls);
 477         }
 478     },
 479
 480     // private
 481     removeRowClass : function(row, cls){
 482         var r = this.getRow(row);
 483         if(r){
 484             this.fly(r).removeClass(cls);
 485         }
 486     },
 487
 488     // private
 489     removeRow : function(row){
 490         Ext.removeNode(this.getRow(row));
 491         this.syncFocusEl(row);
 492     },
 493
 494     // private
 495     removeRows : function(firstRow, lastRow){
 496         var bd = this.mainBody.dom;
 497         for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
 498             Ext.removeNode(bd.childNodes[firstRow]);
 499         }
 500         this.syncFocusEl(firstRow);
 501     },
 502
 503     // scrolling stuff
 504
 505     // private
 506     getScrollState : function(){
 507         var sb = this.scroller.dom;
 508         return {left: sb.scrollLeft, top: sb.scrollTop};
 509     },
 510
 511     // private
 512     restoreScroll : function(state){
 513         var sb = this.scroller.dom;
 514         sb.scrollLeft = state.left;
 515         sb.scrollTop = state.top;
 516     },
 517
 518     <div id="method-Ext.grid.GridView-scrollToTop"></div>/**
 519      * Scrolls the grid to the top
 520      */
 521     scrollToTop : function(){
 522         this.scroller.dom.scrollTop = 0;
 523         this.scroller.dom.scrollLeft = 0;
 524     },
 525
 526     // private
 527     syncScroll : function(){
 528       this.syncHeaderScroll();
 529       var mb = this.scroller.dom;
 530         this.grid.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
 531     },
 532
 533     // private
 534     syncHeaderScroll : function(){
 535         var mb = this.scroller.dom;
 536         this.innerHd.scrollLeft = mb.scrollLeft;
 537         this.innerHd.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
 538     },
 539
 540     // private
 541     updateSortIcon : function(col, dir){
 542         var sc = this.sortClasses;
 543         var hds = this.mainHd.select('td').removeClass(sc);
 544         hds.item(col).addClass(sc[dir == 'DESC' ? 1 : 0]);
 545     },
 546
 547     // private
 548     updateAllColumnWidths : function(){
 549         var tw = this.getTotalWidth(),
 550             clen = this.cm.getColumnCount(),
 551             ws = [],
 552             len,
 553             i;
 554         for(i = 0; i < clen; i++){
 555             ws[i] = this.getColumnWidth(i);
 556         }
 557         this.innerHd.firstChild.style.width = this.getOffsetWidth();
 558         this.innerHd.firstChild.firstChild.style.width = tw;
 559         this.mainBody.dom.style.width = tw;
 560         for(i = 0; i < clen; i++){
 561             var hd = this.getHeaderCell(i);
 562             hd.style.width = ws[i];
 563         }
 564
 565         var ns = this.getRows(), row, trow;
 566         for(i = 0, len = ns.length; i < len; i++){
 567             row = ns[i];
 568             row.style.width = tw;
 569             if(row.firstChild){
 570                 row.firstChild.style.width = tw;
 571                 trow = row.firstChild.rows[0];
 572                 for (var j = 0; j < clen; j++) {
 573                    trow.childNodes[j].style.width = ws[j];
 574                 }
 575             }
 576         }
 577
 578         this.onAllColumnWidthsUpdated(ws, tw);
 579     },
 580
 581     // private
 582     updateColumnWidth : function(col, width){
 583         var w = this.getColumnWidth(col);
 584         var tw = this.getTotalWidth();
 585         this.innerHd.firstChild.style.width = this.getOffsetWidth();
 586         this.innerHd.firstChild.firstChild.style.width = tw;
 587         this.mainBody.dom.style.width = tw;
 588         var hd = this.getHeaderCell(col);
 589         hd.style.width = w;
 590
 591         var ns = this.getRows(), row;
 592         for(var i = 0, len = ns.length; i < len; i++){
 593             row = ns[i];
 594             row.style.width = tw;
 595             if(row.firstChild){
 596                 row.firstChild.style.width = tw;
 597                 row.firstChild.rows[0].childNodes[col].style.width = w;
 598             }
 599         }
 600
 601         this.onColumnWidthUpdated(col, w, tw);
 602     },
 603
 604     // private
 605     updateColumnHidden : function(col, hidden){
 606         var tw = this.getTotalWidth();
 607         this.innerHd.firstChild.style.width = this.getOffsetWidth();
 608         this.innerHd.firstChild.firstChild.style.width = tw;
 609         this.mainBody.dom.style.width = tw;
 610         var display = hidden ? 'none' : '';
 611
 612         var hd = this.getHeaderCell(col);
 613         hd.style.display = display;
 614
 615         var ns = this.getRows(), row;
 616         for(var i = 0, len = ns.length; i < len; i++){
 617             row = ns[i];
 618             row.style.width = tw;
 619             if(row.firstChild){
 620                 row.firstChild.style.width = tw;
 621                 row.firstChild.rows[0].childNodes[col].style.display = display;
 622             }
 623         }
 624
 625         this.onColumnHiddenUpdated(col, hidden, tw);
 626         delete this.lastViewWidth; // force recalc
 627         this.layout();
 628     },
 629
 630     // private
 631     doRender : function(cs, rs, ds, startRow, colCount, stripe){
 632         var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
 633         var tstyle = 'width:'+this.getTotalWidth()+';';
 634         // buffers
 635         var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
 636         for(var j = 0, len = rs.length; j < len; j++){
 637             r = rs[j]; cb = [];
 638             var rowIndex = (j+startRow);
 639             for(var i = 0; i < colCount; i++){
 640                 c = cs[i];
 641                 p.id = c.id;
 642                 p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
 643                 p.attr = p.cellAttr = '';
 644                 p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
 645                 p.style = c.style;
 646                 if(Ext.isEmpty(p.value)){
 647                     p.value = '&#160;';
 648                 }
 649                 if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){
 650                     p.css += ' x-grid3-dirty-cell';
 651                 }
 652                 cb[cb.length] = ct.apply(p);
 653             }
 654             var alt = [];
 655             if(stripe && ((rowIndex+1) % 2 === 0)){
 656                 alt[0] = 'x-grid3-row-alt';
 657             }
 658             if(r.dirty){
 659                 alt[1] = ' x-grid3-dirty-row';
 660             }
 661             rp.cols = colCount;
 662             if(this.getRowClass){
 663                 alt[2] = this.getRowClass(r, rowIndex, rp, ds);
 664             }
 665             rp.alt = alt.join(' ');
 666             rp.cells = cb.join('');
 667             buf[buf.length] =  rt.apply(rp);
 668         }
 669         return buf.join('');
 670     },
 671
 672     // private
 673     processRows : function(startRow, skipStripe){
 674         if(!this.ds || this.ds.getCount() < 1){
 675             return;
 676         }
 677         var rows = this.getRows();
 678         skipStripe = skipStripe || !this.grid.stripeRows;
 679         startRow = startRow || 0;
 680         Ext.each(rows, function(row, idx){
 681             row.rowIndex = idx;
 682             if(!skipStripe){
 683                 row.className = row.className.replace(this.rowClsRe, ' ');
 684                 if ((idx + 1) % 2 === 0){
 685                     row.className += ' x-grid3-row-alt';
 686                 }
 687             }
 688         }, this);
 689         // add first/last-row classes
 690         if(startRow === 0){
 691             Ext.fly(rows[0]).addClass(this.firstRowCls);
 692         }
 693         Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
 694     },
 695
 696     afterRender : function(){
 697         if(!this.ds || !this.cm){
 698             return;
 699         }
 700         this.mainBody.dom.innerHTML = this.renderRows() || '&#160;';
 701         this.processRows(0, true);
 702
 703         if(this.deferEmptyText !== true){
 704             this.applyEmptyText();
 705         }
 706     },
 707
 708     // private
 709     renderUI : function(){
 710
 711         var header = this.renderHeaders();
 712         var body = this.templates.body.apply({rows:'&#160;'});
 713
 714
 715         var html = this.templates.master.apply({
 716             body: body,
 717             header: header,
 718             ostyle: 'width:'+this.getOffsetWidth()+';',
 719             bstyle: 'width:'+this.getTotalWidth()+';'
 720         });
 721
 722         var g = this.grid;
 723
 724         g.getGridEl().dom.innerHTML = html;
 725
 726         this.initElements();
 727
 728         // get mousedowns early
 729         Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
 730         this.mainHd.on({
 731             scope: this,
 732             mouseover: this.handleHdOver,
 733             mouseout: this.handleHdOut,
 734             mousemove: this.handleHdMove
 735         });
 736
 737         this.scroller.on('scroll', this.syncScroll,  this);
 738         if(g.enableColumnResize !== false){
 739             this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
 740         }
 741
 742         if(g.enableColumnMove){
 743             this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
 744             this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
 745         }
 746
 747         if(g.enableHdMenu !== false){
 748             this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
 749             this.hmenu.add(
 750                 {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
 751                 {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
 752             );
 753             if(g.enableColumnHide !== false){
 754                 this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
 755                 this.colMenu.on({
 756                     scope: this,
 757                     beforeshow: this.beforeColMenuShow,
 758                     itemclick: this.handleHdMenuClick
 759                 });
 760                 this.hmenu.add('-', {
 761                     itemId:'columns',
 762                     hideOnClick: false,
 763                     text: this.columnsText,
 764                     menu: this.colMenu,
 765                     iconCls: 'x-cols-icon'
 766                 });
 767             }
 768             this.hmenu.on('itemclick', this.handleHdMenuClick, this);
 769         }
 770
 771         if(g.trackMouseOver){
 772             this.mainBody.on({
 773                 scope: this,
 774                 mouseover: this.onRowOver,
 775                 mouseout: this.onRowOut
 776             });
 777         }
 778
 779         if(g.enableDragDrop || g.enableDrag){
 780             this.dragZone = new Ext.grid.GridDragZone(g, {
 781                 ddGroup : g.ddGroup || 'GridDD'
 782             });
 783         }
 784
 785         this.updateHeaderSortState();
 786
 787     },
 788
 789     // private
 790     layout : function(){
 791         if(!this.mainBody){
 792             return; // not rendered
 793         }
 794         var g = this.grid;
 795         var c = g.getGridEl();
 796         var csize = c.getSize(true);
 797         var vw = csize.width;
 798
 799         if(!g.hideHeaders && (vw < 20 || csize.height < 20)){ // display: none?
 800             return;
 801         }
 802
 803         if(g.autoHeight){
 804             this.scroller.dom.style.overflow = 'visible';
 805             if(Ext.isWebKit){
 806                 this.scroller.dom.style.position = 'static';
 807             }
 808         }else{
 809             this.el.setSize(csize.width, csize.height);
 810
 811             var hdHeight = this.mainHd.getHeight();
 812             var vh = csize.height - (hdHeight);
 813
 814             this.scroller.setSize(vw, vh);
 815             if(this.innerHd){
 816                 this.innerHd.style.width = (vw)+'px';
 817             }
 818         }
 819         if(this.forceFit){
 820             if(this.lastViewWidth != vw){
 821                 this.fitColumns(false, false);
 822                 this.lastViewWidth = vw;
 823             }
 824         }else {
 825             this.autoExpand();
 826             this.syncHeaderScroll();
 827         }
 828         this.onLayout(vw, vh);
 829     },
 830
 831     // template functions for subclasses and plugins
 832     // these functions include precalculated values
 833     onLayout : function(vw, vh){
 834         // do nothing
 835     },
 836
 837     onColumnWidthUpdated : function(col, w, tw){
 838         //template method
 839     },
 840
 841     onAllColumnWidthsUpdated : function(ws, tw){
 842         //template method
 843     },
 844
 845     onColumnHiddenUpdated : function(col, hidden, tw){
 846         // template method
 847     },
 848
 849     updateColumnText : function(col, text){
 850         // template method
 851     },
 852
 853     afterMove : function(colIndex){
 854         // template method
 855     },
 856
 857     /* ----------------------------------- Core Specific -------------------------------------------*/
 858     // private
 859     init : function(grid){
 860         this.grid = grid;
 861
 862         this.initTemplates();
 863         this.initData(grid.store, grid.colModel);
 864         this.initUI(grid);
 865     },
 866
 867     // private
 868     getColumnId : function(index){
 869       return this.cm.getColumnId(index);
 870     },
 871
 872     // private
 873     getOffsetWidth : function() {
 874         return (this.cm.getTotalWidth() + this.getScrollOffset()) + 'px';
 875     },
 876
 877     getScrollOffset: function(){
 878         return Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
 879     },
 880
 881     // private
 882     renderHeaders : function(){
 883         var cm = this.cm,
 884             ts = this.templates,
 885             ct = ts.hcell,
 886             cb = [],
 887             p = {},
 888             len = cm.getColumnCount(),
 889             last = len - 1;
 890
 891         for(var i = 0; i < len; i++){
 892             p.id = cm.getColumnId(i);
 893             p.value = cm.getColumnHeader(i) || '';
 894             p.style = this.getColumnStyle(i, true);
 895             p.tooltip = this.getColumnTooltip(i);
 896             p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
 897             if(cm.config[i].align == 'right'){
 898                 p.istyle = 'padding-right:16px';
 899             } else {
 900                 delete p.istyle;
 901             }
 902             cb[cb.length] = ct.apply(p);
 903         }
 904         return ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'});
 905     },
 906
 907     // private
 908     getColumnTooltip : function(i){
 909         var tt = this.cm.getColumnTooltip(i);
 910         if(tt){
 911             if(Ext.QuickTips.isEnabled()){
 912                 return 'ext:qtip="'+tt+'"';
 913             }else{
 914                 return 'title="'+tt+'"';
 915             }
 916         }
 917         return '';
 918     },
 919
 920     // private
 921     beforeUpdate : function(){
 922         this.grid.stopEditing(true);
 923     },
 924
 925     // private
 926     updateHeaders : function(){
 927         this.innerHd.firstChild.innerHTML = this.renderHeaders();
 928         this.innerHd.firstChild.style.width = this.getOffsetWidth();
 929         this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
 930     },
 931
 932     <div id="method-Ext.grid.GridView-focusRow"></div>/**
 933      * Focuses the specified row.
 934      * @param {Number} row The row index
 935      */
 936     focusRow : function(row){
 937         this.focusCell(row, 0, false);
 938     },
 939
 940     <div id="method-Ext.grid.GridView-focusCell"></div>/**
 941      * Focuses the specified cell.
 942      * @param {Number} row The row index
 943      * @param {Number} col The column index
 944      */
 945     focusCell : function(row, col, hscroll){
 946         this.syncFocusEl(this.ensureVisible(row, col, hscroll));
 947         if(Ext.isGecko){
 948             this.focusEl.focus();
 949         }else{
 950             this.focusEl.focus.defer(1, this.focusEl);
 951         }
 952     },
 953
 954     resolveCell : function(row, col, hscroll){
 955         if(typeof row != "number"){
 956             row = row.rowIndex;
 957         }
 958         if(!this.ds){
 959             return null;
 960         }
 961         if(row < 0 || row >= this.ds.getCount()){
 962             return null;
 963         }
 964         col = (col !== undefined ? col : 0);
 965
 966         var rowEl = this.getRow(row),
 967             cm = this.cm,
 968             colCount = cm.getColumnCount(),
 969             cellEl;
 970         if(!(hscroll === false && col === 0)){
 971             while(col < colCount && cm.isHidden(col)){
 972                 col++;
 973             }
 974             cellEl = this.getCell(row, col);
 975         }
 976
 977         return {row: rowEl, cell: cellEl};
 978     },
 979
 980     getResolvedXY : function(resolved){
 981         if(!resolved){
 982             return null;
 983         }
 984         var s = this.scroller.dom, c = resolved.cell, r = resolved.row;
 985         return c ? Ext.fly(c).getXY() : [this.el.getX(), Ext.fly(r).getY()];
 986     },
 987
 988     syncFocusEl : function(row, col, hscroll){
 989         var xy = row;
 990         if(!Ext.isArray(xy)){
 991             row = Math.min(row, Math.max(0, this.getRows().length-1));
 992             xy = this.getResolvedXY(this.resolveCell(row, col, hscroll));
 993         }
 994         this.focusEl.setXY(xy||this.scroller.getXY());
 995     },
 996
 997     ensureVisible : function(row, col, hscroll){
 998         var resolved = this.resolveCell(row, col, hscroll);
 999         if(!resolved || !resolved.row){
1000             return;
1001         }
1002
1003         var rowEl = resolved.row,
1004             cellEl = resolved.cell,
1005             c = this.scroller.dom,
1006             ctop = 0,
1007             p = rowEl,
1008             stop = this.el.dom;
1009
1010         while(p && p != stop){
1011             ctop += p.offsetTop;
1012             p = p.offsetParent;
1013         }
1014
1015         ctop -= this.mainHd.dom.offsetHeight;
1016         stop = parseInt(c.scrollTop, 10);
1017
1018         var cbot = ctop + rowEl.offsetHeight,
1019             ch = c.clientHeight,
1020             sbot = stop + ch;
1021
1022
1023         if(ctop < stop){
1024           c.scrollTop = ctop;
1025         }else if(cbot > sbot){
1026             c.scrollTop = cbot-ch;
1027         }
1028
1029         if(hscroll !== false){
1030             var cleft = parseInt(cellEl.offsetLeft, 10);
1031             var cright = cleft + cellEl.offsetWidth;
1032
1033             var sleft = parseInt(c.scrollLeft, 10);
1034             var sright = sleft + c.clientWidth;
1035             if(cleft < sleft){
1036                 c.scrollLeft = cleft;
1037             }else if(cright > sright){
1038                 c.scrollLeft = cright-c.clientWidth;
1039             }
1040         }
1041         return this.getResolvedXY(resolved);
1042     },
1043
1044     // private
1045     insertRows : function(dm, firstRow, lastRow, isUpdate){
1046         var last = dm.getCount() - 1;
1047         if(!isUpdate && firstRow === 0 && lastRow >= last){
1048             this.refresh();
1049         }else{
1050             if(!isUpdate){
1051                 this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
1052             }
1053             var html = this.renderRows(firstRow, lastRow),
1054                 before = this.getRow(firstRow);
1055             if(before){
1056                 if(firstRow === 0){
1057                     Ext.fly(this.getRow(0)).removeClass(this.firstRowCls);
1058                 }
1059                 Ext.DomHelper.insertHtml('beforeBegin', before, html);
1060             }else{
1061                 var r = this.getRow(last - 1);
1062                 if(r){
1063                     Ext.fly(r).removeClass(this.lastRowCls);
1064                 }
1065                 Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
1066             }
1067             if(!isUpdate){
1068                 this.fireEvent('rowsinserted', this, firstRow, lastRow);
1069                 this.processRows(firstRow);
1070             }else if(firstRow === 0 || firstRow >= last){
1071                 //ensure first/last row is kept after an update.
1072                 Ext.fly(this.getRow(firstRow)).addClass(firstRow === 0 ? this.firstRowCls : this.lastRowCls);
1073             }
1074         }
1075         this.syncFocusEl(firstRow);
1076     },
1077
1078     // private
1079     deleteRows : function(dm, firstRow, lastRow){
1080         if(dm.getRowCount()<1){
1081             this.refresh();
1082         }else{
1083             this.fireEvent('beforerowsdeleted', this, firstRow, lastRow);
1084
1085             this.removeRows(firstRow, lastRow);
1086
1087             this.processRows(firstRow);
1088             this.fireEvent('rowsdeleted', this, firstRow, lastRow);
1089         }
1090     },
1091
1092     // private
1093     getColumnStyle : function(col, isHeader){
1094         var style = !isHeader ? (this.cm.config[col].css || '') : '';
1095         style += 'width:'+this.getColumnWidth(col)+';';
1096         if(this.cm.isHidden(col)){
1097             style += 'display:none;';
1098         }
1099         var align = this.cm.config[col].align;
1100         if(align){
1101             style += 'text-align:'+align+';';
1102         }
1103         return style;
1104     },
1105
1106     // private
1107     getColumnWidth : function(col){
1108         var w = this.cm.getColumnWidth(col);
1109         if(typeof w == 'number'){
1110             return (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? w : (w - this.borderWidth > 0 ? w - this.borderWidth : 0)) + 'px';
1111         }
1112         return w;
1113     },
1114
1115     // private
1116     getTotalWidth : function(){
1117         return this.cm.getTotalWidth()+'px';
1118     },
1119
1120     // private
1121     fitColumns : function(preventRefresh, onlyExpand, omitColumn){
1122         var cm = this.cm, i;
1123         var tw = cm.getTotalWidth(false);
1124         var aw = this.grid.getGridEl().getWidth(true)-this.getScrollOffset();
1125
1126         if(aw < 20){ // not initialized, so don't screw up the default widths
1127             return;
1128         }
1129         var extra = aw - tw;
1130
1131         if(extra === 0){
1132             return false;
1133         }
1134
1135         var vc = cm.getColumnCount(true);
1136         var ac = vc-(typeof omitColumn == 'number' ? 1 : 0);
1137         if(ac === 0){
1138             ac = 1;
1139             omitColumn = undefined;
1140         }
1141         var colCount = cm.getColumnCount();
1142         var cols = [];
1143         var extraCol = 0;
1144         var width = 0;
1145         var w;
1146         for (i = 0; i < colCount; i++){
1147             if(!cm.isHidden(i) && !cm.isFixed(i) && i !== omitColumn){
1148                 w = cm.getColumnWidth(i);
1149                 cols.push(i);
1150                 extraCol = i;
1151                 cols.push(w);
1152                 width += w;
1153             }
1154         }
1155         var frac = (aw - cm.getTotalWidth())/width;
1156         while (cols.length){
1157             w = cols.pop();
1158             i = cols.pop();
1159             cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true);
1160         }
1161
1162         if((tw = cm.getTotalWidth(false)) > aw){
1163             var adjustCol = ac != vc ? omitColumn : extraCol;
1164              cm.setColumnWidth(adjustCol, Math.max(1,
1165                      cm.getColumnWidth(adjustCol)- (tw-aw)), true);
1166         }
1167
1168         if(preventRefresh !== true){
1169             this.updateAllColumnWidths();
1170         }
1171
1172
1173         return true;
1174     },
1175
1176     // private
1177     autoExpand : function(preventUpdate){
1178         var g = this.grid, cm = this.cm;
1179         if(!this.userResized && g.autoExpandColumn){
1180             var tw = cm.getTotalWidth(false);
1181             var aw = this.grid.getGridEl().getWidth(true)-this.getScrollOffset();
1182             if(tw != aw){
1183                 var ci = cm.getIndexById(g.autoExpandColumn);
1184                 var currentWidth = cm.getColumnWidth(ci);
1185                 var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax);
1186                 if(cw != currentWidth){
1187                     cm.setColumnWidth(ci, cw, true);
1188                     if(preventUpdate !== true){
1189                         this.updateColumnWidth(ci, cw);
1190                     }
1191                 }
1192             }
1193         }
1194     },
1195
1196     // private
1197     getColumnData : function(){
1198         // build a map for all the columns
1199         var cs = [], cm = this.cm, colCount = cm.getColumnCount();
1200         for(var i = 0; i < colCount; i++){
1201             var name = cm.getDataIndex(i);
1202             cs[i] = {
1203                 name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name),
1204                 renderer : cm.getRenderer(i),
1205                 id : cm.getColumnId(i),
1206                 style : this.getColumnStyle(i)
1207             };
1208         }
1209         return cs;
1210     },
1211
1212     // private
1213     renderRows : function(startRow, endRow){
1214         // pull in all the crap needed to render rows
1215         var g = this.grid, cm = g.colModel, ds = g.store, stripe = g.stripeRows;
1216         var colCount = cm.getColumnCount();
1217
1218         if(ds.getCount() < 1){
1219             return '';
1220         }
1221
1222         var cs = this.getColumnData();
1223
1224         startRow = startRow || 0;
1225         endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
1226
1227         // records to render
1228         var rs = ds.getRange(startRow, endRow);
1229
1230         return this.doRender(cs, rs, ds, startRow, colCount, stripe);
1231     },
1232
1233     // private
1234     renderBody : function(){
1235         var markup = this.renderRows() || '&#160;';
1236         return this.templates.body.apply({rows: markup});
1237     },
1238
1239     // private
1240     refreshRow : function(record){
1241         var ds = this.ds, index;
1242         if(typeof record == 'number'){
1243             index = record;
1244             record = ds.getAt(index);
1245             if(!record){
1246                 return;
1247             }
1248         }else{
1249             index = ds.indexOf(record);
1250             if(index < 0){
1251                 return;
1252             }
1253         }
1254         this.insertRows(ds, index, index, true);
1255         this.getRow(index).rowIndex = index;
1256         this.onRemove(ds, record, index+1, true);
1257         this.fireEvent('rowupdated', this, index, record);
1258     },
1259
1260     <div id="method-Ext.grid.GridView-refresh"></div>/**
1261      * Refreshs the grid UI
1262      * @param {Boolean} headersToo (optional) True to also refresh the headers
1263      */
1264     refresh : function(headersToo){
1265         this.fireEvent('beforerefresh', this);
1266         this.grid.stopEditing(true);
1267
1268         var result = this.renderBody();
1269         this.mainBody.update(result).setWidth(this.getTotalWidth());
1270         if(headersToo === true){
1271             this.updateHeaders();
1272             this.updateHeaderSortState();
1273         }
1274         this.processRows(0, true);
1275         this.layout();
1276         this.applyEmptyText();
1277         this.fireEvent('refresh', this);
1278     },
1279
1280     // private
1281     applyEmptyText : function(){
1282         if(this.emptyText && !this.hasRows()){
1283             this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');
1284         }
1285     },
1286
1287     // private
1288     updateHeaderSortState : function(){
1289         var state = this.ds.getSortState();
1290         if(!state){
1291             return;
1292         }
1293         if(!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)){
1294             this.grid.fireEvent('sortchange', this.grid, state);
1295         }
1296         this.sortState = state;
1297         var sortColumn = this.cm.findColumnIndex(state.field);
1298         if(sortColumn != -1){
1299             var sortDir = state.direction;
1300             this.updateSortIcon(sortColumn, sortDir);
1301         }
1302     },
1303
1304     // private
1305     destroy : function(){
1306         if(this.colMenu){
1307             Ext.menu.MenuMgr.unregister(this.colMenu);
1308             this.colMenu.destroy();
1309             delete this.colMenu;
1310         }
1311         if(this.hmenu){
1312             Ext.menu.MenuMgr.unregister(this.hmenu);
1313             this.hmenu.destroy();
1314             delete this.hmenu;
1315         }
1316
1317         this.initData(null, null);
1318         this.purgeListeners();
1319         Ext.fly(this.innerHd).un("click", this.handleHdDown, this);
1320
1321         if(this.grid.enableColumnMove){
1322             Ext.destroy(
1323                 this.columnDrag.el,
1324                 this.columnDrag.proxy.ghost,
1325                 this.columnDrag.proxy.el,
1326                 this.columnDrop.el,
1327                 this.columnDrop.proxyTop,
1328                 this.columnDrop.proxyBottom,
1329                 this.columnDrag.dragData.ddel,
1330                 this.columnDrag.dragData.header
1331             );
1332             if (this.columnDrag.proxy.anim) {
1333                 Ext.destroy(this.columnDrag.proxy.anim);
1334             }
1335             delete this.columnDrag.proxy.ghost;
1336             delete this.columnDrag.dragData.ddel;
1337             delete this.columnDrag.dragData.header;
1338             this.columnDrag.destroy();
1339             delete Ext.dd.DDM.locationCache[this.columnDrag.id];
1340             delete this.columnDrag._domRef;
1341
1342             delete this.columnDrop.proxyTop;
1343             delete this.columnDrop.proxyBottom;
1344             this.columnDrop.destroy();
1345             delete Ext.dd.DDM.locationCache["gridHeader" + this.grid.getGridEl().id];
1346             delete this.columnDrop._domRef;
1347             delete Ext.dd.DDM.ids[this.columnDrop.ddGroup];
1348         }
1349
1350         if (this.splitone){ // enableColumnResize
1351             this.splitone.destroy();
1352             delete this.splitone._domRef;
1353             delete Ext.dd.DDM.ids["gridSplitters" + this.grid.getGridEl().id];
1354         }
1355
1356         Ext.fly(this.innerHd).removeAllListeners();
1357         Ext.removeNode(this.innerHd);
1358         delete this.innerHd;
1359
1360         Ext.destroy(
1361             this.el,
1362             this.mainWrap,
1363             this.mainHd,
1364             this.scroller,
1365             this.mainBody,
1366             this.focusEl,
1367             this.resizeMarker,
1368             this.resizeProxy,
1369             this.activeHdBtn,
1370             this.dragZone,
1371             this.splitZone,
1372             this._flyweight
1373         );
1374
1375         delete this.grid.container;
1376
1377         if(this.dragZone){
1378             this.dragZone.destroy();
1379         }
1380
1381         Ext.dd.DDM.currentTarget = null;
1382         delete Ext.dd.DDM.locationCache[this.grid.getGridEl().id];
1383
1384         Ext.EventManager.removeResizeListener(this.onWindowResize, this);
1385     },
1386
1387     // private
1388     onDenyColumnHide : function(){
1389
1390     },
1391
1392     // private
1393     render : function(){
1394         if(this.autoFill){
1395             var ct = this.grid.ownerCt;
1396             if (ct && ct.getLayout()){
1397                 ct.on('afterlayout', function(){
1398                     this.fitColumns(true, true);
1399                     this.updateHeaders();
1400                 }, this, {single: true});
1401             }else{
1402                 this.fitColumns(true, true);
1403             }
1404         }else if(this.forceFit){
1405             this.fitColumns(true, false);
1406         }else if(this.grid.autoExpandColumn){
1407             this.autoExpand(true);
1408         }
1409
1410         this.renderUI();
1411     },
1412
1413     /* --------------------------------- Model Events and Handlers --------------------------------*/
1414     // private
1415     initData : function(ds, cm){
1416         if(this.ds){
1417             this.ds.un('load', this.onLoad, this);
1418             this.ds.un('datachanged', this.onDataChange, this);
1419             this.ds.un('add', this.onAdd, this);
1420             this.ds.un('remove', this.onRemove, this);
1421             this.ds.un('update', this.onUpdate, this);
1422             this.ds.un('clear', this.onClear, this);
1423             if(this.ds !== ds && this.ds.autoDestroy){
1424                 this.ds.destroy();
1425             }
1426         }
1427         if(ds){
1428             ds.on({
1429                 scope: this,
1430                 load: this.onLoad,
1431                 datachanged: this.onDataChange,
1432                 add: this.onAdd,
1433                 remove: this.onRemove,
1434                 update: this.onUpdate,
1435                 clear: this.onClear
1436             });
1437         }
1438         this.ds = ds;
1439
1440         if(this.cm){
1441             this.cm.un('configchange', this.onColConfigChange, this);
1442             this.cm.un('widthchange', this.onColWidthChange, this);
1443             this.cm.un('headerchange', this.onHeaderChange, this);
1444             this.cm.un('hiddenchange', this.onHiddenChange, this);
1445             this.cm.un('columnmoved', this.onColumnMove, this);
1446         }
1447         if(cm){
1448             delete this.lastViewWidth;
1449             cm.on({
1450                 scope: this,
1451                 configchange: this.onColConfigChange,
1452                 widthchange: this.onColWidthChange,
1453                 headerchange: this.onHeaderChange,
1454                 hiddenchange: this.onHiddenChange,
1455                 columnmoved: this.onColumnMove
1456             });
1457         }
1458         this.cm = cm;
1459     },
1460
1461     // private
1462     onDataChange : function(){
1463         this.refresh();
1464         this.updateHeaderSortState();
1465         this.syncFocusEl(0);
1466     },
1467
1468     // private
1469     onClear : function(){
1470         this.refresh();
1471         this.syncFocusEl(0);
1472     },
1473
1474     // private
1475     onUpdate : function(ds, record){
1476         this.refreshRow(record);
1477     },
1478
1479     // private
1480     onAdd : function(ds, records, index){
1481         this.insertRows(ds, index, index + (records.length-1));
1482     },
1483
1484     // private
1485     onRemove : function(ds, record, index, isUpdate){
1486         if(isUpdate !== true){
1487             this.fireEvent('beforerowremoved', this, index, record);
1488         }
1489         this.removeRow(index);
1490         if(isUpdate !== true){
1491             this.processRows(index);
1492             this.applyEmptyText();
1493             this.fireEvent('rowremoved', this, index, record);
1494         }
1495     },
1496
1497     // private
1498     onLoad : function(){
1499         this.scrollToTop.defer(Ext.isGecko ? 1 : 0, this);
1500     },
1501
1502     // private
1503     onColWidthChange : function(cm, col, width){
1504         this.updateColumnWidth(col, width);
1505     },
1506
1507     // private
1508     onHeaderChange : function(cm, col, text){
1509         this.updateHeaders();
1510     },
1511
1512     // private
1513     onHiddenChange : function(cm, col, hidden){
1514         this.updateColumnHidden(col, hidden);
1515     },
1516
1517     // private
1518     onColumnMove : function(cm, oldIndex, newIndex){
1519         this.indexMap = null;
1520         var s = this.getScrollState();
1521         this.refresh(true);
1522         this.restoreScroll(s);
1523         this.afterMove(newIndex);
1524         this.grid.fireEvent('columnmove', oldIndex, newIndex);
1525     },
1526
1527     // private
1528     onColConfigChange : function(){
1529         delete this.lastViewWidth;
1530         this.indexMap = null;
1531         this.refresh(true);
1532     },
1533
1534     /* -------------------- UI Events and Handlers ------------------------------ */
1535     // private
1536     initUI : function(grid){
1537         grid.on('headerclick', this.onHeaderClick, this);
1538     },
1539
1540     // private
1541     initEvents : function(){
1542     },
1543
1544     // private
1545     onHeaderClick : function(g, index){
1546         if(this.headersDisabled || !this.cm.isSortable(index)){
1547             return;
1548         }
1549         g.stopEditing(true);
1550         g.store.sort(this.cm.getDataIndex(index));
1551     },
1552
1553     // private
1554     onRowOver : function(e, t){
1555         var row;
1556         if((row = this.findRowIndex(t)) !== false){
1557             this.addRowClass(row, 'x-grid3-row-over');
1558         }
1559     },
1560
1561     // private
1562     onRowOut : function(e, t){
1563         var row;
1564         if((row = this.findRowIndex(t)) !== false && !e.within(this.getRow(row), true)){
1565             this.removeRowClass(row, 'x-grid3-row-over');
1566         }
1567     },
1568
1569     // private
1570     handleWheel : function(e){
1571         e.stopPropagation();
1572     },
1573
1574     // private
1575     onRowSelect : function(row){
1576         this.addRowClass(row, this.selectedRowClass);
1577     },
1578
1579     // private
1580     onRowDeselect : function(row){
1581         this.removeRowClass(row, this.selectedRowClass);
1582     },
1583
1584     // private
1585     onCellSelect : function(row, col){
1586         var cell = this.getCell(row, col);
1587         if(cell){
1588             this.fly(cell).addClass('x-grid3-cell-selected');
1589         }
1590     },
1591
1592     // private
1593     onCellDeselect : function(row, col){
1594         var cell = this.getCell(row, col);
1595         if(cell){
1596             this.fly(cell).removeClass('x-grid3-cell-selected');
1597         }
1598     },
1599
1600     // private
1601     onColumnSplitterMoved : function(i, w){
1602         this.userResized = true;
1603         var cm = this.grid.colModel;
1604         cm.setColumnWidth(i, w, true);
1605
1606         if(this.forceFit){
1607             this.fitColumns(true, false, i);
1608             this.updateAllColumnWidths();
1609         }else{
1610             this.updateColumnWidth(i, w);
1611             this.syncHeaderScroll();
1612         }
1613
1614         this.grid.fireEvent('columnresize', i, w);
1615     },
1616
1617     // private
1618     handleHdMenuClick : function(item){
1619         var index = this.hdCtxIndex,
1620             cm = this.cm,
1621             ds = this.ds,
1622             id = item.getItemId();
1623         switch(id){
1624             case 'asc':
1625                 ds.sort(cm.getDataIndex(index), 'ASC');
1626                 break;
1627             case 'desc':
1628                 ds.sort(cm.getDataIndex(index), 'DESC');
1629                 break;
1630             default:
1631                 index = cm.getIndexById(id.substr(4));
1632                 if(index != -1){
1633                     if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
1634                         this.onDenyColumnHide();
1635                         return false;
1636                     }
1637                     cm.setHidden(index, item.checked);
1638                 }
1639         }
1640         return true;
1641     },
1642
1643     // private
1644     isHideableColumn : function(c){
1645         return !c.hidden && !c.fixed;
1646     },
1647
1648     // private
1649     beforeColMenuShow : function(){
1650         var cm = this.cm,  colCount = cm.getColumnCount();
1651         this.colMenu.removeAll();
1652         for(var i = 0; i < colCount; i++){
1653             if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
1654                 this.colMenu.add(new Ext.menu.CheckItem({
1655                     itemId: 'col-'+cm.getColumnId(i),
1656                     text: cm.getColumnHeader(i),
1657                     checked: !cm.isHidden(i),
1658                     hideOnClick:false,
1659                     disabled: cm.config[i].hideable === false
1660                 }));
1661             }
1662         }
1663     },
1664
1665     // private
1666     handleHdDown : function(e, t){
1667         if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
1668             e.stopEvent();
1669             var hd = this.findHeaderCell(t);
1670             Ext.fly(hd).addClass('x-grid3-hd-menu-open');
1671             var index = this.getCellIndex(hd);
1672             this.hdCtxIndex = index;
1673             var ms = this.hmenu.items, cm = this.cm;
1674             ms.get('asc').setDisabled(!cm.isSortable(index));
1675             ms.get('desc').setDisabled(!cm.isSortable(index));
1676             this.hmenu.on('hide', function(){
1677                 Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
1678             }, this, {single:true});
1679             this.hmenu.show(t, 'tl-bl?');
1680         }
1681     },
1682
1683     // private
1684     handleHdOver : function(e, t){
1685         var hd = this.findHeaderCell(t);
1686         if(hd && !this.headersDisabled){
1687             this.activeHdRef = t;
1688             this.activeHdIndex = this.getCellIndex(hd);
1689             var fly = this.fly(hd);
1690             this.activeHdRegion = fly.getRegion();
1691             if(!this.cm.isMenuDisabled(this.activeHdIndex)){
1692                 fly.addClass('x-grid3-hd-over');
1693                 this.activeHdBtn = fly.child('.x-grid3-hd-btn');
1694                 if(this.activeHdBtn){
1695                     this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';
1696                 }
1697             }
1698         }
1699     },
1700
1701     // private
1702     handleHdMove : function(e, t){
1703         var hd = this.findHeaderCell(this.activeHdRef);
1704         if(hd && !this.headersDisabled){
1705             var hw = this.splitHandleWidth || 5,
1706                 r = this.activeHdRegion,
1707                 x = e.getPageX(),
1708                 ss = hd.style,
1709                 cur = '';
1710             if(this.grid.enableColumnResize !== false){
1711                 if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){
1712                     cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize not always supported
1713                 }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
1714                     cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
1715                 }
1716             }
1717             ss.cursor = cur;
1718         }
1719     },
1720
1721     // private
1722     handleHdOut : function(e, t){
1723         var hd = this.findHeaderCell(t);
1724         if(hd && (!Ext.isIE || !e.within(hd, true))){
1725             this.activeHdRef = null;
1726             this.fly(hd).removeClass('x-grid3-hd-over');
1727             hd.style.cursor = '';
1728         }
1729     },
1730
1731     // private
1732     hasRows : function(){
1733         var fc = this.mainBody.dom.firstChild;
1734         return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';
1735     },
1736
1737     // back compat
1738     bind : function(d, c){
1739         this.initData(d, c);
1740     }
1741 });
1742
1743
1744 // private
1745 // This is a support class used internally by the Grid components
1746 Ext.grid.GridView.SplitDragZone = function(grid, hd){
1747     this.grid = grid;
1748     this.view = grid.getView();
1749     this.marker = this.view.resizeMarker;
1750     this.proxy = this.view.resizeProxy;
1751     Ext.grid.GridView.SplitDragZone.superclass.constructor.call(this, hd,
1752         'gridSplitters' + this.grid.getGridEl().id, {
1753         dragElId : Ext.id(this.proxy.dom), resizeFrame:false
1754     });
1755     this.scroll = false;
1756     this.hw = this.view.splitHandleWidth || 5;
1757 };
1758 Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, {
1759
1760     b4StartDrag : function(x, y){
1761         this.view.headersDisabled = true;
1762         var h = this.view.mainWrap.getHeight();
1763         this.marker.setHeight(h);
1764         this.marker.show();
1765         this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]);
1766         this.proxy.setHeight(h);
1767         var w = this.cm.getColumnWidth(this.cellIndex);
1768         var minw = Math.max(w-this.grid.minColumnWidth, 0);
1769         this.resetConstraints();
1770         this.setXConstraint(minw, 1000);
1771         this.setYConstraint(0, 0);
1772         this.minX = x - minw;
1773         this.maxX = x + 1000;
1774         this.startPos = x;
1775         Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
1776     },
1777
1778
1779     handleMouseDown : function(e){
1780         var t = this.view.findHeaderCell(e.getTarget());
1781         if(t){
1782             var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1];
1783             var exy = e.getXY(), ex = exy[0];
1784             var w = t.offsetWidth, adjust = false;
1785             if((ex - x) <= this.hw){
1786                 adjust = -1;
1787             }else if((x+w) - ex <= this.hw){
1788                 adjust = 0;
1789             }
1790             if(adjust !== false){
1791                 this.cm = this.grid.colModel;
1792                 var ci = this.view.getCellIndex(t);
1793                 if(adjust == -1){
1794                   if (ci + adjust < 0) {
1795                     return;
1796                   }
1797                     while(this.cm.isHidden(ci+adjust)){
1798                         --adjust;
1799                         if(ci+adjust < 0){
1800                             return;
1801                         }
1802                     }
1803                 }
1804                 this.cellIndex = ci+adjust;
1805                 this.split = t.dom;
1806                 if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
1807                     Ext.grid.GridView.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
1808                 }
1809             }else if(this.view.columnDrag){
1810                 this.view.columnDrag.callHandleMouseDown(e);
1811             }
1812         }
1813     },
1814
1815     endDrag : function(e){
1816         this.marker.hide();
1817         var v = this.view;
1818         var endX = Math.max(this.minX, e.getPageX());
1819         var diff = endX - this.startPos;
1820         v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
1821         setTimeout(function(){
1822             v.headersDisabled = false;
1823         }, 50);
1824     },
1825
1826     autoOffset : function(){
1827         this.setDelta(0,0);
1828     }
1829 });
1830 </pre>
1831 </body>
1832 </html>