Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / GridPanel.html
index 097548c..1b9afab 100644 (file)
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
   <title>The source code</title>
     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-<div id="cls-Ext.grid.GridPanel"></div>/**\r
- * @class Ext.grid.GridPanel\r
- * @extends Ext.Panel\r
- * <p>This class represents the primary interface of a component based grid control to represent data\r
- * in a tabular format of rows and columns. The GridPanel is composed of the following:</p>\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)\r
- * <div class="sub-desc"></div></li>\r
- * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup\r
- * <div class="sub-desc"></div></li>\r
- * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface \r
- * <div class="sub-desc"></div></li>\r
- * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior \r
- * <div class="sub-desc"></div></li>\r
- * </ul></div>\r
- * <p>Example usage:</p>\r
- * <pre><code>\r
-var grid = new Ext.grid.GridPanel({\r
-    {@link #store}: new {@link Ext.data.Store}({\r
-        {@link Ext.data.Store#autoDestroy autoDestroy}: true,\r
-        {@link Ext.data.Store#reader reader}: reader,\r
-        {@link Ext.data.Store#data data}: xg.dummyData\r
-    }),\r
-    {@link #colModel}: new {@link Ext.grid.ColumnModel}({\r
-        {@link Ext.grid.ColumnModel#defaults defaults}: {\r
-            width: 120,\r
-            sortable: true\r
-        },\r
-        {@link Ext.grid.ColumnModel#columns columns}: [\r
-            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},\r
-            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
-            {header: 'Change', dataIndex: 'change'},\r
-            {header: '% Change', dataIndex: 'pctChange'},\r
-            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype\r
-            {\r
-                header: 'Last Updated', width: 135, dataIndex: 'lastChange',\r
-                xtype: 'datecolumn', format: 'M d, Y'\r
-            }\r
-        ],\r
-    }),\r
-    {@link #viewConfig}: {\r
-        {@link Ext.grid.GridView#forceFit forceFit}: true,\r
-\r
-//      Return CSS class to apply to rows depending upon data values\r
-        {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {\r
-            var c = record.{@link Ext.data.Record#get get}('change');\r
-            if (c < 0) {\r
-                return 'price-fall';\r
-            } else if (c > 0) {\r
-                return 'price-rise';\r
-            }\r
-        }\r
-    },\r
-    {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),\r
-    width: 600,\r
-    height: 300,\r
-    frame: true,\r
-    title: 'Framed with Row Selection and Horizontal Scrolling',\r
-    iconCls: 'icon-grid'\r
-});\r
- * </code></pre>\r
- * <p><b><u>Notes:</u></b></p>\r
- * <div class="mdetail-params"><ul>\r
- * <li>Although this class inherits many configuration options from base classes, some of them\r
- * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will\r
- * have no effect.</li>\r
- * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to\r
- * scroll its rows. These dimensions can either be set explicitly through the\r
- * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>\r
- * configuration options or implicitly set by using the grid as a child item of a\r
- * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}\r
- * provide the sizing of its child items (for example the Container of the Grid may specify\r
- * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>\r
- * <li>To access the data in a Grid, it is necessary to use the data model encapsulated\r
- * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>\r
- * </ul></div>\r
- * @constructor\r
- * @param {Object} config The config object\r
- * @xtype grid\r
- */\r
-Ext.grid.GridPanel = Ext.extend(Ext.Panel, {\r
-    <div id="cfg-Ext.grid.GridPanel-autoExpandColumn"></div>/**\r
-     * @cfg {String} autoExpandColumn\r
-     * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in\r
-     * this grid that should expand to fill unused space. This value specified here can not\r
-     * be <tt>0</tt>.</p>\r
-     * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with\r
-     * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>\r
-     * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>\r
-     * for additional details.</p>\r
-     * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>\r
-     */\r
-    autoExpandColumn : false,\r
-    <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**\r
-     * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>\r
-     * can have (if enabled). Defaults to <tt>1000</tt>.\r
-     */\r
-    autoExpandMax : 1000,\r
-    <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**\r
-     * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>\r
-     * can have (if enabled). Defaults to <tt>50</tt>.\r
-     */\r
-    autoExpandMin : 50,\r
-    <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**\r
-     * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.\r
-     * Default is <tt>false</tt>.\r
-     */\r
-    columnLines : false,\r
-    <div id="cfg-Ext.grid.GridPanel-cm"></div>/**\r
-     * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-colModel"></div>/**\r
-     * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-columns"></div>/**\r
-     * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a\r
-     * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the\r
-     * <tt>{@link #colModel}</tt> configuration property.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-ddGroup"></div>/**\r
-     * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-ddText"></div>/**\r
-     * @cfg {String} ddText\r
-     * Configures the text in the drag proxy.  Defaults to:\r
-     * <pre><code>\r
-     * ddText : '{0} selected row{1}'\r
-     * </code></pre>\r
-     * <tt>{0}</tt> is replaced with the number of selected rows.\r
-     */\r
-    ddText : '{0} selected row{1}',\r
-    <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**\r
-     * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>\r
-     * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row\r
-     * structure deferred so that layouts with GridPanels appear more quickly.</p>\r
-     */\r
-    deferRowRender : true,\r
-    <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**\r
-     * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>\r
-     * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-enableColumnResize"></div>/**\r
-     * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-enableColumnHide"></div>/**\r
-     * @cfg {Boolean} enableColumnHide\r
-     * Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}\r
-     * with the {@link #enableHdMenu header menu}.\r
-     */\r
-    enableColumnHide : true,\r
-    <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**\r
-     * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>\r
-     * to turn off column reordering via drag drop.\r
-     */\r
-    enableColumnMove : true,\r
-    <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**\r
-     * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>\r
-     * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to\r
-     * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>\r
-     * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>\r
-     * property.</p>\r
-     * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of\r
-     * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},\r
-     * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able\r
-     * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>\r
-     */\r
-    enableDragDrop : false,\r
-    <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**\r
-     * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.\r
-     */\r
-    enableHdMenu : true,\r
-    <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**\r
-     * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-loadMask"></div>/**\r
-     * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while\r
-     * loading. Defaults to <code>false</code>.\r
-     */\r
-    loadMask : false,\r
-    <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**\r
-     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-minColumnWidth"></div>/**\r
-     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.\r
-     */\r
-    minColumnWidth : 25,\r
-    <div id="cfg-Ext.grid.GridPanel-sm"></div>/**\r
-     * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-selModel"></div>/**\r
-     * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide\r
-     * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-store"></div>/**\r
-     * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-stripeRows"></div>/**\r
-     * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.\r
-     * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of\r
-     * the grid. A default CSS rule is provided which sets a background colour, but you can override this\r
-     * with a rule which either overrides the <b>background-color</b> style using the '!important'\r
-     * modifier, or which uses a CSS selector of higher specificity.</p>\r
-     */\r
-    stripeRows : false,\r
-    <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**\r
-     * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>\r
-     * for GridPanel, but <tt>false</tt> for EditorGridPanel.\r
-     */\r
-    trackMouseOver : true,\r
-    <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**\r
-     * @cfg {Array} stateEvents\r
-     * An array of events that, when fired, should trigger this component to save its state.\r
-     * Defaults to:<pre><code>\r
-     * stateEvents: ['columnmove', 'columnresize', 'sortchange']\r
-     * </code></pre>\r
-     * <p>These can be any types of events supported by this component, including browser or\r
-     * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>\r
-     * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring\r
-     * Component state.</p>\r
-     */\r
-    stateEvents : ['columnmove', 'columnresize', 'sortchange'],\r
-    <div id="cfg-Ext.grid.GridPanel-view"></div>/**\r
-     * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set\r
-     * before a call to {@link Ext.Component#render render()}.\r
-     */\r
-    view : null,\r
-    \r
-    <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**\r
-     * @cfg {Array} bubbleEvents\r
-     * <p>An array of events that, when fired, should be bubbled to any parent container.\r
-     * Defaults to <tt>[]</tt>.\r
-     */\r
-    bubbleEvents: [],\r
-    \r
-    <div id="cfg-Ext.grid.GridPanel-viewConfig"></div>/**\r
-     * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of\r
-     * the config options available for {@link Ext.grid.GridView} can be specified here. This option\r
-     * is ignored if <tt>{@link #view}</tt> is specified.\r
-     */\r
-\r
-    // private\r
-    rendered : false,\r
-    // private\r
-    viewReady : false,\r
-\r
-    // private\r
-    initComponent : function(){\r
-        Ext.grid.GridPanel.superclass.initComponent.call(this);\r
-\r
-        if(this.columnLines){\r
-            this.cls = (this.cls || '') + ' x-grid-with-col-lines';\r
-        }\r
-        // override any provided value since it isn't valid\r
-        // and is causing too many bug reports ;)\r
-        this.autoScroll = false;\r
-        this.autoWidth = false;\r
-\r
-        if(Ext.isArray(this.columns)){\r
-            this.colModel = new Ext.grid.ColumnModel(this.columns);\r
-            delete this.columns;\r
-        }\r
-\r
-        // check and correct shorthanded configs\r
-        if(this.ds){\r
-            this.store = this.ds;\r
-            delete this.ds;\r
-        }\r
-        if(this.cm){\r
-            this.colModel = this.cm;\r
-            delete this.cm;\r
-        }\r
-        if(this.sm){\r
-            this.selModel = this.sm;\r
-            delete this.sm;\r
-        }\r
-        this.store = Ext.StoreMgr.lookup(this.store);\r
-\r
-        this.addEvents(\r
-            // raw events\r
-            <div id="event-Ext.grid.GridPanel-click"></div>/**\r
-             * @event click\r
-             * The raw click event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'click',\r
-            <div id="event-Ext.grid.GridPanel-dblclick"></div>/**\r
-             * @event dblclick\r
-             * The raw dblclick event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'dblclick',\r
-            <div id="event-Ext.grid.GridPanel-contextmenu"></div>/**\r
-             * @event contextmenu\r
-             * The raw contextmenu event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'contextmenu',\r
-            <div id="event-Ext.grid.GridPanel-mousedown"></div>/**\r
-             * @event mousedown\r
-             * The raw mousedown event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'mousedown',\r
-            <div id="event-Ext.grid.GridPanel-mouseup"></div>/**\r
-             * @event mouseup\r
-             * The raw mouseup event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'mouseup',\r
-            <div id="event-Ext.grid.GridPanel-mouseover"></div>/**\r
-             * @event mouseover\r
-             * The raw mouseover event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'mouseover',\r
-            <div id="event-Ext.grid.GridPanel-mouseout"></div>/**\r
-             * @event mouseout\r
-             * The raw mouseout event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'mouseout',\r
-            <div id="event-Ext.grid.GridPanel-keypress"></div>/**\r
-             * @event keypress\r
-             * The raw keypress event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'keypress',\r
-            <div id="event-Ext.grid.GridPanel-keydown"></div>/**\r
-             * @event keydown\r
-             * The raw keydown event for the entire grid.\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'keydown',\r
-\r
-            // custom events\r
-            <div id="event-Ext.grid.GridPanel-cellmousedown"></div>/**\r
-             * @event cellmousedown\r
-             * Fires before a cell is clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'cellmousedown',\r
-            <div id="event-Ext.grid.GridPanel-rowmousedown"></div>/**\r
-             * @event rowmousedown\r
-             * Fires before a row is clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'rowmousedown',\r
-            <div id="event-Ext.grid.GridPanel-headermousedown"></div>/**\r
-             * @event headermousedown\r
-             * Fires before a header is clicked\r
-             * @param {Grid} this\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'headermousedown',\r
-\r
-            <div id="event-Ext.grid.GridPanel-cellclick"></div>/**\r
-             * @event cellclick\r
-             * Fires when a cell is clicked.\r
-             * The data for the cell is drawn from the {@link Ext.data.Record Record}\r
-             * for this row. To access the data in the listener function use the\r
-             * following technique:\r
-             * <pre><code>\r
-function(grid, rowIndex, columnIndex, e) {\r
-    var record = grid.getStore().getAt(rowIndex);  // Get the Record\r
-    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name\r
-    var data = record.get(fieldName);\r
-}\r
-</code></pre>\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'cellclick',\r
-            <div id="event-Ext.grid.GridPanel-celldblclick"></div>/**\r
-             * @event celldblclick\r
-             * Fires when a cell is double clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'celldblclick',\r
-            <div id="event-Ext.grid.GridPanel-rowclick"></div>/**\r
-             * @event rowclick\r
-             * Fires when a row is clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'rowclick',\r
-            <div id="event-Ext.grid.GridPanel-rowdblclick"></div>/**\r
-             * @event rowdblclick\r
-             * Fires when a row is double clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'rowdblclick',\r
-            <div id="event-Ext.grid.GridPanel-headerclick"></div>/**\r
-             * @event headerclick\r
-             * Fires when a header is clicked\r
-             * @param {Grid} this\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'headerclick',\r
-            <div id="event-Ext.grid.GridPanel-headerdblclick"></div>/**\r
-             * @event headerdblclick\r
-             * Fires when a header cell is double clicked\r
-             * @param {Grid} this\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'headerdblclick',\r
-            <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**\r
-             * @event rowcontextmenu\r
-             * Fires when a row is right clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'rowcontextmenu',\r
-            <div id="event-Ext.grid.GridPanel-cellcontextmenu"></div>/**\r
-             * @event cellcontextmenu\r
-             * Fires when a cell is right clicked\r
-             * @param {Grid} this\r
-             * @param {Number} rowIndex\r
-             * @param {Number} cellIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'cellcontextmenu',\r
-            <div id="event-Ext.grid.GridPanel-headercontextmenu"></div>/**\r
-             * @event headercontextmenu\r
-             * Fires when a header is right clicked\r
-             * @param {Grid} this\r
-             * @param {Number} columnIndex\r
-             * @param {Ext.EventObject} e\r
-             */\r
-            'headercontextmenu',\r
-            <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**\r
-             * @event bodyscroll\r
-             * Fires when the body element is scrolled\r
-             * @param {Number} scrollLeft\r
-             * @param {Number} scrollTop\r
-             */\r
-            'bodyscroll',\r
-            <div id="event-Ext.grid.GridPanel-columnresize"></div>/**\r
-             * @event columnresize\r
-             * Fires when the user resizes a column\r
-             * @param {Number} columnIndex\r
-             * @param {Number} newSize\r
-             */\r
-            'columnresize',\r
-            <div id="event-Ext.grid.GridPanel-columnmove"></div>/**\r
-             * @event columnmove\r
-             * Fires when the user moves a column\r
-             * @param {Number} oldIndex\r
-             * @param {Number} newIndex\r
-             */\r
-            'columnmove',\r
-            <div id="event-Ext.grid.GridPanel-sortchange"></div>/**\r
-             * @event sortchange\r
-             * Fires when the grid's store sort changes\r
-             * @param {Grid} this\r
-             * @param {Object} sortInfo An object with the keys field and direction\r
-             */\r
-            'sortchange',\r
-            <div id="event-Ext.grid.GridPanel-reconfigure"></div>/**\r
-             * @event reconfigure\r
-             * Fires when the grid is reconfigured with a new store and/or column model.\r
-             * @param {Grid} this\r
-             * @param {Ext.data.Store} store The new store\r
-             * @param {Ext.grid.ColumnModel} colModel The new column model\r
-             */\r
-            'reconfigure'\r
-        );\r
-    },\r
-\r
-    // private\r
-    onRender : function(ct, position){\r
-        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);\r
-\r
-        var c = this.getGridEl();\r
-\r
-        this.el.addClass('x-grid-panel');\r
-\r
-        this.mon(c, {\r
-            scope: this,\r
-            mousedown: this.onMouseDown,\r
-            click: this.onClick,\r
-            dblclick: this.onDblClick,\r
-            contextmenu: this.onContextMenu\r
-        });\r
-\r
-        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);\r
-\r
-        var view = this.getView();\r
-        view.init(this);\r
-        view.render();\r
-        this.getSelectionModel().init(this);\r
-    },\r
-\r
-    // private\r
-    initEvents : function(){\r
-        Ext.grid.GridPanel.superclass.initEvents.call(this);\r
-\r
-        if(this.loadMask){\r
-            this.loadMask = new Ext.LoadMask(this.bwrap,\r
-                    Ext.apply({store:this.store}, this.loadMask));\r
-        }\r
-    },\r
-\r
-    initStateEvents : function(){\r
-        Ext.grid.GridPanel.superclass.initStateEvents.call(this);\r
-        this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});\r
-    },\r
-\r
-    applyState : function(state){\r
-        var cm = this.colModel,\r
-            cs = state.columns;\r
-        if(cs){\r
-            for(var i = 0, len = cs.length; i < len; i++){\r
-                var s = cs[i];\r
-                var c = cm.getColumnById(s.id);\r
-                if(c){\r
-                    c.hidden = s.hidden;\r
-                    c.width = s.width;\r
-                    var oldIndex = cm.getIndexById(s.id);\r
-                    if(oldIndex != i){\r
-                        cm.moveColumn(oldIndex, i);\r
-                    }\r
-                }\r
-            }\r
-        }\r
-        if(state.sort && this.store){\r
-            this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);\r
-        }\r
-        var o = Ext.apply({}, state);\r
-        delete o.columns;\r
-        delete o.sort;\r
-        Ext.grid.GridPanel.superclass.applyState.call(this, o);\r
-    },\r
-\r
-    getState : function(){\r
-        var o = {columns: []};\r
-        for(var i = 0, c; (c = this.colModel.config[i]); i++){\r
-            o.columns[i] = {\r
-                id: c.id,\r
-                width: c.width\r
-            };\r
-            if(c.hidden){\r
-                o.columns[i].hidden = true;\r
-            }\r
-        }\r
-        if(this.store){\r
-            var ss = this.store.getSortState();\r
-            if(ss){\r
-                o.sort = ss;\r
-            }\r
-        }\r
-        return o;\r
-    },\r
-\r
-    // private\r
-    afterRender : function(){\r
-        Ext.grid.GridPanel.superclass.afterRender.call(this);\r
-        var v = this.view;\r
-        this.on('bodyresize', v.layout, v);\r
-        v.layout();\r
-        if(this.deferRowRender){\r
-            v.afterRender.defer(10, this.view);\r
-        }else{\r
-            v.afterRender();\r
-        }\r
-        this.viewReady = true;\r
-    },\r
-\r
-    <div id="method-Ext.grid.GridPanel-reconfigure"></div>/**\r
-     * <p>Reconfigures the grid to use a different Store and Column Model\r
-     * and fires the 'reconfigure' event. The View will be bound to the new\r
-     * objects and refreshed.</p>\r
-     * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become\r
-     * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the\r
-     * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound\r
-     * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring\r
-     * with the new data.</p>\r
-     * @param {Ext.data.Store} store The new {@link Ext.data.Store} object\r
-     * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object\r
-     */\r
-    reconfigure : function(store, colModel){\r
-        if(this.loadMask){\r
-            this.loadMask.destroy();\r
-            this.loadMask = new Ext.LoadMask(this.bwrap,\r
-                    Ext.apply({}, {store:store}, this.initialConfig.loadMask));\r
-        }\r
-        this.view.initData(store, colModel);\r
-        this.store = store;\r
-        this.colModel = colModel;\r
-        if(this.rendered){\r
-            this.view.refresh(true);\r
-        }\r
-        this.fireEvent('reconfigure', this, store, colModel);\r
-    },\r
-\r
-    // private\r
-    onDestroy : function(){\r
-        if(this.rendered){\r
-            var c = this.body;\r
-            c.removeAllListeners();\r
-            c.update('');\r
-            Ext.destroy(this.view, this.loadMask);\r
-        }else if(this.store && this.store.autoDestroy){\r
-            this.store.destroy();\r
-        }\r
-        Ext.destroy(this.colModel, this.selModel);\r
-        this.store = this.selModel = this.colModel = this.view = this.loadMask = null;\r
-        Ext.grid.GridPanel.superclass.onDestroy.call(this);\r
-    },\r
-\r
-    // private\r
-    processEvent : function(name, e){\r
-        this.fireEvent(name, e);\r
-        var t = e.getTarget();\r
-        var v = this.view;\r
-        var header = v.findHeaderIndex(t);\r
-        if(header !== false){\r
-            this.fireEvent('header' + name, this, header, e);\r
-        }else{\r
-            var row = v.findRowIndex(t);\r
-            var cell = v.findCellIndex(t);\r
-            if(row !== false){\r
-                this.fireEvent('row' + name, this, row, e);\r
-                if(cell !== false){\r
-                    this.fireEvent('cell' + name, this, row, cell, e);\r
-                }\r
-            }\r
-        }\r
-    },\r
-\r
-    // private\r
-    onClick : function(e){\r
-        this.processEvent('click', e);\r
-    },\r
-\r
-    // private\r
-    onMouseDown : function(e){\r
-        this.processEvent('mousedown', e);\r
-    },\r
-\r
-    // private\r
-    onContextMenu : function(e, t){\r
-        this.processEvent('contextmenu', e);\r
-    },\r
-\r
-    // private\r
-    onDblClick : function(e){\r
-        this.processEvent('dblclick', e);\r
-    },\r
-\r
-    // private\r
-    walkCells : function(row, col, step, fn, scope){\r
-        var cm = this.colModel, clen = cm.getColumnCount();\r
-        var ds = this.store, rlen = ds.getCount(), first = true;\r
-        if(step < 0){\r
-            if(col < 0){\r
-                row--;\r
-                first = false;\r
-            }\r
-            while(row >= 0){\r
-                if(!first){\r
-                    col = clen-1;\r
-                }\r
-                first = false;\r
-                while(col >= 0){\r
-                    if(fn.call(scope || this, row, col, cm) === true){\r
-                        return [row, col];\r
-                    }\r
-                    col--;\r
-                }\r
-                row--;\r
-            }\r
-        } else {\r
-            if(col >= clen){\r
-                row++;\r
-                first = false;\r
-            }\r
-            while(row < rlen){\r
-                if(!first){\r
-                    col = 0;\r
-                }\r
-                first = false;\r
-                while(col < clen){\r
-                    if(fn.call(scope || this, row, col, cm) === true){\r
-                        return [row, col];\r
-                    }\r
-                    col++;\r
-                }\r
-                row++;\r
-            }\r
-        }\r
-        return null;\r
-    },\r
-\r
-    // private\r
-    onResize : function(){\r
-        Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);\r
-        if(this.viewReady){\r
-            this.view.layout();\r
-        }\r
-    },\r
-\r
-    <div id="method-Ext.grid.GridPanel-getGridEl"></div>/**\r
-     * Returns the grid's underlying element.\r
-     * @return {Element} The element\r
-     */\r
-    getGridEl : function(){\r
-        return this.body;\r
-    },\r
-\r
-    // private for compatibility, overridden by editor grid\r
-    stopEditing : Ext.emptyFn,\r
-\r
-    <div id="method-Ext.grid.GridPanel-getSelectionModel"></div>/**\r
-     * Returns the grid's selection model configured by the <code>{@link #selModel}</code>\r
-     * configuration option. If no selection model was configured, this will create\r
-     * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.\r
-     * @return {SelectionModel}\r
-     */\r
-    getSelectionModel : function(){\r
-        if(!this.selModel){\r
-            this.selModel = new Ext.grid.RowSelectionModel(\r
-                    this.disableSelection ? {selectRow: Ext.emptyFn} : null);\r
-        }\r
-        return this.selModel;\r
-    },\r
-\r
-    <div id="method-Ext.grid.GridPanel-getStore"></div>/**\r
-     * Returns the grid's data store.\r
-     * @return {Ext.data.Store} The store\r
-     */\r
-    getStore : function(){\r
-        return this.store;\r
-    },\r
-\r
-    <div id="method-Ext.grid.GridPanel-getColumnModel"></div>/**\r
-     * Returns the grid's ColumnModel.\r
-     * @return {Ext.grid.ColumnModel} The column model\r
-     */\r
-    getColumnModel : function(){\r
-        return this.colModel;\r
-    },\r
-\r
-    <div id="method-Ext.grid.GridPanel-getView"></div>/**\r
-     * Returns the grid's GridView object.\r
-     * @return {Ext.grid.GridView} The grid view\r
-     */\r
-    getView : function(){\r
-        if(!this.view){\r
-            this.view = new Ext.grid.GridView(this.viewConfig);\r
-        }\r
-        return this.view;\r
-    },\r
-    <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**\r
-     * Called to get grid's drag proxy text, by default returns this.ddText.\r
-     * @return {String} The text\r
-     */\r
-    getDragDropText : function(){\r
-        var count = this.selModel.getCount();\r
-        return String.format(this.ddText, count, count == 1 ? '' : 's');\r
-    }\r
-\r
-    <div id="cfg-Ext.grid.GridPanel-activeItem"></div>/** \r
-     * @cfg {String/Number} activeItem \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-autoDestroy"></div>/** \r
-     * @cfg {Boolean} autoDestroy \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-autoLoad"></div>/** \r
-     * @cfg {Object/String/Function} autoLoad \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-autoWidth"></div>/** \r
-     * @cfg {Boolean} autoWidth \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-bufferResize"></div>/** \r
-     * @cfg {Boolean/Number} bufferResize \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-defaultType"></div>/** \r
-     * @cfg {String} defaultType \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-defaults"></div>/** \r
-     * @cfg {Object} defaults \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-hideBorders"></div>/** \r
-     * @cfg {Boolean} hideBorders \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-items"></div>/** \r
-     * @cfg {Mixed} items \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-layout"></div>/** \r
-     * @cfg {String} layout \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-layoutConfig"></div>/** \r
-     * @cfg {Object} layoutConfig \r
-     * @hide \r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-monitorResize"></div>/** \r
-     * @cfg {Boolean} monitorResize \r
-     * @hide \r
-     */\r
-    <div id="prop-Ext.grid.GridPanel-items"></div>/** \r
-     * @property items \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-add"></div>/** \r
-     * @method add \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-cascade"></div>/** \r
-     * @method cascade \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-doLayout"></div>/** \r
-     * @method doLayout \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-find"></div>/** \r
-     * @method find \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-findBy"></div>/** \r
-     * @method findBy \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-findById"></div>/** \r
-     * @method findById \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-findByType"></div>/** \r
-     * @method findByType \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-getComponent"></div>/** \r
-     * @method getComponent \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-getLayout"></div>/** \r
-     * @method getLayout \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-getUpdater"></div>/** \r
-     * @method getUpdater \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-insert"></div>/** \r
-     * @method insert \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-load"></div>/** \r
-     * @method load \r
-     * @hide \r
-     */\r
-    <div id="method-Ext.grid.GridPanel-remove"></div>/** \r
-     * @method remove \r
-     * @hide \r
-     */\r
-    <div id="event-Ext.grid.GridPanel-add"></div>/** \r
-     * @event add \r
-     * @hide \r
-     */\r
-    <div id="event-Ext.grid.GridPanel-afterLayout"></div>/** \r
-     * @event afterLayout \r
-     * @hide \r
-     */\r
-    <div id="event-Ext.grid.GridPanel-beforeadd"></div>/** \r
-     * @event beforeadd \r
-     * @hide \r
-     */\r
-    <div id="event-Ext.grid.GridPanel-beforeremove"></div>/** \r
-     * @event beforeremove \r
-     * @hide \r
-     */\r
-    <div id="event-Ext.grid.GridPanel-remove"></div>/** \r
-     * @event remove \r
-     * @hide \r
-     */\r
-\r
-\r
-\r
-    <div id="cfg-Ext.grid.GridPanel-allowDomMove"></div>/**\r
-     * @cfg {String} allowDomMove  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-autoEl"></div>/**\r
-     * @cfg {String} autoEl @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-applyTo"></div>/**\r
-     * @cfg {String} applyTo  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-autoScroll"></div>/**\r
-     * @cfg {String} autoScroll  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-bodyBorder"></div>/**\r
-     * @cfg {String} bodyBorder  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-bodyStyle"></div>/**\r
-     * @cfg {String} bodyStyle  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-contentEl"></div>/**\r
-     * @cfg {String} contentEl  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-disabledClass"></div>/**\r
-     * @cfg {String} disabledClass  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-elements"></div>/**\r
-     * @cfg {String} elements  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-html"></div>/**\r
-     * @cfg {String} html  @hide\r
-     */\r
-    <div id="cfg-Ext.grid.GridPanel-preventBodyReset"></div>/**\r
-     * @cfg {Boolean} preventBodyReset\r
-     * @hide\r
-     */\r
-    <div id="prop-Ext.grid.GridPanel-disabled"></div>/**\r
-     * @property disabled\r
-     * @hide\r
-     */\r
-    <div id="method-Ext.grid.GridPanel-applyToMarkup"></div>/**\r
-     * @method applyToMarkup\r
-     * @hide\r
-     */\r
-    <div id="method-Ext.grid.GridPanel-enable"></div>/**\r
-     * @method enable\r
-     * @hide\r
-     */\r
-    <div id="method-Ext.grid.GridPanel-disable"></div>/**\r
-     * @method disable\r
-     * @hide\r
-     */\r
-    <div id="method-Ext.grid.GridPanel-setDisabled"></div>/**\r
-     * @method setDisabled\r
-     * @hide\r
-     */\r
-});\r
-Ext.reg('grid', Ext.grid.GridPanel);</pre>
+<div id="cls-Ext.grid.GridPanel"></div>/**
+ * @class Ext.grid.GridPanel
+ * @extends Ext.Panel
+ * <p>This class represents the primary interface of a component based grid control to represent data
+ * in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)
+ * <div class="sub-desc"></div></li>
+ * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup
+ * <div class="sub-desc"></div></li>
+ * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface
+ * <div class="sub-desc"></div></li>
+ * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior
+ * <div class="sub-desc"></div></li>
+ * </ul></div>
+ * <p>Example usage:</p>
+ * <pre><code>
+var grid = new Ext.grid.GridPanel({
+    {@link #store}: new {@link Ext.data.Store}({
+        {@link Ext.data.Store#autoDestroy autoDestroy}: true,
+        {@link Ext.data.Store#reader reader}: reader,
+        {@link Ext.data.Store#data data}: xg.dummyData
+    }),
+    {@link #colModel}: new {@link Ext.grid.ColumnModel}({
+        {@link Ext.grid.ColumnModel#defaults defaults}: {
+            width: 120,
+            sortable: true
+        },
+        {@link Ext.grid.ColumnModel#columns columns}: [
+            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
+            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+            {header: 'Change', dataIndex: 'change'},
+            {header: '% Change', dataIndex: 'pctChange'},
+            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
+            {
+                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
+                xtype: 'datecolumn', format: 'M d, Y'
+            }
+        ],
+    }),
+    {@link #viewConfig}: {
+        {@link Ext.grid.GridView#forceFit forceFit}: true,
+
+//      Return CSS class to apply to rows depending upon data values
+        {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
+            var c = record.{@link Ext.data.Record#get get}('change');
+            if (c < 0) {
+                return 'price-fall';
+            } else if (c > 0) {
+                return 'price-rise';
+            }
+        }
+    },
+    {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
+    width: 600,
+    height: 300,
+    frame: true,
+    title: 'Framed with Row Selection and Horizontal Scrolling',
+    iconCls: 'icon-grid'
+});
+ * </code></pre>
+ * <p><b><u>Notes:</u></b></p>
+ * <div class="mdetail-params"><ul>
+ * <li>Although this class inherits many configuration options from base classes, some of them
+ * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
+ * have no effect.</li>
+ * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
+ * scroll its rows. These dimensions can either be set explicitly through the
+ * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>
+ * configuration options or implicitly set by using the grid as a child item of a
+ * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
+ * provide the sizing of its child items (for example the Container of the Grid may specify
+ * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>
+ * <li>To access the data in a Grid, it is necessary to use the data model encapsulated
+ * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>
+ * </ul></div>
+ * @constructor
+ * @param {Object} config The config object
+ * @xtype grid
+ */
+Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
+    <div id="cfg-Ext.grid.GridPanel-autoExpandColumn"></div>/**
+     * @cfg {String} autoExpandColumn
+     * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in
+     * this grid that should expand to fill unused space. This value specified here can not
+     * be <tt>0</tt>.</p>
+     * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with
+     * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>
+     * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>
+     * for additional details.</p>
+     * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
+     */
+    autoExpandColumn : false,
+    <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**
+     * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
+     * can have (if enabled). Defaults to <tt>1000</tt>.
+     */
+    autoExpandMax : 1000,
+    <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**
+     * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
+     * can have (if enabled). Defaults to <tt>50</tt>.
+     */
+    autoExpandMin : 50,
+    <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**
+     * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
+     * Default is <tt>false</tt>.
+     */
+    columnLines : false,
+    <div id="cfg-Ext.grid.GridPanel-cm"></div>/**
+     * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
+     */
+    <div id="cfg-Ext.grid.GridPanel-colModel"></div>/**
+     * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
+     */
+    <div id="cfg-Ext.grid.GridPanel-columns"></div>/**
+     * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
+     * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the
+     * <tt>{@link #colModel}</tt> configuration property.
+     */
+    <div id="cfg-Ext.grid.GridPanel-ddGroup"></div>/**
+     * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
+     */
+    <div id="cfg-Ext.grid.GridPanel-ddText"></div>/**
+     * @cfg {String} ddText
+     * Configures the text in the drag proxy.  Defaults to:
+     * <pre><code>
+     * ddText : '{0} selected row{1}'
+     * </code></pre>
+     * <tt>{0}</tt> is replaced with the number of selected rows.
+     */
+    ddText : '{0} selected row{1}',
+    <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**
+     * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
+     * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
+     * structure deferred so that layouts with GridPanels appear more quickly.</p>
+     */
+    deferRowRender : true,
+    <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**
+     * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
+     * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
+     */
+    <div id="cfg-Ext.grid.GridPanel-enableColumnResize"></div>/**
+     * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
+     */
+    <div id="cfg-Ext.grid.GridPanel-enableColumnHide"></div>/**
+     * @cfg {Boolean} enableColumnHide
+     * Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}
+     * with the {@link #enableHdMenu header menu}.
+     */
+    enableColumnHide : true,
+    <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**
+     * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
+     * to turn off column reordering via drag drop.
+     */
+    enableColumnMove : true,
+    <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**
+     * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
+     * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
+     * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>
+     * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>
+     * property.</p>
+     * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
+     * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
+     * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
+     * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
+     */
+    enableDragDrop : false,
+    <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**
+     * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
+     */
+    enableHdMenu : true,
+    <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**
+     * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
+     */
+    <div id="cfg-Ext.grid.GridPanel-loadMask"></div>/**
+     * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
+     * loading. Defaults to <code>false</code>.
+     */
+    loadMask : false,
+    <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**
+     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
+     */
+    <div id="cfg-Ext.grid.GridPanel-minColumnWidth"></div>/**
+     * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
+     */
+    minColumnWidth : 25,
+    <div id="cfg-Ext.grid.GridPanel-sm"></div>/**
+     * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
+     */
+    <div id="cfg-Ext.grid.GridPanel-selModel"></div>/**
+     * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
+     * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
+     */
+    <div id="cfg-Ext.grid.GridPanel-store"></div>/**
+     * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
+     */
+    <div id="cfg-Ext.grid.GridPanel-stripeRows"></div>/**
+     * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.
+     * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of
+     * the grid. A default CSS rule is provided which sets a background colour, but you can override this
+     * with a rule which either overrides the <b>background-color</b> style using the '!important'
+     * modifier, or which uses a CSS selector of higher specificity.</p>
+     */
+    stripeRows : false,
+    <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**
+     * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
+     * for GridPanel, but <tt>false</tt> for EditorGridPanel.
+     */
+    trackMouseOver : true,
+    <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**
+     * @cfg {Array} stateEvents
+     * An array of events that, when fired, should trigger this component to save its state.
+     * Defaults to:<pre><code>
+     * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']
+     * </code></pre>
+     * <p>These can be any types of events supported by this component, including browser or
+     * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>
+     * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring
+     * Component state.</p>
+     */
+    stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
+    <div id="cfg-Ext.grid.GridPanel-view"></div>/**
+     * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
+     * before a call to {@link Ext.Component#render render()}.
+     */
+    view : null,
+
+    <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**
+     * @cfg {Array} bubbleEvents
+     * <p>An array of events that, when fired, should be bubbled to any parent container.
+     * See {@link Ext.util.Observable#enableBubble}.
+     * Defaults to <tt>[]</tt>.
+     */
+    bubbleEvents: [],
+
+    <div id="cfg-Ext.grid.GridPanel-viewConfig"></div>/**
+     * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of
+     * the config options available for {@link Ext.grid.GridView} can be specified here. This option
+     * is ignored if <tt>{@link #view}</tt> is specified.
+     */
+
+    // private
+    rendered : false,
+    // private
+    viewReady : false,
+
+    // private
+    initComponent : function(){
+        Ext.grid.GridPanel.superclass.initComponent.call(this);
+
+        if(this.columnLines){
+            this.cls = (this.cls || '') + ' x-grid-with-col-lines';
+        }
+        // override any provided value since it isn't valid
+        // and is causing too many bug reports ;)
+        this.autoScroll = false;
+        this.autoWidth = false;
+
+        if(Ext.isArray(this.columns)){
+            this.colModel = new Ext.grid.ColumnModel(this.columns);
+            delete this.columns;
+        }
+
+        // check and correct shorthanded configs
+        if(this.ds){
+            this.store = this.ds;
+            delete this.ds;
+        }
+        if(this.cm){
+            this.colModel = this.cm;
+            delete this.cm;
+        }
+        if(this.sm){
+            this.selModel = this.sm;
+            delete this.sm;
+        }
+        this.store = Ext.StoreMgr.lookup(this.store);
+
+        this.addEvents(
+            // raw events
+            <div id="event-Ext.grid.GridPanel-click"></div>/**
+             * @event click
+             * The raw click event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'click',
+            <div id="event-Ext.grid.GridPanel-dblclick"></div>/**
+             * @event dblclick
+             * The raw dblclick event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'dblclick',
+            <div id="event-Ext.grid.GridPanel-contextmenu"></div>/**
+             * @event contextmenu
+             * The raw contextmenu event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'contextmenu',
+            <div id="event-Ext.grid.GridPanel-mousedown"></div>/**
+             * @event mousedown
+             * The raw mousedown event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mousedown',
+            <div id="event-Ext.grid.GridPanel-mouseup"></div>/**
+             * @event mouseup
+             * The raw mouseup event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mouseup',
+            <div id="event-Ext.grid.GridPanel-mouseover"></div>/**
+             * @event mouseover
+             * The raw mouseover event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mouseover',
+            <div id="event-Ext.grid.GridPanel-mouseout"></div>/**
+             * @event mouseout
+             * The raw mouseout event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'mouseout',
+            <div id="event-Ext.grid.GridPanel-keypress"></div>/**
+             * @event keypress
+             * The raw keypress event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'keypress',
+            <div id="event-Ext.grid.GridPanel-keydown"></div>/**
+             * @event keydown
+             * The raw keydown event for the entire grid.
+             * @param {Ext.EventObject} e
+             */
+            'keydown',
+
+            // custom events
+            <div id="event-Ext.grid.GridPanel-cellmousedown"></div>/**
+             * @event cellmousedown
+             * Fires before a cell is clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'cellmousedown',
+            <div id="event-Ext.grid.GridPanel-rowmousedown"></div>/**
+             * @event rowmousedown
+             * Fires before a row is clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowmousedown',
+            <div id="event-Ext.grid.GridPanel-headermousedown"></div>/**
+             * @event headermousedown
+             * Fires before a header is clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headermousedown',
+
+            <div id="event-Ext.grid.GridPanel-groupmousedown"></div>/**
+             * @event groupmousedown
+             * Fires before a group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupmousedown',
+
+            <div id="event-Ext.grid.GridPanel-rowbodymousedown"></div>/**
+             * @event rowbodymousedown
+             * Fires before the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodymousedown',
+
+            <div id="event-Ext.grid.GridPanel-containermousedown"></div>/**
+             * @event containermousedown
+             * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containermousedown',
+
+            <div id="event-Ext.grid.GridPanel-cellclick"></div>/**
+             * @event cellclick
+             * Fires when a cell is clicked.
+             * The data for the cell is drawn from the {@link Ext.data.Record Record}
+             * for this row. To access the data in the listener function use the
+             * following technique:
+             * <pre><code>
+function(grid, rowIndex, columnIndex, e) {
+    var record = grid.getStore().getAt(rowIndex);  // Get the Record
+    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
+    var data = record.get(fieldName);
+}
+</code></pre>
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'cellclick',
+            <div id="event-Ext.grid.GridPanel-celldblclick"></div>/**
+             * @event celldblclick
+             * Fires when a cell is double clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'celldblclick',
+            <div id="event-Ext.grid.GridPanel-rowclick"></div>/**
+             * @event rowclick
+             * Fires when a row is clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowclick',
+            <div id="event-Ext.grid.GridPanel-rowdblclick"></div>/**
+             * @event rowdblclick
+             * Fires when a row is double clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowdblclick',
+            <div id="event-Ext.grid.GridPanel-headerclick"></div>/**
+             * @event headerclick
+             * Fires when a header is clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headerclick',
+            <div id="event-Ext.grid.GridPanel-headerdblclick"></div>/**
+             * @event headerdblclick
+             * Fires when a header cell is double clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headerdblclick',
+            <div id="event-Ext.grid.GridPanel-groupclick"></div>/**
+             * @event groupclick
+             * Fires when group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupclick',
+            <div id="event-Ext.grid.GridPanel-groupdblclick"></div>/**
+             * @event groupdblclick
+             * Fires when group header is double clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupdblclick',
+            <div id="event-Ext.grid.GridPanel-containerclick"></div>/**
+             * @event containerclick
+             * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containerclick',
+            <div id="event-Ext.grid.GridPanel-containerdblclick"></div>/**
+             * @event containerdblclick
+             * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containerdblclick',
+
+            <div id="event-Ext.grid.GridPanel-rowbodyclick"></div>/**
+             * @event rowbodyclick
+             * Fires when the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodyclick',
+            <div id="event-Ext.grid.GridPanel-rowbodydblclick"></div>/**
+             * @event rowbodydblclick
+             * Fires when the row body is double clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodydblclick',
+
+            <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**
+             * @event rowcontextmenu
+             * Fires when a row is right clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowcontextmenu',
+            <div id="event-Ext.grid.GridPanel-cellcontextmenu"></div>/**
+             * @event cellcontextmenu
+             * Fires when a cell is right clicked
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Number} cellIndex
+             * @param {Ext.EventObject} e
+             */
+            'cellcontextmenu',
+            <div id="event-Ext.grid.GridPanel-headercontextmenu"></div>/**
+             * @event headercontextmenu
+             * Fires when a header is right clicked
+             * @param {Grid} this
+             * @param {Number} columnIndex
+             * @param {Ext.EventObject} e
+             */
+            'headercontextmenu',
+            <div id="event-Ext.grid.GridPanel-groupcontextmenu"></div>/**
+             * @event groupcontextmenu
+             * Fires when group header is right clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
+             * @param {Grid} this
+             * @param {String} groupField
+             * @param {String} groupValue
+             * @param {Ext.EventObject} e
+             */
+            'groupcontextmenu',
+            <div id="event-Ext.grid.GridPanel-containercontextmenu"></div>/**
+             * @event containercontextmenu
+             * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
+             * @param {Grid} this
+             * @param {Ext.EventObject} e
+             */
+            'containercontextmenu',
+            <div id="event-Ext.grid.GridPanel-rowbodycontextmenu"></div>/**
+             * @event rowbodycontextmenu
+             * Fires when the row body is right clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
+             * @param {Grid} this
+             * @param {Number} rowIndex
+             * @param {Ext.EventObject} e
+             */
+            'rowbodycontextmenu',
+            <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**
+             * @event bodyscroll
+             * Fires when the body element is scrolled
+             * @param {Number} scrollLeft
+             * @param {Number} scrollTop
+             */
+            'bodyscroll',
+            <div id="event-Ext.grid.GridPanel-columnresize"></div>/**
+             * @event columnresize
+             * Fires when the user resizes a column
+             * @param {Number} columnIndex
+             * @param {Number} newSize
+             */
+            'columnresize',
+            <div id="event-Ext.grid.GridPanel-columnmove"></div>/**
+             * @event columnmove
+             * Fires when the user moves a column
+             * @param {Number} oldIndex
+             * @param {Number} newIndex
+             */
+            'columnmove',
+            <div id="event-Ext.grid.GridPanel-sortchange"></div>/**
+             * @event sortchange
+             * Fires when the grid's store sort changes
+             * @param {Grid} this
+             * @param {Object} sortInfo An object with the keys field and direction
+             */
+            'sortchange',
+            <div id="event-Ext.grid.GridPanel-groupchange"></div>/**
+             * @event groupchange
+             * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})
+             * @param {Grid} this
+             * @param {String} groupField A string with the grouping field, null if the store is not grouped.
+             */
+            'groupchange',
+            <div id="event-Ext.grid.GridPanel-reconfigure"></div>/**
+             * @event reconfigure
+             * Fires when the grid is reconfigured with a new store and/or column model.
+             * @param {Grid} this
+             * @param {Ext.data.Store} store The new store
+             * @param {Ext.grid.ColumnModel} colModel The new column model
+             */
+            'reconfigure',
+            <div id="event-Ext.grid.GridPanel-viewready"></div>/**
+             * @event viewready
+             * Fires when the grid view is available (use this for selecting a default row).
+             * @param {Grid} this
+             */
+            'viewready'
+        );
+    },
+
+    // private
+    onRender : function(ct, position){
+        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
+
+        var c = this.getGridEl();
+
+        this.el.addClass('x-grid-panel');
+
+        this.mon(c, {
+            scope: this,
+            mousedown: this.onMouseDown,
+            click: this.onClick,
+            dblclick: this.onDblClick,
+            contextmenu: this.onContextMenu
+        });
+
+        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
+
+        var view = this.getView();
+        view.init(this);
+        view.render();
+        this.getSelectionModel().init(this);
+    },
+
+    // private
+    initEvents : function(){
+        Ext.grid.GridPanel.superclass.initEvents.call(this);
+
+        if(this.loadMask){
+            this.loadMask = new Ext.LoadMask(this.bwrap,
+                    Ext.apply({store:this.store}, this.loadMask));
+        }
+    },
+
+    initStateEvents : function(){
+        Ext.grid.GridPanel.superclass.initStateEvents.call(this);
+        this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
+    },
+
+    applyState : function(state){
+        var cm = this.colModel,
+            cs = state.columns,
+            store = this.store,
+            s,
+            c,
+            oldIndex;
+
+        if(cs){
+            for(var i = 0, len = cs.length; i < len; i++){
+                s = cs[i];
+                c = cm.getColumnById(s.id);
+                if(c){
+                    c.hidden = s.hidden;
+                    c.width = s.width;
+                    oldIndex = cm.getIndexById(s.id);
+                    if(oldIndex != i){
+                        cm.moveColumn(oldIndex, i);
+                    }
+                }
+            }
+        }
+        if(store){
+            s = state.sort;
+            if(s){
+                store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
+            }
+            s = state.group;
+            if(store.groupBy){
+                if(s){
+                    store.groupBy(s);
+                }else{
+                    store.clearGrouping();
+                }
+            }
+
+        }
+        var o = Ext.apply({}, state);
+        delete o.columns;
+        delete o.sort;
+        Ext.grid.GridPanel.superclass.applyState.call(this, o);
+    },
+
+    getState : function(){
+        var o = {columns: []},
+            store = this.store,
+            ss,
+            gs;
+
+        for(var i = 0, c; (c = this.colModel.config[i]); i++){
+            o.columns[i] = {
+                id: c.id,
+                width: c.width
+            };
+            if(c.hidden){
+                o.columns[i].hidden = true;
+            }
+        }
+        if(store){
+            ss = store.getSortState();
+            if(ss){
+                o.sort = ss;
+            }
+            if(store.getGroupState){
+                gs = store.getGroupState();
+                if(gs){
+                    o.group = gs;
+                }
+            }
+        }
+        return o;
+    },
+
+    // private
+    afterRender : function(){
+        Ext.grid.GridPanel.superclass.afterRender.call(this);
+        var v = this.view;
+        this.on('bodyresize', v.layout, v);
+        v.layout();
+        if(this.deferRowRender){
+            if (!this.deferRowRenderTask){
+                this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
+            }
+            this.deferRowRenderTask.delay(10);
+        }else{
+            v.afterRender();
+        }
+        this.viewReady = true;
+    },
+
+    <div id="method-Ext.grid.GridPanel-reconfigure"></div>/**
+     * <p>Reconfigures the grid to use a different Store and Column Model
+     * and fires the 'reconfigure' event. The View will be bound to the new
+     * objects and refreshed.</p>
+     * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become
+     * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
+     * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
+     * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
+     * with the new data.</p>
+     * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
+     * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
+     */
+    reconfigure : function(store, colModel){
+        var rendered = this.rendered;
+        if(rendered){
+            if(this.loadMask){
+                this.loadMask.destroy();
+                this.loadMask = new Ext.LoadMask(this.bwrap,
+                        Ext.apply({}, {store:store}, this.initialConfig.loadMask));
+            }
+        }
+        if(this.view){
+            this.view.initData(store, colModel);
+        }
+        this.store = store;
+        this.colModel = colModel;
+        if(rendered){
+            this.view.refresh(true);
+        }
+        this.fireEvent('reconfigure', this, store, colModel);
+    },
+
+    // private
+    onDestroy : function(){
+        if (this.deferRowRenderTask && this.deferRowRenderTask.cancel){
+            this.deferRowRenderTask.cancel();
+        }
+        if(this.rendered){
+            Ext.destroy(this.view, this.loadMask);
+        }else if(this.store && this.store.autoDestroy){
+            this.store.destroy();
+        }
+        Ext.destroy(this.colModel, this.selModel);
+        this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
+        Ext.grid.GridPanel.superclass.onDestroy.call(this);
+    },
+
+    // private
+    processEvent : function(name, e){
+        this.view.processEvent(name, e);
+    },
+
+    // private
+    onClick : function(e){
+        this.processEvent('click', e);
+    },
+
+    // private
+    onMouseDown : function(e){
+        this.processEvent('mousedown', e);
+    },
+
+    // private
+    onContextMenu : function(e, t){
+        this.processEvent('contextmenu', e);
+    },
+
+    // private
+    onDblClick : function(e){
+        this.processEvent('dblclick', e);
+    },
+
+    // private
+    walkCells : function(row, col, step, fn, scope){
+        var cm    = this.colModel,
+            clen  = cm.getColumnCount(),
+            ds    = this.store,
+            rlen  = ds.getCount(),
+            first = true;
+
+        if(step < 0){
+            if(col < 0){
+                row--;
+                first = false;
+            }
+            while(row >= 0){
+                if(!first){
+                    col = clen-1;
+                }
+                first = false;
+                while(col >= 0){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col--;
+                }
+                row--;
+            }
+        } else {
+            if(col >= clen){
+                row++;
+                first = false;
+            }
+            while(row < rlen){
+                if(!first){
+                    col = 0;
+                }
+                first = false;
+                while(col < clen){
+                    if(fn.call(scope || this, row, col, cm) === true){
+                        return [row, col];
+                    }
+                    col++;
+                }
+                row++;
+            }
+        }
+        return null;
+    },
+
+    <div id="method-Ext.grid.GridPanel-getGridEl"></div>/**
+     * Returns the grid's underlying element.
+     * @return {Element} The element
+     */
+    getGridEl : function(){
+        return this.body;
+    },
+
+    // private for compatibility, overridden by editor grid
+    stopEditing : Ext.emptyFn,
+
+    <div id="method-Ext.grid.GridPanel-getSelectionModel"></div>/**
+     * Returns the grid's selection model configured by the <code>{@link #selModel}</code>
+     * configuration option. If no selection model was configured, this will create
+     * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
+     * @return {SelectionModel}
+     */
+    getSelectionModel : function(){
+        if(!this.selModel){
+            this.selModel = new Ext.grid.RowSelectionModel(
+                    this.disableSelection ? {selectRow: Ext.emptyFn} : null);
+        }
+        return this.selModel;
+    },
+
+    <div id="method-Ext.grid.GridPanel-getStore"></div>/**
+     * Returns the grid's data store.
+     * @return {Ext.data.Store} The store
+     */
+    getStore : function(){
+        return this.store;
+    },
+
+    <div id="method-Ext.grid.GridPanel-getColumnModel"></div>/**
+     * Returns the grid's ColumnModel.
+     * @return {Ext.grid.ColumnModel} The column model
+     */
+    getColumnModel : function(){
+        return this.colModel;
+    },
+
+    <div id="method-Ext.grid.GridPanel-getView"></div>/**
+     * Returns the grid's GridView object.
+     * @return {Ext.grid.GridView} The grid view
+     */
+    getView : function(){
+        if(!this.view){
+            this.view = new Ext.grid.GridView(this.viewConfig);
+        }
+        return this.view;
+    },
+    <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**
+     * Called to get grid's drag proxy text, by default returns this.ddText.
+     * @return {String} The text
+     */
+    getDragDropText : function(){
+        var count = this.selModel.getCount();
+        return String.format(this.ddText, count, count == 1 ? '' : 's');
+    }
+
+    <div id="cfg-Ext.grid.GridPanel-activeItem"></div>/**
+     * @cfg {String/Number} activeItem
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-autoDestroy"></div>/**
+     * @cfg {Boolean} autoDestroy
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-autoLoad"></div>/**
+     * @cfg {Object/String/Function} autoLoad
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-autoWidth"></div>/**
+     * @cfg {Boolean} autoWidth
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-bufferResize"></div>/**
+     * @cfg {Boolean/Number} bufferResize
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-defaultType"></div>/**
+     * @cfg {String} defaultType
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-defaults"></div>/**
+     * @cfg {Object} defaults
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-hideBorders"></div>/**
+     * @cfg {Boolean} hideBorders
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-items"></div>/**
+     * @cfg {Mixed} items
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-layout"></div>/**
+     * @cfg {String} layout
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-layoutConfig"></div>/**
+     * @cfg {Object} layoutConfig
+     * @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-monitorResize"></div>/**
+     * @cfg {Boolean} monitorResize
+     * @hide
+     */
+    <div id="prop-Ext.grid.GridPanel-items"></div>/**
+     * @property items
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-add"></div>/**
+     * @method add
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-cascade"></div>/**
+     * @method cascade
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-doLayout"></div>/**
+     * @method doLayout
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-find"></div>/**
+     * @method find
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-findBy"></div>/**
+     * @method findBy
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-findById"></div>/**
+     * @method findById
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-findByType"></div>/**
+     * @method findByType
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-getComponent"></div>/**
+     * @method getComponent
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-getLayout"></div>/**
+     * @method getLayout
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-getUpdater"></div>/**
+     * @method getUpdater
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-insert"></div>/**
+     * @method insert
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-load"></div>/**
+     * @method load
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-remove"></div>/**
+     * @method remove
+     * @hide
+     */
+    <div id="event-Ext.grid.GridPanel-add"></div>/**
+     * @event add
+     * @hide
+     */
+    <div id="event-Ext.grid.GridPanel-afterlayout"></div>/**
+     * @event afterlayout
+     * @hide
+     */
+    <div id="event-Ext.grid.GridPanel-beforeadd"></div>/**
+     * @event beforeadd
+     * @hide
+     */
+    <div id="event-Ext.grid.GridPanel-beforeremove"></div>/**
+     * @event beforeremove
+     * @hide
+     */
+    <div id="event-Ext.grid.GridPanel-remove"></div>/**
+     * @event remove
+     * @hide
+     */
+
+
+
+    <div id="cfg-Ext.grid.GridPanel-allowDomMove"></div>/**
+     * @cfg {String} allowDomMove  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-autoEl"></div>/**
+     * @cfg {String} autoEl @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-applyTo"></div>/**
+     * @cfg {String} applyTo  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-autoScroll"></div>/**
+     * @cfg {String} autoScroll  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-bodyBorder"></div>/**
+     * @cfg {String} bodyBorder  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-bodyStyle"></div>/**
+     * @cfg {String} bodyStyle  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-contentEl"></div>/**
+     * @cfg {String} contentEl  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-disabledClass"></div>/**
+     * @cfg {String} disabledClass  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-elements"></div>/**
+     * @cfg {String} elements  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-html"></div>/**
+     * @cfg {String} html  @hide
+     */
+    <div id="cfg-Ext.grid.GridPanel-preventBodyReset"></div>/**
+     * @cfg {Boolean} preventBodyReset
+     * @hide
+     */
+    <div id="prop-Ext.grid.GridPanel-disabled"></div>/**
+     * @property disabled
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-applyToMarkup"></div>/**
+     * @method applyToMarkup
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-enable"></div>/**
+     * @method enable
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-disable"></div>/**
+     * @method disable
+     * @hide
+     */
+    <div id="method-Ext.grid.GridPanel-setDisabled"></div>/**
+     * @method setDisabled
+     * @hide
+     */
+});
+Ext.reg('grid', Ext.grid.GridPanel);</pre>    
 </body>
 </html>
\ No newline at end of file