docs/source/GridPanel.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.grid.GridPanel"></div>/**
  16  * @class Ext.grid.GridPanel
  17  * @extends Ext.Panel
  18  * <p>This class represents the primary interface of a component based grid control to represent data
  19  * in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
  20  * <div class="mdetail-params"><ul>
  21  * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)
  22  * <div class="sub-desc"></div></li>
  23  * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup
  24  * <div class="sub-desc"></div></li>
  25  * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface
  26  * <div class="sub-desc"></div></li>
  27  * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior
  28  * <div class="sub-desc"></div></li>
  29  * </ul></div>
  30  * <p>Example usage:</p>
  31  * <pre><code>
  32 var grid = new Ext.grid.GridPanel({
  33     {@link #store}: new {@link Ext.data.Store}({
  34         {@link Ext.data.Store#autoDestroy autoDestroy}: true,
  35         {@link Ext.data.Store#reader reader}: reader,
  36         {@link Ext.data.Store#data data}: xg.dummyData
  37     }),
  38     {@link #colModel}: new {@link Ext.grid.ColumnModel}({
  39         {@link Ext.grid.ColumnModel#defaults defaults}: {
  40             width: 120,
  41             sortable: true
  42         },
  43         {@link Ext.grid.ColumnModel#columns columns}: [
  44             {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
  45             {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
  46             {header: 'Change', dataIndex: 'change'},
  47             {header: '% Change', dataIndex: 'pctChange'},
  48             // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
  49             {
  50                 header: 'Last Updated', width: 135, dataIndex: 'lastChange',
  51                 xtype: 'datecolumn', format: 'M d, Y'
  52             }
  53         ],
  54     }),
  55     {@link #viewConfig}: {
  56         {@link Ext.grid.GridView#forceFit forceFit}: true,
  57
  58 //      Return CSS class to apply to rows depending upon data values
  59         {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
  60             var c = record.{@link Ext.data.Record#get get}('change');
  61             if (c < 0) {
  62                 return 'price-fall';
  63             } else if (c > 0) {
  64                 return 'price-rise';
  65             }
  66         }
  67     },
  68     {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
  69     width: 600,
  70     height: 300,
  71     frame: true,
  72     title: 'Framed with Row Selection and Horizontal Scrolling',
  73     iconCls: 'icon-grid'
  74 });
  75  * </code></pre>
  76  * <p><b><u>Notes:</u></b></p>
  77  * <div class="mdetail-params"><ul>
  78  * <li>Although this class inherits many configuration options from base classes, some of them
  79  * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
  80  * have no effect.</li>
  81  * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
  82  * scroll its rows. These dimensions can either be set explicitly through the
  83  * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>
  84  * configuration options or implicitly set by using the grid as a child item of a
  85  * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
  86  * provide the sizing of its child items (for example the Container of the Grid may specify
  87  * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>
  88  * <li>To access the data in a Grid, it is necessary to use the data model encapsulated
  89  * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>
  90  * </ul></div>
  91  * @constructor
  92  * @param {Object} config The config object
  93  * @xtype grid
  94  */
  95 Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
  96     <div id="cfg-Ext.grid.GridPanel-autoExpandColumn"></div>/**
  97      * @cfg {String} autoExpandColumn
  98      * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in
  99      * this grid that should expand to fill unused space. This value specified here can not
 100      * be <tt>0</tt>.</p>
 101      * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with
 102      * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>
 103      * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>
 104      * for additional details.</p>
 105      * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
 106      */
 107     autoExpandColumn : false,
 108
 109     <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**
 110      * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
 111      * can have (if enabled). Defaults to <tt>1000</tt>.
 112      */
 113     autoExpandMax : 1000,
 114
 115     <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**
 116      * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
 117      * can have (if enabled). Defaults to <tt>50</tt>.
 118      */
 119     autoExpandMin : 50,
 120
 121     <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**
 122      * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
 123      * Default is <tt>false</tt>.
 124      */
 125     columnLines : false,
 126
 127     <div id="cfg-Ext.grid.GridPanel-cm"></div>/**
 128      * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
 129      */
 130     <div id="cfg-Ext.grid.GridPanel-colModel"></div>/**
 131      * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
 132      */
 133     <div id="cfg-Ext.grid.GridPanel-columns"></div>/**
 134      * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
 135      * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the
 136      * <tt>{@link #colModel}</tt> configuration property.
 137      */
 138     <div id="cfg-Ext.grid.GridPanel-ddGroup"></div>/**
 139      * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
 140      */
 141     <div id="cfg-Ext.grid.GridPanel-ddText"></div>/**
 142      * @cfg {String} ddText
 143      * Configures the text in the drag proxy.  Defaults to:
 144      * <pre><code>
 145      * ddText : '{0} selected row{1}'
 146      * </code></pre>
 147      * <tt>{0}</tt> is replaced with the number of selected rows.
 148      */
 149     ddText : '{0} selected row{1}',
 150
 151     <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**
 152      * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
 153      * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
 154      * structure deferred so that layouts with GridPanels appear more quickly.</p>
 155      */
 156     deferRowRender : true,
 157
 158     <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**
 159      * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
 160      * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
 161      */
 162     <div id="cfg-Ext.grid.GridPanel-enableColumnResize"></div>/**
 163      * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
 164      */
 165     <div id="cfg-Ext.grid.GridPanel-enableColumnHide"></div>/**
 166      * @cfg {Boolean} enableColumnHide
 167      * Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}
 168      * with the {@link #enableHdMenu header menu}.
 169      */
 170     enableColumnHide : true,
 171
 172     <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**
 173      * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
 174      * to turn off column reordering via drag drop.
 175      */
 176     enableColumnMove : true,
 177
 178     <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**
 179      * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
 180      * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
 181      * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>
 182      * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>
 183      * property.</p>
 184      * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
 185      * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
 186      * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
 187      * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
 188      */
 189     enableDragDrop : false,
 190
 191     <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**
 192      * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
 193      */
 194     enableHdMenu : true,
 195
 196     <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**
 197      * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
 198      */
 199     <div id="cfg-Ext.grid.GridPanel-loadMask"></div>/**
 200      * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
 201      * loading. Defaults to <code>false</code>.
 202      */
 203     loadMask : false,
 204
 205     <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**
 206      * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
 207      */
 208     <div id="cfg-Ext.grid.GridPanel-minColumnWidth"></div>/**
 209      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
 210      */
 211     minColumnWidth : 25,
 212
 213     <div id="cfg-Ext.grid.GridPanel-sm"></div>/**
 214      * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
 215      */
 216     <div id="cfg-Ext.grid.GridPanel-selModel"></div>/**
 217      * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
 218      * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
 219      */
 220     <div id="cfg-Ext.grid.GridPanel-store"></div>/**
 221      * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
 222      */
 223     <div id="cfg-Ext.grid.GridPanel-stripeRows"></div>/**
 224      * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.
 225      * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of
 226      * the grid. A default CSS rule is provided which sets a background colour, but you can override this
 227      * with a rule which either overrides the <b>background-color</b> style using the '!important'
 228      * modifier, or which uses a CSS selector of higher specificity.</p>
 229      */
 230     stripeRows : false,
 231
 232     <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**
 233      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
 234      * for GridPanel, but <tt>false</tt> for EditorGridPanel.
 235      */
 236     trackMouseOver : true,
 237
 238     <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**
 239      * @cfg {Array} stateEvents
 240      * An array of events that, when fired, should trigger this component to save its state.
 241      * Defaults to:<pre><code>
 242      * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']
 243      * </code></pre>
 244      * <p>These can be any types of events supported by this component, including browser or
 245      * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>
 246      * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring
 247      * Component state.</p>
 248      */
 249     stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
 250
 251     <div id="cfg-Ext.grid.GridPanel-view"></div>/**
 252      * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
 253      * before a call to {@link Ext.Component#render render()}.
 254      */
 255     view : null,
 256
 257     <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**
 258      * @cfg {Array} bubbleEvents
 259      * <p>An array of events that, when fired, should be bubbled to any parent container.
 260      * See {@link Ext.util.Observable#enableBubble}.
 261      * Defaults to <tt>[]</tt>.
 262      */
 263     bubbleEvents: [],
 264
 265     <div id="cfg-Ext.grid.GridPanel-viewConfig"></div>/**
 266      * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of
 267      * the config options available for {@link Ext.grid.GridView} can be specified here. This option
 268      * is ignored if <tt>{@link #view}</tt> is specified.
 269      */
 270
 271     // private
 272     rendered : false,
 273
 274     // private
 275     viewReady : false,
 276
 277     // private
 278     initComponent : function() {
 279         Ext.grid.GridPanel.superclass.initComponent.call(this);
 280
 281         if (this.columnLines) {
 282             this.cls = (this.cls || '') + ' x-grid-with-col-lines';
 283         }
 284         // override any provided value since it isn't valid
 285         // and is causing too many bug reports ;)
 286         this.autoScroll = false;
 287         this.autoWidth = false;
 288
 289         if(Ext.isArray(this.columns)){
 290             this.colModel = new Ext.grid.ColumnModel(this.columns);
 291             delete this.columns;
 292         }
 293
 294         // check and correct shorthanded configs
 295         if(this.ds){
 296             this.store = this.ds;
 297             delete this.ds;
 298         }
 299         if(this.cm){
 300             this.colModel = this.cm;
 301             delete this.cm;
 302         }
 303         if(this.sm){
 304             this.selModel = this.sm;
 305             delete this.sm;
 306         }
 307         this.store = Ext.StoreMgr.lookup(this.store);
 308
 309         this.addEvents(
 310             // raw events
 311             <div id="event-Ext.grid.GridPanel-click"></div>/**
 312              * @event click
 313              * The raw click event for the entire grid.
 314              * @param {Ext.EventObject} e
 315              */
 316             'click',
 317             <div id="event-Ext.grid.GridPanel-dblclick"></div>/**
 318              * @event dblclick
 319              * The raw dblclick event for the entire grid.
 320              * @param {Ext.EventObject} e
 321              */
 322             'dblclick',
 323             <div id="event-Ext.grid.GridPanel-contextmenu"></div>/**
 324              * @event contextmenu
 325              * The raw contextmenu event for the entire grid.
 326              * @param {Ext.EventObject} e
 327              */
 328             'contextmenu',
 329             <div id="event-Ext.grid.GridPanel-mousedown"></div>/**
 330              * @event mousedown
 331              * The raw mousedown event for the entire grid.
 332              * @param {Ext.EventObject} e
 333              */
 334             'mousedown',
 335             <div id="event-Ext.grid.GridPanel-mouseup"></div>/**
 336              * @event mouseup
 337              * The raw mouseup event for the entire grid.
 338              * @param {Ext.EventObject} e
 339              */
 340             'mouseup',
 341             <div id="event-Ext.grid.GridPanel-mouseover"></div>/**
 342              * @event mouseover
 343              * The raw mouseover event for the entire grid.
 344              * @param {Ext.EventObject} e
 345              */
 346             'mouseover',
 347             <div id="event-Ext.grid.GridPanel-mouseout"></div>/**
 348              * @event mouseout
 349              * The raw mouseout event for the entire grid.
 350              * @param {Ext.EventObject} e
 351              */
 352             'mouseout',
 353             <div id="event-Ext.grid.GridPanel-keypress"></div>/**
 354              * @event keypress
 355              * The raw keypress event for the entire grid.
 356              * @param {Ext.EventObject} e
 357              */
 358             'keypress',
 359             <div id="event-Ext.grid.GridPanel-keydown"></div>/**
 360              * @event keydown
 361              * The raw keydown event for the entire grid.
 362              * @param {Ext.EventObject} e
 363              */
 364             'keydown',
 365
 366             // custom events
 367             <div id="event-Ext.grid.GridPanel-cellmousedown"></div>/**
 368              * @event cellmousedown
 369              * Fires before a cell is clicked
 370              * @param {Grid} this
 371              * @param {Number} rowIndex
 372              * @param {Number} columnIndex
 373              * @param {Ext.EventObject} e
 374              */
 375             'cellmousedown',
 376             <div id="event-Ext.grid.GridPanel-rowmousedown"></div>/**
 377              * @event rowmousedown
 378              * Fires before a row is clicked
 379              * @param {Grid} this
 380              * @param {Number} rowIndex
 381              * @param {Ext.EventObject} e
 382              */
 383             'rowmousedown',
 384             <div id="event-Ext.grid.GridPanel-headermousedown"></div>/**
 385              * @event headermousedown
 386              * Fires before a header is clicked
 387              * @param {Grid} this
 388              * @param {Number} columnIndex
 389              * @param {Ext.EventObject} e
 390              */
 391             'headermousedown',
 392
 393             <div id="event-Ext.grid.GridPanel-groupmousedown"></div>/**
 394              * @event groupmousedown
 395              * Fires before a group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
 396              * @param {Grid} this
 397              * @param {String} groupField
 398              * @param {String} groupValue
 399              * @param {Ext.EventObject} e
 400              */
 401             'groupmousedown',
 402
 403             <div id="event-Ext.grid.GridPanel-rowbodymousedown"></div>/**
 404              * @event rowbodymousedown
 405              * Fires before the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
 406              * @param {Grid} this
 407              * @param {Number} rowIndex
 408              * @param {Ext.EventObject} e
 409              */
 410             'rowbodymousedown',
 411
 412             <div id="event-Ext.grid.GridPanel-containermousedown"></div>/**
 413              * @event containermousedown
 414              * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
 415              * @param {Grid} this
 416              * @param {Ext.EventObject} e
 417              */
 418             'containermousedown',
 419
 420             <div id="event-Ext.grid.GridPanel-cellclick"></div>/**
 421              * @event cellclick
 422              * Fires when a cell is clicked.
 423              * The data for the cell is drawn from the {@link Ext.data.Record Record}
 424              * for this row. To access the data in the listener function use the
 425              * following technique:
 426              * <pre><code>
 427 function(grid, rowIndex, columnIndex, e) {
 428     var record = grid.getStore().getAt(rowIndex);  // Get the Record
 429     var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
 430     var data = record.get(fieldName);
 431 }
 432 </code></pre>
 433              * @param {Grid} this
 434              * @param {Number} rowIndex
 435              * @param {Number} columnIndex
 436              * @param {Ext.EventObject} e
 437              */
 438             'cellclick',
 439             <div id="event-Ext.grid.GridPanel-celldblclick"></div>/**
 440              * @event celldblclick
 441              * Fires when a cell is double clicked
 442              * @param {Grid} this
 443              * @param {Number} rowIndex
 444              * @param {Number} columnIndex
 445              * @param {Ext.EventObject} e
 446              */
 447             'celldblclick',
 448             <div id="event-Ext.grid.GridPanel-rowclick"></div>/**
 449              * @event rowclick
 450              * Fires when a row is clicked
 451              * @param {Grid} this
 452              * @param {Number} rowIndex
 453              * @param {Ext.EventObject} e
 454              */
 455             'rowclick',
 456             <div id="event-Ext.grid.GridPanel-rowdblclick"></div>/**
 457              * @event rowdblclick
 458              * Fires when a row is double clicked
 459              * @param {Grid} this
 460              * @param {Number} rowIndex
 461              * @param {Ext.EventObject} e
 462              */
 463             'rowdblclick',
 464             <div id="event-Ext.grid.GridPanel-headerclick"></div>/**
 465              * @event headerclick
 466              * Fires when a header is clicked
 467              * @param {Grid} this
 468              * @param {Number} columnIndex
 469              * @param {Ext.EventObject} e
 470              */
 471             'headerclick',
 472             <div id="event-Ext.grid.GridPanel-headerdblclick"></div>/**
 473              * @event headerdblclick
 474              * Fires when a header cell is double clicked
 475              * @param {Grid} this
 476              * @param {Number} columnIndex
 477              * @param {Ext.EventObject} e
 478              */
 479             'headerdblclick',
 480             <div id="event-Ext.grid.GridPanel-groupclick"></div>/**
 481              * @event groupclick
 482              * Fires when group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
 483              * @param {Grid} this
 484              * @param {String} groupField
 485              * @param {String} groupValue
 486              * @param {Ext.EventObject} e
 487              */
 488             'groupclick',
 489             <div id="event-Ext.grid.GridPanel-groupdblclick"></div>/**
 490              * @event groupdblclick
 491              * Fires when group header is double clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
 492              * @param {Grid} this
 493              * @param {String} groupField
 494              * @param {String} groupValue
 495              * @param {Ext.EventObject} e
 496              */
 497             'groupdblclick',
 498             <div id="event-Ext.grid.GridPanel-containerclick"></div>/**
 499              * @event containerclick
 500              * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
 501              * @param {Grid} this
 502              * @param {Ext.EventObject} e
 503              */
 504             'containerclick',
 505             <div id="event-Ext.grid.GridPanel-containerdblclick"></div>/**
 506              * @event containerdblclick
 507              * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
 508              * @param {Grid} this
 509              * @param {Ext.EventObject} e
 510              */
 511             'containerdblclick',
 512
 513             <div id="event-Ext.grid.GridPanel-rowbodyclick"></div>/**
 514              * @event rowbodyclick
 515              * Fires when the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
 516              * @param {Grid} this
 517              * @param {Number} rowIndex
 518              * @param {Ext.EventObject} e
 519              */
 520             'rowbodyclick',
 521             <div id="event-Ext.grid.GridPanel-rowbodydblclick"></div>/**
 522              * @event rowbodydblclick
 523              * Fires when the row body is double clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
 524              * @param {Grid} this
 525              * @param {Number} rowIndex
 526              * @param {Ext.EventObject} e
 527              */
 528             'rowbodydblclick',
 529
 530             <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**
 531              * @event rowcontextmenu
 532              * Fires when a row is right clicked
 533              * @param {Grid} this
 534              * @param {Number} rowIndex
 535              * @param {Ext.EventObject} e
 536              */
 537             'rowcontextmenu',
 538             <div id="event-Ext.grid.GridPanel-cellcontextmenu"></div>/**
 539              * @event cellcontextmenu
 540              * Fires when a cell is right clicked
 541              * @param {Grid} this
 542              * @param {Number} rowIndex
 543              * @param {Number} cellIndex
 544              * @param {Ext.EventObject} e
 545              */
 546             'cellcontextmenu',
 547             <div id="event-Ext.grid.GridPanel-headercontextmenu"></div>/**
 548              * @event headercontextmenu
 549              * Fires when a header is right clicked
 550              * @param {Grid} this
 551              * @param {Number} columnIndex
 552              * @param {Ext.EventObject} e
 553              */
 554             'headercontextmenu',
 555             <div id="event-Ext.grid.GridPanel-groupcontextmenu"></div>/**
 556              * @event groupcontextmenu
 557              * Fires when group header is right clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
 558              * @param {Grid} this
 559              * @param {String} groupField
 560              * @param {String} groupValue
 561              * @param {Ext.EventObject} e
 562              */
 563             'groupcontextmenu',
 564             <div id="event-Ext.grid.GridPanel-containercontextmenu"></div>/**
 565              * @event containercontextmenu
 566              * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
 567              * @param {Grid} this
 568              * @param {Ext.EventObject} e
 569              */
 570             'containercontextmenu',
 571             <div id="event-Ext.grid.GridPanel-rowbodycontextmenu"></div>/**
 572              * @event rowbodycontextmenu
 573              * Fires when the row body is right clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
 574              * @param {Grid} this
 575              * @param {Number} rowIndex
 576              * @param {Ext.EventObject} e
 577              */
 578             'rowbodycontextmenu',
 579             <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**
 580              * @event bodyscroll
 581              * Fires when the body element is scrolled
 582              * @param {Number} scrollLeft
 583              * @param {Number} scrollTop
 584              */
 585             'bodyscroll',
 586             <div id="event-Ext.grid.GridPanel-columnresize"></div>/**
 587              * @event columnresize
 588              * Fires when the user resizes a column
 589              * @param {Number} columnIndex
 590              * @param {Number} newSize
 591              */
 592             'columnresize',
 593             <div id="event-Ext.grid.GridPanel-columnmove"></div>/**
 594              * @event columnmove
 595              * Fires when the user moves a column
 596              * @param {Number} oldIndex
 597              * @param {Number} newIndex
 598              */
 599             'columnmove',
 600             <div id="event-Ext.grid.GridPanel-sortchange"></div>/**
 601              * @event sortchange
 602              * Fires when the grid's store sort changes
 603              * @param {Grid} this
 604              * @param {Object} sortInfo An object with the keys field and direction
 605              */
 606             'sortchange',
 607             <div id="event-Ext.grid.GridPanel-groupchange"></div>/**
 608              * @event groupchange
 609              * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})
 610              * @param {Grid} this
 611              * @param {String} groupField A string with the grouping field, null if the store is not grouped.
 612              */
 613             'groupchange',
 614             <div id="event-Ext.grid.GridPanel-reconfigure"></div>/**
 615              * @event reconfigure
 616              * Fires when the grid is reconfigured with a new store and/or column model.
 617              * @param {Grid} this
 618              * @param {Ext.data.Store} store The new store
 619              * @param {Ext.grid.ColumnModel} colModel The new column model
 620              */
 621             'reconfigure',
 622             <div id="event-Ext.grid.GridPanel-viewready"></div>/**
 623              * @event viewready
 624              * Fires when the grid view is available (use this for selecting a default row).
 625              * @param {Grid} this
 626              */
 627             'viewready'
 628         );
 629     },
 630
 631     // private
 632     onRender : function(ct, position){
 633         Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
 634
 635         var c = this.getGridEl();
 636
 637         this.el.addClass('x-grid-panel');
 638
 639         this.mon(c, {
 640             scope: this,
 641             mousedown: this.onMouseDown,
 642             click: this.onClick,
 643             dblclick: this.onDblClick,
 644             contextmenu: this.onContextMenu
 645         });
 646
 647         this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
 648
 649         var view = this.getView();
 650         view.init(this);
 651         view.render();
 652         this.getSelectionModel().init(this);
 653     },
 654
 655     // private
 656     initEvents : function(){
 657         Ext.grid.GridPanel.superclass.initEvents.call(this);
 658
 659         if(this.loadMask){
 660             this.loadMask = new Ext.LoadMask(this.bwrap,
 661                     Ext.apply({store:this.store}, this.loadMask));
 662         }
 663     },
 664
 665     initStateEvents : function(){
 666         Ext.grid.GridPanel.superclass.initStateEvents.call(this);
 667         this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
 668     },
 669
 670     applyState : function(state){
 671         var cm = this.colModel,
 672             cs = state.columns,
 673             store = this.store,
 674             s,
 675             c,
 676             oldIndex;
 677
 678         if(cs){
 679             for(var i = 0, len = cs.length; i < len; i++){
 680                 s = cs[i];
 681                 c = cm.getColumnById(s.id);
 682                 if(c){
 683                     cm.setState(s.id, {
 684                         hidden: s.hidden,
 685                         width: s.width
 686                     });
 687                     oldIndex = cm.getIndexById(s.id);
 688                     if(oldIndex != i){
 689                         cm.moveColumn(oldIndex, i);
 690                     }
 691                 }
 692             }
 693         }
 694         if(store){
 695             s = state.sort;
 696             if(s){
 697                 store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
 698             }
 699             s = state.group;
 700             if(store.groupBy){
 701                 if(s){
 702                     store.groupBy(s);
 703                 }else{
 704                     store.clearGrouping();
 705                 }
 706             }
 707
 708         }
 709         var o = Ext.apply({}, state);
 710         delete o.columns;
 711         delete o.sort;
 712         Ext.grid.GridPanel.superclass.applyState.call(this, o);
 713     },
 714
 715     getState : function(){
 716         var o = {columns: []},
 717             store = this.store,
 718             ss,
 719             gs;
 720
 721         for(var i = 0, c; (c = this.colModel.config[i]); i++){
 722             o.columns[i] = {
 723                 id: c.id,
 724                 width: c.width
 725             };
 726             if(c.hidden){
 727                 o.columns[i].hidden = true;
 728             }
 729         }
 730         if(store){
 731             ss = store.getSortState();
 732             if(ss){
 733                 o.sort = ss;
 734             }
 735             if(store.getGroupState){
 736                 gs = store.getGroupState();
 737                 if(gs){
 738                     o.group = gs;
 739                 }
 740             }
 741         }
 742         return o;
 743     },
 744
 745     // private
 746     afterRender : function(){
 747         Ext.grid.GridPanel.superclass.afterRender.call(this);
 748         var v = this.view;
 749         this.on('bodyresize', v.layout, v);
 750         v.layout(true);
 751         if(this.deferRowRender){
 752             if (!this.deferRowRenderTask){
 753                 this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
 754             }
 755             this.deferRowRenderTask.delay(10);
 756         }else{
 757             v.afterRender();
 758         }
 759         this.viewReady = true;
 760     },
 761
 762     <div id="method-Ext.grid.GridPanel-reconfigure"></div>/**
 763      * <p>Reconfigures the grid to use a different Store and Column Model
 764      * and fires the 'reconfigure' event. The View will be bound to the new
 765      * objects and refreshed.</p>
 766      * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become
 767      * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
 768      * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
 769      * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
 770      * with the new data.</p>
 771      * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
 772      * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
 773      */
 774     reconfigure : function(store, colModel){
 775         var rendered = this.rendered;
 776         if(rendered){
 777             if(this.loadMask){
 778                 this.loadMask.destroy();
 779                 this.loadMask = new Ext.LoadMask(this.bwrap,
 780                         Ext.apply({}, {store:store}, this.initialConfig.loadMask));
 781             }
 782         }
 783         if(this.view){
 784             this.view.initData(store, colModel);
 785         }
 786         this.store = store;
 787         this.colModel = colModel;
 788         if(rendered){
 789             this.view.refresh(true);
 790         }
 791         this.fireEvent('reconfigure', this, store, colModel);
 792     },
 793
 794     // private
 795     onDestroy : function(){
 796         if (this.deferRowRenderTask && this.deferRowRenderTask.cancel){
 797             this.deferRowRenderTask.cancel();
 798         }
 799         if(this.rendered){
 800             Ext.destroy(this.view, this.loadMask);
 801         }else if(this.store && this.store.autoDestroy){
 802             this.store.destroy();
 803         }
 804         Ext.destroy(this.colModel, this.selModel);
 805         this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
 806         Ext.grid.GridPanel.superclass.onDestroy.call(this);
 807     },
 808
 809     // private
 810     processEvent : function(name, e){
 811         this.view.processEvent(name, e);
 812     },
 813
 814     // private
 815     onClick : function(e){
 816         this.processEvent('click', e);
 817     },
 818
 819     // private
 820     onMouseDown : function(e){
 821         this.processEvent('mousedown', e);
 822     },
 823
 824     // private
 825     onContextMenu : function(e, t){
 826         this.processEvent('contextmenu', e);
 827     },
 828
 829     // private
 830     onDblClick : function(e){
 831         this.processEvent('dblclick', e);
 832     },
 833
 834     // private
 835     walkCells : function(row, col, step, fn, scope){
 836         var cm    = this.colModel,
 837             clen  = cm.getColumnCount(),
 838             ds    = this.store,
 839             rlen  = ds.getCount(),
 840             first = true;
 841
 842         if(step < 0){
 843             if(col < 0){
 844                 row--;
 845                 first = false;
 846             }
 847             while(row >= 0){
 848                 if(!first){
 849                     col = clen-1;
 850                 }
 851                 first = false;
 852                 while(col >= 0){
 853                     if(fn.call(scope || this, row, col, cm) === true){
 854                         return [row, col];
 855                     }
 856                     col--;
 857                 }
 858                 row--;
 859             }
 860         } else {
 861             if(col >= clen){
 862                 row++;
 863                 first = false;
 864             }
 865             while(row < rlen){
 866                 if(!first){
 867                     col = 0;
 868                 }
 869                 first = false;
 870                 while(col < clen){
 871                     if(fn.call(scope || this, row, col, cm) === true){
 872                         return [row, col];
 873                     }
 874                     col++;
 875                 }
 876                 row++;
 877             }
 878         }
 879         return null;
 880     },
 881
 882     <div id="method-Ext.grid.GridPanel-getGridEl"></div>/**
 883      * Returns the grid's underlying element.
 884      * @return {Element} The element
 885      */
 886     getGridEl : function(){
 887         return this.body;
 888     },
 889
 890     // private for compatibility, overridden by editor grid
 891     stopEditing : Ext.emptyFn,
 892
 893     <div id="method-Ext.grid.GridPanel-getSelectionModel"></div>/**
 894      * Returns the grid's selection model configured by the <code>{@link #selModel}</code>
 895      * configuration option. If no selection model was configured, this will create
 896      * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
 897      * @return {SelectionModel}
 898      */
 899     getSelectionModel : function(){
 900         if(!this.selModel){
 901             this.selModel = new Ext.grid.RowSelectionModel(
 902                     this.disableSelection ? {selectRow: Ext.emptyFn} : null);
 903         }
 904         return this.selModel;
 905     },
 906
 907     <div id="method-Ext.grid.GridPanel-getStore"></div>/**
 908      * Returns the grid's data store.
 909      * @return {Ext.data.Store} The store
 910      */
 911     getStore : function(){
 912         return this.store;
 913     },
 914
 915     <div id="method-Ext.grid.GridPanel-getColumnModel"></div>/**
 916      * Returns the grid's ColumnModel.
 917      * @return {Ext.grid.ColumnModel} The column model
 918      */
 919     getColumnModel : function(){
 920         return this.colModel;
 921     },
 922
 923     <div id="method-Ext.grid.GridPanel-getView"></div>/**
 924      * Returns the grid's GridView object.
 925      * @return {Ext.grid.GridView} The grid view
 926      */
 927     getView : function() {
 928         if (!this.view) {
 929             this.view = new Ext.grid.GridView(this.viewConfig);
 930         }
 931
 932         return this.view;
 933     },
 934     <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**
 935      * Called to get grid's drag proxy text, by default returns this.ddText.
 936      * @return {String} The text
 937      */
 938     getDragDropText : function(){
 939         var count = this.selModel.getCount();
 940         return String.format(this.ddText, count, count == 1 ? '' : 's');
 941     }
 942
 943     <div id="cfg-Ext.grid.GridPanel-activeItem"></div>/**
 944      * @cfg {String/Number} activeItem
 945      * @hide
 946      */
 947     <div id="cfg-Ext.grid.GridPanel-autoDestroy"></div>/**
 948      * @cfg {Boolean} autoDestroy
 949      * @hide
 950      */
 951     <div id="cfg-Ext.grid.GridPanel-autoLoad"></div>/**
 952      * @cfg {Object/String/Function} autoLoad
 953      * @hide
 954      */
 955     <div id="cfg-Ext.grid.GridPanel-autoWidth"></div>/**
 956      * @cfg {Boolean} autoWidth
 957      * @hide
 958      */
 959     <div id="cfg-Ext.grid.GridPanel-bufferResize"></div>/**
 960      * @cfg {Boolean/Number} bufferResize
 961      * @hide
 962      */
 963     <div id="cfg-Ext.grid.GridPanel-defaultType"></div>/**
 964      * @cfg {String} defaultType
 965      * @hide
 966      */
 967     <div id="cfg-Ext.grid.GridPanel-defaults"></div>/**
 968      * @cfg {Object} defaults
 969      * @hide
 970      */
 971     <div id="cfg-Ext.grid.GridPanel-hideBorders"></div>/**
 972      * @cfg {Boolean} hideBorders
 973      * @hide
 974      */
 975     <div id="cfg-Ext.grid.GridPanel-items"></div>/**
 976      * @cfg {Mixed} items
 977      * @hide
 978      */
 979     <div id="cfg-Ext.grid.GridPanel-layout"></div>/**
 980      * @cfg {String} layout
 981      * @hide
 982      */
 983     <div id="cfg-Ext.grid.GridPanel-layoutConfig"></div>/**
 984      * @cfg {Object} layoutConfig
 985      * @hide
 986      */
 987     <div id="cfg-Ext.grid.GridPanel-monitorResize"></div>/**
 988      * @cfg {Boolean} monitorResize
 989      * @hide
 990      */
 991     <div id="prop-Ext.grid.GridPanel-items"></div>/**
 992      * @property items
 993      * @hide
 994      */
 995     <div id="method-Ext.grid.GridPanel-add"></div>/**
 996      * @method add
 997      * @hide
 998      */
 999     <div id="method-Ext.grid.GridPanel-cascade"></div>/**
1000      * @method cascade
1001      * @hide
1002      */
1003     <div id="method-Ext.grid.GridPanel-doLayout"></div>/**
1004      * @method doLayout
1005      * @hide
1006      */
1007     <div id="method-Ext.grid.GridPanel-find"></div>/**
1008      * @method find
1009      * @hide
1010      */
1011     <div id="method-Ext.grid.GridPanel-findBy"></div>/**
1012      * @method findBy
1013      * @hide
1014      */
1015     <div id="method-Ext.grid.GridPanel-findById"></div>/**
1016      * @method findById
1017      * @hide
1018      */
1019     <div id="method-Ext.grid.GridPanel-findByType"></div>/**
1020      * @method findByType
1021      * @hide
1022      */
1023     <div id="method-Ext.grid.GridPanel-getComponent"></div>/**
1024      * @method getComponent
1025      * @hide
1026      */
1027     <div id="method-Ext.grid.GridPanel-getLayout"></div>/**
1028      * @method getLayout
1029      * @hide
1030      */
1031     <div id="method-Ext.grid.GridPanel-getUpdater"></div>/**
1032      * @method getUpdater
1033      * @hide
1034      */
1035     <div id="method-Ext.grid.GridPanel-insert"></div>/**
1036      * @method insert
1037      * @hide
1038      */
1039     <div id="method-Ext.grid.GridPanel-load"></div>/**
1040      * @method load
1041      * @hide
1042      */
1043     <div id="method-Ext.grid.GridPanel-remove"></div>/**
1044      * @method remove
1045      * @hide
1046      */
1047     <div id="event-Ext.grid.GridPanel-add"></div>/**
1048      * @event add
1049      * @hide
1050      */
1051     <div id="event-Ext.grid.GridPanel-afterlayout"></div>/**
1052      * @event afterlayout
1053      * @hide
1054      */
1055     <div id="event-Ext.grid.GridPanel-beforeadd"></div>/**
1056      * @event beforeadd
1057      * @hide
1058      */
1059     <div id="event-Ext.grid.GridPanel-beforeremove"></div>/**
1060      * @event beforeremove
1061      * @hide
1062      */
1063     <div id="event-Ext.grid.GridPanel-remove"></div>/**
1064      * @event remove
1065      * @hide
1066      */
1067
1068
1069
1070     <div id="cfg-Ext.grid.GridPanel-allowDomMove"></div>/**
1071      * @cfg {String} allowDomMove  @hide
1072      */
1073     <div id="cfg-Ext.grid.GridPanel-autoEl"></div>/**
1074      * @cfg {String} autoEl @hide
1075      */
1076     <div id="cfg-Ext.grid.GridPanel-applyTo"></div>/**
1077      * @cfg {String} applyTo  @hide
1078      */
1079     <div id="cfg-Ext.grid.GridPanel-autoScroll"></div>/**
1080      * @cfg {String} autoScroll  @hide
1081      */
1082     <div id="cfg-Ext.grid.GridPanel-bodyBorder"></div>/**
1083      * @cfg {String} bodyBorder  @hide
1084      */
1085     <div id="cfg-Ext.grid.GridPanel-bodyStyle"></div>/**
1086      * @cfg {String} bodyStyle  @hide
1087      */
1088     <div id="cfg-Ext.grid.GridPanel-contentEl"></div>/**
1089      * @cfg {String} contentEl  @hide
1090      */
1091     <div id="cfg-Ext.grid.GridPanel-disabledClass"></div>/**
1092      * @cfg {String} disabledClass  @hide
1093      */
1094     <div id="cfg-Ext.grid.GridPanel-elements"></div>/**
1095      * @cfg {String} elements  @hide
1096      */
1097     <div id="cfg-Ext.grid.GridPanel-html"></div>/**
1098      * @cfg {String} html  @hide
1099      */
1100     <div id="cfg-Ext.grid.GridPanel-preventBodyReset"></div>/**
1101      * @cfg {Boolean} preventBodyReset
1102      * @hide
1103      */
1104     <div id="prop-Ext.grid.GridPanel-disabled"></div>/**
1105      * @property disabled
1106      * @hide
1107      */
1108     <div id="method-Ext.grid.GridPanel-applyToMarkup"></div>/**
1109      * @method applyToMarkup
1110      * @hide
1111      */
1112     <div id="method-Ext.grid.GridPanel-enable"></div>/**
1113      * @method enable
1114      * @hide
1115      */
1116     <div id="method-Ext.grid.GridPanel-disable"></div>/**
1117      * @method disable
1118      * @hide
1119      */
1120     <div id="method-Ext.grid.GridPanel-setDisabled"></div>/**
1121      * @method setDisabled
1122      * @hide
1123      */
1124 });
1125 Ext.reg('grid', Ext.grid.GridPanel);</pre>
1126 </body>
1127 </html>