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