The source code

    /**
     * @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, {
        /**
         * @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,

        /**
         * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
         * can have (if enabled). Defaults to <tt>1000</tt>.
         */
        autoExpandMax : 1000,

        /**
         * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
         * can have (if enabled). Defaults to <tt>50</tt>.
         */
        autoExpandMin : 50,

        /**
         * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
         * Default is <tt>false</tt>.
         */
        columnLines : false,

        /**
         * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
         */
        /**
         * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
         */
        /**
         * @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.
         */
        /**
         * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
         */
        /**
         * @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}',

        /**
         * @cfg {Boolean} dragCell Defaults to <code>false</code>. If using {@link #enableDragDrop} with a CellSelectionModel,
         * set this to true to have the {@link #getView view}'s {@link Ext.grid.GridView#dragZone dragZone}'s <code>getDragData</code>
         * method reference the selected <b>cell</b> using <code>[rowIndex, cellIndex]</code>
         */

        /**
         * @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,

        /**
         * @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>
         */
        /**
         * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
         */
        /**
         * @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,

        /**
         * @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,

        /**
         * @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,

        /**
         * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
         */
        enableHdMenu : true,

        /**
         * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
         */
        /**
         * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
         * loading. Defaults to <code>false</code>.
         */
        loadMask : false,

        /**
         * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
         */
        /**
         * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
         */
        minColumnWidth : 25,

        /**
         * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
         */
        /**
         * @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).
         */
        /**
         * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
         */
        /**
         * @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,

        /**
         * @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,

        /**
         * @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'],

        /**
         * @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,

        /**
         * @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: [],

        /**
         * @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
                /**
                 * @event click
                 * The raw click event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'click',
                /**
                 * @event dblclick
                 * The raw dblclick event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'dblclick',
                /**
                 * @event contextmenu
                 * The raw contextmenu event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'contextmenu',
                /**
                 * @event mousedown
                 * The raw mousedown event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'mousedown',
                /**
                 * @event mouseup
                 * The raw mouseup event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'mouseup',
                /**
                 * @event mouseover
                 * The raw mouseover event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'mouseover',
                /**
                 * @event mouseout
                 * The raw mouseout event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'mouseout',
                /**
                 * @event keypress
                 * The raw keypress event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'keypress',
                /**
                 * @event keydown
                 * The raw keydown event for the entire grid.
                 * @param {Ext.EventObject} e
                 */
                'keydown',

                // custom events
                /**
                 * @event cellmousedown
                 * Fires before a cell is clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Number} columnIndex
                 * @param {Ext.EventObject} e
                 */
                'cellmousedown',
                /**
                 * @event rowmousedown
                 * Fires before a row is clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Ext.EventObject} e
                 */
                'rowmousedown',
                /**
                 * @event headermousedown
                 * Fires before a header is clicked
                 * @param {Grid} this
                 * @param {Number} columnIndex
                 * @param {Ext.EventObject} e
                 */
                'headermousedown',

                /**
                 * @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',

                /**
                 * @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',

                /**
                 * @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',

                /**
                 * @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',
                /**
                 * @event celldblclick
                 * Fires when a cell is double clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Number} columnIndex
                 * @param {Ext.EventObject} e
                 */
                'celldblclick',
                /**
                 * @event rowclick
                 * Fires when a row is clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Ext.EventObject} e
                 */
                'rowclick',
                /**
                 * @event rowdblclick
                 * Fires when a row is double clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Ext.EventObject} e
                 */
                'rowdblclick',
                /**
                 * @event headerclick
                 * Fires when a header is clicked
                 * @param {Grid} this
                 * @param {Number} columnIndex
                 * @param {Ext.EventObject} e
                 */
                'headerclick',
                /**
                 * @event headerdblclick
                 * Fires when a header cell is double clicked
                 * @param {Grid} this
                 * @param {Number} columnIndex
                 * @param {Ext.EventObject} e
                 */
                'headerdblclick',
                /**
                 * @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',
                /**
                 * @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',
                /**
                 * @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',
                /**
                 * @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',

                /**
                 * @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',
                /**
                 * @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',

                /**
                 * @event rowcontextmenu
                 * Fires when a row is right clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Ext.EventObject} e
                 */
                'rowcontextmenu',
                /**
                 * @event cellcontextmenu
                 * Fires when a cell is right clicked
                 * @param {Grid} this
                 * @param {Number} rowIndex
                 * @param {Number} cellIndex
                 * @param {Ext.EventObject} e
                 */
                'cellcontextmenu',
                /**
                 * @event headercontextmenu
                 * Fires when a header is right clicked
                 * @param {Grid} this
                 * @param {Number} columnIndex
                 * @param {Ext.EventObject} e
                 */
                'headercontextmenu',
                /**
                 * @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',
                /**
                 * @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',
                /**
                 * @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',
                /**
                 * @event bodyscroll
                 * Fires when the body element is scrolled
                 * @param {Number} scrollLeft
                 * @param {Number} scrollTop
                 */
                'bodyscroll',
                /**
                 * @event columnresize
                 * Fires when the user resizes a column
                 * @param {Number} columnIndex
                 * @param {Number} newSize
                 */
                'columnresize',
                /**
                 * @event columnmove
                 * Fires when the user moves a column
                 * @param {Number} oldIndex
                 * @param {Number} newIndex
                 */
                'columnmove',
                /**
                 * @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',
                /**
                 * @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',
                /**
                 * @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',
                /**
                 * @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,
                colIndex;

            if(cs){
                for(var i = 0, len = cs.length; i < len; i++){
                    s = cs[i];
                    c = cm.getColumnById(s.id);
                    if(c){
                        colIndex = cm.getIndexById(s.id);
                        cm.setState(colIndex, {
                            hidden: s.hidden,
                            width: s.width,
                            sortable: c.sortable,
                            editable: c.editable
                        });
                        if(colIndex != i){
                            cm.moveColumn(colIndex, 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(true);
            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;
        },

        /**
         * <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;
        },

        /**
         * 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,

        /**
         * 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;
        },

        /**
         * Returns the grid's data store.
         * @return {Ext.data.Store} The store
         */
        getStore : function(){
            return this.store;
        },

        /**
         * Returns the grid's ColumnModel.
         * @return {Ext.grid.ColumnModel} The column model
         */
        getColumnModel : function(){
            return this.colModel;
        },

        /**
         * 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;
        },
        /**
         * Called to get grid's drag proxy text, by default returns this.ddText.
         * @return {String} The text
         */
        getDragDropText : function(){
            var count = this.selModel.getCount ? this.selModel.getCount() : 1;
            return String.format(this.ddText, count, count == 1 ? '' : 's');
        }

        /**
         * @cfg {String/Number} activeItem
         * @hide
         */
        /**
         * @cfg {Boolean} autoDestroy
         * @hide
         */
        /**
         * @cfg {Object/String/Function} autoLoad
         * @hide
         */
        /**
         * @cfg {Boolean} autoWidth
         * @hide
         */
        /**
         * @cfg {Boolean/Number} bufferResize
         * @hide
         */
        /**
         * @cfg {String} defaultType
         * @hide
         */
        /**
         * @cfg {Object} defaults
         * @hide
         */
        /**
         * @cfg {Boolean} hideBorders
         * @hide
         */
        /**
         * @cfg {Mixed} items
         * @hide
         */
        /**
         * @cfg {String} layout
         * @hide
         */
        /**
         * @cfg {Object} layoutConfig
         * @hide
         */
        /**
         * @cfg {Boolean} monitorResize
         * @hide
         */
        /**
         * @property items
         * @hide
         */
        /**
         * @method add
         * @hide
         */
        /**
         * @method cascade
         * @hide
         */
        /**
         * @method doLayout
         * @hide
         */
        /**
         * @method find
         * @hide
         */
        /**
         * @method findBy
         * @hide
         */
        /**
         * @method findById
         * @hide
         */
        /**
         * @method findByType
         * @hide
         */
        /**
         * @method getComponent
         * @hide
         */
        /**
         * @method getLayout
         * @hide
         */
        /**
         * @method getUpdater
         * @hide
         */
        /**
         * @method insert
         * @hide
         */
        /**
         * @method load
         * @hide
         */
        /**
         * @method remove
         * @hide
         */
        /**
         * @event add
         * @hide
         */
        /**
         * @event afterlayout
         * @hide
         */
        /**
         * @event beforeadd
         * @hide
         */
        /**
         * @event beforeremove
         * @hide
         */
        /**
         * @event remove
         * @hide
         */

        /**
         * @cfg {String} allowDomMove  @hide
         */
        /**
         * @cfg {String} autoEl @hide
         */
        /**
         * @cfg {String} applyTo  @hide
         */
        /**
         * @cfg {String} autoScroll  @hide
         */
        /**
         * @cfg {String} bodyBorder  @hide
         */
        /**
         * @cfg {String} bodyStyle  @hide
         */
        /**
         * @cfg {String} contentEl  @hide
         */
        /**
         * @cfg {String} disabledClass  @hide
         */
        /**
         * @cfg {String} elements  @hide
         */
        /**
         * @cfg {String} html  @hide
         */
        /**
         * @cfg {Boolean} preventBodyReset
         * @hide
         */
        /**
         * @property disabled
         * @hide
         */
        /**
         * @method applyToMarkup
         * @hide
         */
        /**
         * @method enable
         * @hide
         */
        /**
         * @method disable
         * @hide
         */
        /**
         * @method setDisabled
         * @hide
         */
    });
    Ext.reg('grid', Ext.grid.GridPanel);