[extjs.git] / extjs / classic / classic / src / panel / Table.js

/**\r
 * This class is the base class for both {@link Ext.tree.Panel TreePanel} and\r
 * {@link Ext.grid.Panel GridPanel}.\r
 *\r
 * TablePanel aggregates:\r
 *\r
 *  - a Selection Model\r
 *  - a View\r
 *  - a Store\r
 *  - Ext.grid.header.Container\r
 * \r
 * @mixins Ext.grid.locking.Lockable\r
 */\r
Ext.define('Ext.panel.Table', {\r
    extend: 'Ext.panel.Panel',\r
\r
    alias: 'widget.tablepanel',\r
    \r
    requires: [\r
        'Ext.layout.container.Fit'\r
    ],\r
\r
    uses: [\r
        'Ext.selection.RowModel',\r
        'Ext.selection.CellModel',\r
        'Ext.selection.CheckboxModel',\r
        'Ext.grid.plugin.BufferedRenderer',\r
        'Ext.grid.header.Container',\r
        'Ext.grid.locking.Lockable',\r
        'Ext.grid.NavigationModel'\r
    ],\r
\r
    extraBaseCls: Ext.baseCSSPrefix + 'grid',\r
    extraBodyCls: Ext.baseCSSPrefix + 'grid-body',\r
    actionableModeCls: Ext.baseCSSPrefix + 'grid-actionable',\r
    noHeaderBordersCls: Ext.baseCSSPrefix + 'no-header-borders',\r
\r
    defaultBindProperty: 'store',\r
\r
    layout: 'fit',\r
    \r
    ariaRole: 'grid',\r
\r
    config: {\r
        /**\r
         * @cfg {Ext.data.Model} selection\r
         * The selected model. Typically used with {@link #bind binding}.\r
         */\r
        selection: null,\r
\r
        /**\r
         * @cfg {Boolean} [headerBorders=`true`]\r
         * To show no borders around grid headers, configure this as `false`.\r
         */\r
        headerBorders: true\r
    },\r
\r
    publishes: ['selection'],\r
    twoWayBindable: ['selection'],\r
\r
    /**\r
     * @cfg {Boolean} [autoLoad=false]\r
     * Use `true` to load the store as soon as this component is fully constructed. It is\r
     * best to initiate the store load this way to allow this component and potentially\r
     * its plugins (such as `{@link Ext.grid.filters.Filters}`) to be ready to load.\r
     */\r
    autoLoad: false,\r
\r
    /**\r
     * @cfg {Boolean} [variableRowHeight=false]\r
     * @deprecated 5.0.0 Use {@link Ext.grid.column.Column#variableRowHeight} instead.\r
     * Configure as `true` if the row heights are not all the same height as the first row.\r
     */\r
    variableRowHeight: false,\r
\r
    /**\r
     * @cfg {Number} [numFromEdge]\r
     * This configures the zone which causes new rows to be appended to the view. As soon as the edge\r
     * of the rendered grid is this number of rows from the edge of the viewport, the view is moved.\r
     */\r
    numFromEdge: 2,\r
\r
    /**\r
     * @cfg {Number} [trailingBufferZone]\r
     * TableViews are buffer rendered in 5.x and above which means that only the visible subset of data rows\r
     * are rendered into the DOM. These are removed and added as scrolling demands.\r
     *\r
     * This configures the number of extra rows to render on the trailing side of scrolling\r
     * **outside the {@link #numFromEdge}** buffer as scrolling proceeds.\r
     */\r
    trailingBufferZone: 10,\r
\r
    /**\r
     * @cfg {Number} [leadingBufferZone]\r
     * TableViews are buffer rendered in 5.x and above which means that only the visible subset of data rows\r
     * are rendered into the DOM. These are removed and added as scrolling demands.\r
     *\r
     * This configures the number of extra rows to render on the leading side of scrolling\r
     * **outside the {@link #numFromEdge}** buffer as scrolling proceeds.\r
     */\r
    leadingBufferZone: 20,\r
\r
    /**\r
     * @property {Boolean} hasView\r
     * True to indicate that a view has been injected into the panel.\r
     */\r
    hasView: false,\r
\r
    /**\r
     * @property items\r
     * @hide\r
     */\r
\r
    /**\r
     * @cfg {String} viewType\r
     * An xtype of view to use. This is automatically set to 'tableview' by {@link Ext.grid.Panel Grid}\r
     * and to 'treeview' by {@link Ext.tree.Panel Tree}.\r
     * @protected\r
     */\r
    viewType: null,\r
\r
    /**\r
     * @cfg {Object} viewConfig\r
     * A config object that will be applied to the grid's UI view. Any of the config options available for\r
     * {@link Ext.view.Table} can be specified here. This option is ignored if {@link #view} is specified.\r
     */\r
\r
    /**\r
     * @cfg {Ext.view.Table} view\r
     * The {@link Ext.view.Table} used by the grid. Use {@link #viewConfig} to just supply some config options to\r
     * view (instead of creating an entire View instance).\r
     */\r
\r
    /**\r
     * @cfg {String} [selType]\r
     * An xtype of selection model to use. This is used to create selection model if just\r
     * a config object or nothing at all given in {@link #selModel} config.\r
     *\r
     * @deprecated 5.1.0 Use the {@link #selModel}'s `type` property. Or, if no other\r
     * configs are required, use the string form of selModel.\r
     */\r
\r
    /**\r
     * @cfg {Ext.selection.Model/Object/String} [selModel=rowmodel]\r
     * A {@link Ext.selection.Model selection model} instance or config object, or the selection model class's alias string.\r
     *\r
     * In latter case its `type` property determines to which type of selection model this config is applied.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [multiSelect=false]\r
     * True to enable 'MULTI' selection mode on selection model.\r
     * @deprecated 4.1.1 Use {@link Ext.selection.Model#mode} 'MULTI' instead.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [simpleSelect=false]\r
     * True to enable 'SIMPLE' selection mode on selection model.\r
     * @deprecated 4.1.1 Use {@link Ext.selection.Model#mode} 'SIMPLE' instead.\r
     */\r
\r
    /**\r
     * @cfg {Ext.data.Store/String/Object} store (required)\r
     * The data source to which the grid / tree is bound. Acceptable values for this \r
     * property are:\r
     *\r
     *   - **any {@link Ext.data.Store Store} class / subclass**\r
     *   - **an {@link Ext.data.Store#storeId ID of a store}**\r
     *   - **a {@link Ext.data.Store Store} config object**.  When passing a config you can \r
     *   specify the store type by alias.  Passing a config object with a store type will \r
     *   dynamically create a new store of that type when the grid / tree is instantiated.\r
     *\r
     * For example:\r
     * \r
     *     Ext.define('MyApp.store.Customers', {\r
     *         extend: 'Ext.data.Store',\r
     *         alias: 'store.customerstore',\r
     *         fields: ['name']\r
     *     });\r
     *     \r
     *     Ext.create({\r
     *         xtype: 'gridpanel',\r
     *         renderTo: document.body,\r
     *         store: {\r
     *             type: 'customerstore',\r
     *             data: [{\r
     *                 name: 'Foo'\r
     *             }]\r
     *         },\r
     *         columns: [{\r
     *             text: 'Name',\r
     *             dataIndex: 'name'\r
     *         }]\r
     *     });\r
     */\r
\r
    /**\r
     * @cfg {String/Boolean} scroll\r
     * Scrollers configuration. Valid values are 'both', 'horizontal' or 'vertical'.\r
     * True implies 'both'. False implies 'none'.\r
     * @deprecated 5.1.0 Use {@link #scrollable} instead\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [reserveScrollbar=false]\r
     * Set this to true to **always** leave a scrollbar sized space at the end of the grid content when\r
     * fitting content into the width of the grid.\r
     *\r
     * If the grid's record count fluctuates enough to hide and show the scrollbar regularly, this setting\r
     * avoids the multiple layouts associated with switching from scrollbar present to scrollbar not present.\r
     */\r
\r
    /**\r
     * @cfg {Ext.grid.column.Column[]/Object} columns\r
     * An array of {@link Ext.grid.column.Column column} definition objects which define all columns that appear in this\r
     * grid. Each column definition provides the header text for the column, and a definition of where the data for that\r
     * column comes from.\r
     *\r
     * This can also be a configuration object for a {@link Ext.grid.header.Container HeaderContainer} which may override\r
     * certain default configurations if necessary. For example, the special layout may be overridden to use a simpler\r
     * layout, or one can set default values shared by all columns:\r
     * \r
     *     columns: {\r
     *         items: [\r
     *             {\r
     *                 text: "Column A",\r
     *                 dataIndex: "field_A"\r
     *             },{\r
     *                 text: "Column B",\r
     *                 dataIndex: "field_B"\r
     *             }, \r
     *             ...\r
     *         ],\r
     *         defaults: {\r
     *             flex: 1\r
     *         }\r
     *     }\r
     */\r
\r
    /**\r
     * @cfg {Boolean} forceFit\r
     * True to force the columns to fit into the available width. Headers are first sized according to configuration,\r
     * whether that be a specific width, or flex. Then they are all proportionally changed in width so that the entire\r
     * content width is used. For more accurate control, it is more optimal to specify a flex setting on the columns\r
     * that are to be stretched & explicit widths on columns that are not.\r
     */\r
\r
    /**\r
     * @cfg {Ext.grid.feature.Feature[]/Object[]/Ext.enums.Feature[]} features\r
     * An array of grid Features to be added to this grid. Can also be just a single feature instead of array.\r
     *\r
     * Features config behaves much like {@link #plugins}.\r
     * A feature can be added by either directly referencing the instance:\r
     *\r
     *     features: [Ext.create('Ext.grid.feature.GroupingSummary', {groupHeaderTpl: 'Subject: {name}'})],\r
     *\r
     * By using config object with ftype:\r
     *\r
     *     features: [{ftype: 'groupingsummary', groupHeaderTpl: 'Subject: {name}'}],\r
     *\r
     * Or with just a ftype:\r
     *\r
     *     features: ['grouping', 'groupingsummary'],\r
     *\r
     * See {@link Ext.enums.Feature} for list of all ftypes.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [hideHeaders=false]\r
     * True to hide column headers.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [deferRowRender=false]\r
     * Configure as `true` to enable deferred row rendering.\r
     *\r
     * This allows the View to execute a refresh quickly, with the update of the row structure deferred so\r
     * that layouts with GridPanels appear, and lay out more quickly.\r
     */\r
    deferRowRender: false,\r
     \r
    /**\r
     * @cfg {Boolean} [sortableColumns=true]\r
     * False to disable column sorting via clicking the header and via the Sorting menu items.\r
     */\r
    sortableColumns: true,\r
\r
    /**\r
     * @cfg {Boolean} [multiColumnSort=false]\r
     * Configure as `true` to have columns remember their sorted state after other columns have been clicked upon to sort.\r
     *\r
     * As subsequent columns are clicked upon, they become the new primary sort key.\r
     *\r
     * The maximum number of sorters allowed in a Store is configurable via its underlying data collection. See {@link Ext.util.Collection#multiSortLimit}\r
     */\r
    multiColumnSort: false,\r
\r
    /**\r
     * @cfg {Boolean} [enableLocking=false]\r
     * Configure as `true` to enable locking support for this grid. Alternatively, locking will also be automatically\r
     * enabled if any of the columns in the {@link #columns columns} configuration contain a {@link Ext.grid.column.Column#locked locked} config option.\r
     * \r
     * A locking grid is processed in a special way. The configuration options are cloned and *two* grids are created to be the locked (left) side\r
     * and the normal (right) side. This Panel becomes merely a {@link Ext.container.Container container} which arranges both in an {@link Ext.layout.container.HBox HBox} layout.\r
     * \r
     * {@link #plugins Plugins} may be targeted at either locked, or unlocked grid, or, both, in which case the plugin is cloned and used on both sides.\r
     * \r
     * Plugins may also be targeted at the containing locking Panel.\r
     * \r
     * This is configured by specifying a `lockableScope` property in your plugin which may have the following values:\r
     * \r
     *  * `"both"` (the default) - The plugin is added to both grids\r
     *  * `"top"` - The plugin is added to the containing Panel\r
     *  * `"locked"` - The plugin is added to the locked (left) grid\r
     *  * `"normal"` - The plugin is added to the normal (right) grid\r
     *\r
     * If `both` is specified, then each copy of the plugin gains a property `lockingPartner` which references its sibling on the other side so that they\r
     * can synchronize operations is necessary.\r
     * \r
     * {@link #features Features} may also be configured with `lockableScope` and may target the locked grid, the normal grid or both grids. Features\r
     * also get a `lockingPartner` reference injected.\r
     */\r
    enableLocking: false,\r
\r
    /**\r
     * @private\r
     * Used to determine where to go down to find views\r
     * this is here to support locking.\r
     */\r
    scrollerOwner: true,\r
\r
    /**\r
     * @cfg {Boolean} [enableColumnMove=true]\r
     * False to disable column dragging within this grid.\r
     */\r
    enableColumnMove: true,\r
    \r
    /**\r
     * @cfg {Boolean} [sealedColumns=false]\r
     * True to constrain column dragging so that a column cannot be dragged in or out of it's\r
     * current group. Only relevant while {@link #enableColumnMove} is enabled.\r
     */\r
    sealedColumns: false,\r
\r
    /**\r
     * @cfg {Boolean} [enableColumnResize=true]\r
     * False to disable column resizing within this grid.\r
     */\r
    enableColumnResize: true,\r
\r
    /**\r
     * @cfg {Boolean} [enableColumnHide=true]\r
     * False to disable column hiding within this grid.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} columnLines Adds column line styling\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [rowLines=true] Adds row line styling\r
     */\r
    rowLines: true,\r
\r
    /**\r
     * @cfg {Boolean} [disableSelection=false]\r
     * True to disable selection model.\r
     */\r
\r
    /**\r
     * @cfg {String} emptyText Default text (HTML tags are accepted) to display in the \r
     * Panel body when the Store is empty. When specified, and the Store is empty, the \r
     * text will be rendered inside a DIV with the CSS class "x-grid-empty". The emptyText \r
     * will not display until the first load of the associated store by default. If you \r
     * want the text to be displayed prior to the first store load use the \r
     * {@link Ext.view.Table#deferEmptyText deferEmptyText} config in the {@link #viewConfig} config.\r
     */\r
    \r
    /**\r
     * @cfg {Boolean} [allowDeselect=false]\r
     * True to allow deselecting a record. This config is forwarded to {@link Ext.selection.Model#allowDeselect}.\r
     */\r
    \r
    /**\r
     * @cfg {Boolean} [bufferedRenderer=true]\r
     * Buffered rendering is enabled by default.\r
     * \r
     * Configure as `false` to disable buffered rendering. See {@link Ext.grid.plugin.BufferedRenderer}.\r
     *\r
     * @since 5.0.0\r
     */\r
    bufferedRenderer: true,\r
\r
    /**\r
     * @cfg stateEvents\r
     * @inheritdoc Ext.state.Stateful#cfg-stateEvents\r
     * @localdoc By default the following stateEvents are added:\r
     * \r
     *  - {@link #event-resize} - _(added by Ext.Component)_\r
     *  - {@link #event-collapse} - _(added by Ext.panel.Panel)_\r
     *  - {@link #event-expand} - _(added by Ext.panel.Panel)_\r
     *  - {@link #event-columnresize}\r
     *  - {@link #event-columnmove}\r
     *  - {@link #event-columnhide}\r
     *  - {@link #event-columnshow}\r
     *  - {@link #event-sortchange}\r
     *  - {@link #event-filterchange}\r
     *  - {@link #event-groupchange}\r
     */\r
\r
    /**\r
     * @property {Boolean} optimizedColumnMove\r
     * If you are writing a grid plugin or a {Ext.grid.feature.Feature Feature} which creates a column-based structure which\r
     * needs a view refresh when columns are moved, then set this property in the grid.\r
     *\r
     * An example is the built in {@link Ext.grid.feature.AbstractSummary Summary} Feature. This creates summary rows, and the\r
     * summary columns must be in the same order as the data columns. This plugin sets the `optimizedColumnMove` to `false.\r
     */\r
\r
    /**\r
     * @property {Ext.panel.Table} ownerGrid\r
     * A reference to the top-level owning grid component.\r
     * \r
     * This is a reference to this GridPanel if this GridPanel is not part of a locked grid arrangement.\r
     * @readonly\r
     * @private\r
     * @since 5.0.0\r
     */\r
    ownerGrid: null,\r
\r
    colLinesCls: Ext.baseCSSPrefix + 'grid-with-col-lines',\r
    rowLinesCls: Ext.baseCSSPrefix + 'grid-with-row-lines',\r
    noRowLinesCls: Ext.baseCSSPrefix + 'grid-no-row-lines',\r
    hiddenHeaderCtCls: Ext.baseCSSPrefix + 'grid-header-ct-hidden',\r
    hiddenHeaderCls: Ext.baseCSSPrefix + 'grid-header-hidden',\r
    resizeMarkerCls: Ext.baseCSSPrefix + 'grid-resize-marker',\r
    emptyCls: Ext.baseCSSPrefix + 'grid-empty',\r
\r
    // The TablePanel claims to be focusable, but it does not place a tabIndex\r
    // on any of its elements.\r
    // Its focus implementation delegates to its view. TableViews are focusable.\r
    focusable: true,\r
\r
    /**\r
     * @event viewready\r
     * Fires when the grid view is available (use this for selecting a default row).\r
     * @param {Ext.panel.Table} this\r
     */\r
\r
    constructor: function (config) {\r
        var me = this,\r
            topGrid = config && config.ownerGrid,\r
            store;\r
\r
        me.ownerGrid = topGrid || me;\r
\r
        /**\r
         * @property {Array} actionables An array of objects which register themselves with a grid panel using\r
         * {@link #registerActionable} which are consulted upon entry into actionable mode.\r
         *\r
         * These must implement the following methods:\r
         *\r
         *    - activateCell Called when actionable mode is requested upon a cell. A {@link Ext.grid.CellContext CellContext}\r
         *    object is passed. If that cell is actionable by the terms of the callee, the callee should return `true` if it\r
         *    ascertains that the cell is actionable, and that it now contains focusable elements which may be tabbed to. \r
         *    - activateRow Called when the user enters actionable mode in a row. The row DOM is passed. Actionables\r
         *    should take any action they need to prime the row for cell activation which happens as users TAB from cell to cell.\r
         * @readonly\r
         */\r
        me.actionables = topGrid ? topGrid.actionables : []; // One shared array when there's a lockable at the top\r
\r
        me.callParent([config]);\r
\r
        store = me.store;\r
\r
        // Any further changes become stateful.\r
        store.trackStateChanges = true;\r
\r
        if (me.autoLoad) {\r
            // Note: if there is a store bound by a VM, we (might) do the load in #setStore.\r
            if (!store.isEmptyStore) {\r
                store.load();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * \r
     * @param {Object} actionable An object which has an interest in the implementation of actionable mode in\r
     * this grid.\r
     *\r
     * An actionable object may be a Plugin which upon activation injects tabbable elements or Components into\r
     * a grid row.\r
     */\r
    registerActionable: function(actionable) {\r
        // If a lockableScope: 'both' plugin/feature registers on each side, only include it in the actionables once.\r
        Ext.Array.include(this.actionables, actionable);\r
    },\r
\r
    initComponent: function() {\r
        //<debug>\r
        if (this.verticalScroller) {\r
            Ext.raise("The verticalScroller config is not supported.");\r
        }\r
        if (!this.viewType) {\r
            Ext.raise("You must specify a viewType config.");\r
        }\r
        if (this.headers) {\r
            Ext.raise("The headers config is not supported. Please specify columns instead.");\r
        }\r
        //</debug>\r
\r
        var me = this,\r
            headerCtCfg = me.columns || me.colModel || [],\r
            store, view, i, len, bufferedRenderer, columns, viewScroller, headerCt;\r
\r
        // Look up the configured Store. If none configured, use the fieldless, empty Store\r
        // defined in Ext.data.Store.\r
        store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');\r
        \r
        me.enableLocking = me.enableLocking || me.hasLockedColumns(headerCtCfg);\r
\r
        // Construct the plugins now rather than in the constructor of AbstractComponent because the component may have a subclass\r
        // that has overridden initComponent and defined plugins in it. For plugins like RowExpander that rely upon a grid feature,\r
        // this is a problem because the view needs to know about all its features before it's constructed. Constructing the plugins\r
        // now ensures that plugins defined in the instance config or in initComponent are all constructed before the view.\r
        // See EXTJSIV-11927.\r
        //\r
        // Note that any components that do not inherit from this class will still have their plugins constructed in\r
        // AbstractComponent:initComponent.\r
        if (me.plugins) {\r
            me.plugins = me.constructPlugins();\r
        }\r
\r
        // Add the row/column line classes to the body element so that the settings are not inherited by docked grids (https://sencha.jira.com/browse/EXTJSIV-9263).\r
        if (me.columnLines) {\r
            me.addBodyCls(me.colLinesCls);\r
        }\r
\r
        me.addBodyCls(me.rowLines ? me.rowLinesCls : me.noRowLinesCls);\r
        me.addBodyCls(me.extraBodyCls);\r
\r
\r
        // If any of the Column objects contain a locked property, and are not processed, this is a lockable TablePanel, a\r
        // special view will be injected by the Ext.grid.locking.Lockable mixin, so no processing of .\r
        if (me.enableLocking) {\r
            me.self.mixin('lockable', Ext.grid.locking.Lockable);\r
            me.injectLockable();\r
            headerCt = me.headerCt;\r
        }\r
        // Not lockable - create the HeaderContainer\r
        else {\r
            // It's a fully instantiated HeaderContainer\r
            if (headerCtCfg.isRootHeader) {\r
                if (me.hideHeaders) {\r
                    headerCtCfg.setHeight(0);\r
                    // don't set the hidden property, we still need these to layout\r
                    headerCtCfg.hiddenHeaders = true;\r
                } else {\r
                    // the header container is not user scrollable, but it has a scroller instance\r
                    // so that we can sync its scroll position with that of the grid view\r
                    headerCtCfg.setScrollable({\r
                        x: false,\r
                        y: false\r
                    });\r
                }\r
\r
                me.headerCt = headerCt = headerCtCfg;\r
\r
                headerCt.grid = me;\r
                headerCt.forceFit = !!me.forceFit;\r
                headerCt.$initParent = me;\r
\r
                // If it's an instance then the column managers were already created and bound to the headerCt.\r
                me.columnManager = headerCtCfg.columnManager;\r
                me.visibleColumnManager = headerCtCfg.visibleColumnManager;\r
            }\r
            // It's an array of Column definitions, or a config object of a HeaderContainer\r
            else {\r
                if (Ext.isArray(headerCtCfg)) {\r
                    headerCtCfg = {\r
                        items: headerCtCfg\r
                    };\r
                }\r
                Ext.apply(headerCtCfg, {\r
                    grid: me,\r
                    $initParent: me,\r
                    forceFit: me.forceFit,\r
                    sortable: me.sortableColumns,\r
                    enableColumnMove: me.enableColumnMove,\r
                    enableColumnResize: me.enableColumnResize,\r
                    columnLines: me.columnLines,\r
                    sealed: me.sealedColumns,\r
                    // the header container is not user scrollable, but if it is visible,\r
                    // it has a scroller instance so that we can sync its scroll position with that of the grid view\r
                    scrollable: me.hideHeaders ? undefined : {\r
                        x: false,\r
                        y: false\r
                    }\r
                });\r
                if (me.hideHeaders) {\r
                    headerCtCfg.height = 0;\r
                    // don't set the hidden property, we still need these to layout\r
                    headerCtCfg.hiddenHeaders = true;\r
                }\r
\r
                if (Ext.isDefined(me.enableColumnHide)) {\r
                    headerCtCfg.enableColumnHide = me.enableColumnHide;\r
                }\r
                me.headerCt = headerCt = new Ext.grid.header.Container(headerCtCfg);\r
            }\r
        }\r
\r
        // Maintain backward compatibiliy by providing the initial leaf column set as a property.\r
        me.columns = columns = headerCt.getGridColumns();\r
\r
        me.scrollTask = new Ext.util.DelayedTask(me.syncHorizontalScroll, me);\r
\r
        me.cls = (me.cls || '') + (' ' + me.extraBaseCls);\r
\r
        // autoScroll is not a valid configuration\r
        delete me.autoScroll;\r
\r
        bufferedRenderer = me.plugins && Ext.Array.findBy(me.plugins, function(p) {\r
            return p.isBufferedRenderer;\r
        });\r
\r
        // If we find one in the plugins, just use that.\r
        if (bufferedRenderer) {\r
            me.bufferedRenderer = bufferedRenderer;\r
        }\r
\r
        // If this TablePanel is lockable (Either configured lockable, or any of the defined columns has a 'locked' property)\r
        // then a special lockable view containing 2 side-by-side grids will have been injected so we do not need to set up any UI.\r
        if (!me.hasView) {\r
\r
            // If the Store is paging blocks of the dataset in, then it can only be sorted remotely.\r
            if (store.isBufferedStore && !store.getRemoteSort()) {\r
                for (i = 0, len = columns.length; i < len; i++) {\r
                    columns[i].sortable = false;\r
                }\r
            }\r
\r
            if (me.hideHeaders) {\r
                me.headerCt.addCls(me.hiddenHeaderCtCls);\r
                me.addCls(me.hiddenHeaderCls);\r
            }\r
\r
            me.relayHeaderCtEvents(headerCt);\r
            me.features = me.features || [];\r
            if (!Ext.isArray(me.features)) {\r
                me.features = [me.features];\r
            }\r
            me.dockedItems = [].concat(me.dockedItems || []);\r
            me.dockedItems.unshift(headerCt);\r
            me.viewConfig = me.viewConfig || {};\r
\r
            // AbstractDataView will look up a Store configured as an object\r
            // getView converts viewConfig into a View instance\r
            view = me.getView();\r
\r
            me.items = [view];\r
            me.hasView = true;\r
\r
            // Add a listener to synchronize the horizontal scroll position of the headers\r
            // with the table view's element... Unless we are not showing headers!\r
            if (!me.hideHeaders) {\r
                // sync the horizontal scroll position of the headerCt as the view is scrolled.\r
                viewScroller = view.getScrollable();\r
                if (viewScroller) {\r
                    headerCt.getScrollable().addPartner(viewScroller, 'x');\r
                }\r
            }\r
\r
            // Attach this Panel to the Store\r
            me.bindStore(store, true);\r
\r
            me.mon(view, {\r
                viewready: me.onViewReady,\r
                refresh: me.onRestoreHorzScroll,\r
                scope: me\r
            });\r
        }\r
\r
        // Whatever kind of View we have, be it a TableView, or a LockingView, we are interested in the selection model\r
        me.selModel = me.view.getSelectionModel();\r
        if (me.selModel.isRowModel) {\r
            me.selModel.on({\r
                scope: me,\r
                lastselectedchanged: me.updateBindSelection,\r
                selectionchange: me.updateBindSelection\r
            });\r
        }\r
\r
        // Relay events from the View whether it be a LockingView, or a regular GridView\r
        me.relayEvents(me.view, [\r
            /**\r
             * @event beforeitemmousedown\r
             * @inheritdoc Ext.view.View#beforeitemmousedown\r
             */\r
            'beforeitemmousedown',\r
            /**\r
             * @event beforeitemmouseup\r
             * @inheritdoc Ext.view.View#beforeitemmouseup\r
             */\r
            'beforeitemmouseup',\r
            /**\r
             * @event beforeitemmouseenter\r
             * @inheritdoc Ext.view.View#beforeitemmouseenter\r
             */\r
            'beforeitemmouseenter',\r
            /**\r
             * @event beforeitemmouseleave\r
             * @inheritdoc Ext.view.View#beforeitemmouseleave\r
             */\r
            'beforeitemmouseleave',\r
            /**\r
             * @event beforeitemclick\r
             * @inheritdoc Ext.view.View#beforeitemclick\r
             */\r
            'beforeitemclick',\r
            /**\r
             * @event beforeitemdblclick\r
             * @inheritdoc Ext.view.View#beforeitemdblclick\r
             */\r
            'beforeitemdblclick',\r
            /**\r
             * @event beforeitemcontextmenu\r
             * @inheritdoc Ext.view.View#beforeitemcontextmenu\r
             */\r
            'beforeitemcontextmenu',\r
            /**\r
             * @event itemmousedown\r
             * @inheritdoc Ext.view.View#itemmousedown\r
             */\r
            'itemmousedown',\r
            /**\r
             * @event itemmouseup\r
             * @inheritdoc Ext.view.View#itemmouseup\r
             */\r
            'itemmouseup',\r
            /**\r
             * @event itemmouseenter\r
             * @inheritdoc Ext.view.View#itemmouseenter\r
             */\r
            'itemmouseenter',\r
            /**\r
             * @event itemmouseleave\r
             * @inheritdoc Ext.view.View#itemmouseleave\r
             */\r
            'itemmouseleave',\r
            /**\r
             * @event itemclick\r
             * @inheritdoc Ext.view.View#itemclick\r
             */\r
            'itemclick',\r
            /**\r
             * @event itemdblclick\r
             * @inheritdoc Ext.view.View#itemdblclick\r
             */\r
            'itemdblclick',\r
            /**\r
             * @event itemcontextmenu\r
             * @inheritdoc Ext.view.View#itemcontextmenu\r
             */\r
            'itemcontextmenu',\r
            /**\r
             * @event beforecellclick\r
             * @inheritdoc Ext.view.Table#beforecellclick\r
             */\r
            'beforecellclick',\r
            /**\r
             * @event cellclick\r
             * @inheritdoc Ext.view.Table#cellclick\r
             */\r
            'cellclick',\r
            /**\r
             * @event beforecelldblclick\r
             * @inheritdoc Ext.view.Table#beforecelldblclick\r
             */\r
            'beforecelldblclick',\r
            /**\r
             * @event celldblclick\r
             * @inheritdoc Ext.view.Table#celldblclick\r
             */\r
            'celldblclick',\r
            /**\r
             * @event beforecellcontextmenu\r
             * @inheritdoc Ext.view.Table#beforecellcontextmenu\r
             */\r
            'beforecellcontextmenu',\r
            /**\r
             * @event cellcontextmenu\r
             * @inheritdoc Ext.view.Table#cellcontextmenu\r
             */\r
            'cellcontextmenu',\r
            /**\r
             * @event beforecellmousedown\r
             * @inheritdoc Ext.view.Table#beforecellmousedown\r
             */\r
            'beforecellmousedown',\r
            /**\r
             * @event cellmousedown\r
             * @inheritdoc Ext.view.Table#cellmousedown\r
             */\r
            'cellmousedown',\r
            /**\r
             * @event beforecellmouseup\r
             * @inheritdoc Ext.view.Table#beforecellmouseup\r
             */\r
            'beforecellmouseup',\r
            /**\r
             * @event cellmouseup\r
             * @inheritdoc Ext.view.Table#cellmouseup\r
             */\r
            'cellmouseup',\r
            /**\r
             * @event beforecellkeydown\r
             * @inheritdoc Ext.view.Table#beforecellkeydown\r
             */\r
            'beforecellkeydown',\r
            /**\r
             * @event cellkeydown\r
             * @inheritdoc Ext.view.Table#cellkeydown\r
             */\r
            'cellkeydown',\r
            /**\r
             * @event rowclick\r
             * @inheritdoc Ext.view.Table#rowclick\r
             */\r
            'rowclick',\r
            /**\r
             * @event rowdblclick\r
             * @inheritdoc Ext.view.Table#rowdblclick\r
             */\r
            'rowdblclick',\r
            /**\r
             * @event rowcontextmenu\r
             * @inheritdoc Ext.view.Table#rowcontextmenu\r
             */\r
            'rowcontextmenu',\r
            /**\r
             * @event rowmousedown\r
             * @inheritdoc Ext.view.Table#rowmousedown\r
             */\r
            'rowmousedown',\r
            /**\r
             * @event rowmouseup\r
             * @inheritdoc Ext.view.Table#rowmouseup\r
             */\r
            'rowmouseup',\r
            /**\r
             * @event rowkeydown\r
             * @inheritdoc Ext.view.Table#rowkeydown\r
             */\r
            'rowkeydown',\r
            /**\r
             * @event beforeitemkeydown\r
             * @inheritdoc Ext.view.Table#beforeitemkeydown\r
             */\r
            'beforeitemkeydown',\r
            /**\r
             * @event itemkeydown\r
             * @inheritdoc Ext.view.Table#itemkeydown\r
             */\r
            'itemkeydown',\r
            /**\r
             * @event beforeitemkeyup\r
             * @inheritdoc Ext.view.Table#beforeitemkeyup\r
             */\r
            'beforeitemkeyup',\r
            /**\r
             * @event itemkeyup\r
             * @inheritdoc Ext.view.Table#itemkeyup\r
             */\r
            'itemkeyup',\r
            /**\r
             * @event beforeitemkeypress\r
             * @inheritdoc Ext.view.Table#beforeitemkeypress\r
             */\r
            'beforeitemkeypress',\r
            /**\r
             * @event itemkeypress\r
             * @inheritdoc Ext.view.Table#itemkeypress\r
             */\r
            'itemkeypress',\r
            /**\r
             * @event beforecontainermousedown\r
             * @inheritdoc Ext.view.View#beforecontainermousedown\r
             */\r
            'beforecontainermousedown',\r
            /**\r
             * @event beforecontainermouseup\r
             * @inheritdoc Ext.view.View#beforecontainermouseup\r
             */\r
            'beforecontainermouseup',\r
            /**\r
             * @event beforecontainermouseover\r
             * @inheritdoc Ext.view.View#beforecontainermouseover\r
             */\r
            'beforecontainermouseover',\r
            /**\r
             * @event beforecontainermouseout\r
             * @inheritdoc Ext.view.View#beforecontainermouseout\r
             */\r
            'beforecontainermouseout',\r
            /**\r
             * @event beforecontainerclick\r
             * @inheritdoc Ext.view.View#beforecontainerclick\r
             */\r
            'beforecontainerclick',\r
            /**\r
             * @event beforecontainerdblclick\r
             * @inheritdoc Ext.view.View#beforecontainerdblclick\r
             */\r
            'beforecontainerdblclick',\r
            /**\r
             * @event beforecontainercontextmenu\r
             * @inheritdoc Ext.view.View#beforecontainercontextmenu\r
             */\r
            'beforecontainercontextmenu',\r
            /**\r
             * @event beforecontainerkeydown\r
             * @inheritdoc Ext.view.View#beforecontainerkeydown\r
             */\r
            'beforecontainerkeydown',\r
            /**\r
             * @event beforecontainerkeyup\r
             * @inheritdoc Ext.view.View#beforecontainerkeyup\r
             */\r
            'beforecontainerkeyup',\r
            /**\r
             * @event beforecontainerkeypress\r
             * @inheritdoc Ext.view.View#beforecontainerkeypress\r
             */\r
            'beforecontainerkeypress',\r
            /**\r
             * @event containermouseup\r
             * @inheritdoc Ext.view.View#containermouseup\r
             */\r
            'containermouseup',\r
            /**\r
             * @event containermousedown\r
             * @inheritdoc Ext.view.View#containermousedown\r
             */\r
            'containermousedown',\r
            /**\r
             * @event containermouseover\r
             * @inheritdoc Ext.view.View#containermouseover\r
             */\r
            'containermouseover',\r
            /**\r
             * @event containermouseout\r
             * @inheritdoc Ext.view.View#containermouseout\r
             */\r
            'containermouseout',\r
            /**\r
             * @event containerclick\r
             * @inheritdoc Ext.view.View#containerclick\r
             */\r
            'containerclick',\r
            /**\r
             * @event containerdblclick\r
             * @inheritdoc Ext.view.View#containerdblclick\r
             */\r
            'containerdblclick',\r
            /**\r
             * @event containercontextmenu\r
             * @inheritdoc Ext.view.View#containercontextmenu\r
             */\r
            'containercontextmenu',\r
            /**\r
             * @event containerkeydown\r
             * @inheritdoc Ext.view.View#containerkeydown\r
             */\r
            'containerkeydown',\r
            /**\r
             * @event containerkeyup\r
             * @inheritdoc Ext.view.View#containerkeyup\r
             */\r
            'containerkeyup',\r
            /**\r
             * @event containerkeypress\r
             * @inheritdoc Ext.view.View#containerkeypress\r
             */\r
            'containerkeypress',\r
            /**\r
             * @event selectionchange\r
             * @inheritdoc Ext.selection.Model#selectionchange\r
             */\r
            'selectionchange',\r
            /**\r
             * @event beforeselect\r
             * @inheritdoc Ext.selection.RowModel#beforeselect\r
             */\r
            'beforeselect',\r
            /**\r
             * @event select\r
             * @inheritdoc Ext.selection.RowModel#select\r
             */\r
            'select',\r
            /**\r
             * @event beforedeselect\r
             * @inheritdoc Ext.selection.RowModel#beforedeselect\r
             */\r
            'beforedeselect',\r
            /**\r
             * @event deselect\r
             * @inheritdoc Ext.selection.RowModel#deselect\r
             */\r
            'deselect'\r
        ]);\r
\r
        me.callParent();\r
        if (me.enableLocking) {\r
            me.afterInjectLockable();\r
        } else {\r
            delete headerCt.$initParent;\r
        }\r
        me.addStateEvents(['columnresize', 'columnmove', 'columnhide', 'columnshow', 'sortchange', 'filterchange', 'groupchange']);\r
        \r
        // rowBody feature events\r
        /**\r
         * @event beforerowbodymousedown\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodymousedown\r
         */\r
\r
        /**\r
         * @event beforerowbodymouseup\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodymouseup\r
         */\r
\r
        /**\r
         * @event beforerowbodyclick\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodyclick\r
         */\r
\r
        /**\r
         * @event beforerowbodydblclick\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodydblclick\r
         */\r
\r
        /**\r
         * @event beforerowbodycontextmenu\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodycontextmenu\r
         */\r
    \r
        /**\r
         * @event beforerowbodylongpress\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodylongpress\r
         */\r
\r
        /**\r
         * @event beforerowbodykeydown\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodykeydown\r
         */\r
\r
        /**\r
         * @event beforerowbodykeyup\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodykeyup\r
         */\r
\r
        /**\r
         * @event beforerowbodykeypress\r
         * @preventable\r
         * @inheritdoc Ext.view.Table#event-beforerowbodykeypress\r
         */\r
\r
        /**\r
         * @event rowbodymousedown\r
         * @inheritdoc Ext.view.Table#event-rowbodymousedown\r
         */\r
\r
        /**\r
         * @event rowbodymouseup\r
         * @inheritdoc Ext.view.Table#event-rowbodymouseup\r
         */\r
\r
        /**\r
         * @event rowbodyclick\r
         * @inheritdoc Ext.view.Table#event-rowbodyclick\r
         */\r
\r
        /**\r
         * @event rowbodydblclick\r
         * @inheritdoc Ext.view.Table#event-rowbodydblclick\r
         */\r
\r
        /**\r
         * @event rowbodycontextmenu\r
         * @inheritdoc Ext.view.Table#event-rowbodycontextmenu\r
         */\r
    \r
        /**\r
         * @event rowbodylongpress\r
         * @inheritdoc Ext.view.Table#event-rowbodylongpress\r
         */\r
\r
        /**\r
         * @event rowbodykeydown\r
         * @inheritdoc Ext.view.Table#event-rowbodykeydown\r
         */\r
\r
        /**\r
         * @event rowbodykeyup\r
         * @inheritdoc Ext.view.Table#event-rowbodykeyup\r
         */\r
\r
        /**\r
         * @event rowbodykeypress\r
         * @inheritdoc Ext.view.Table#event-rowbodykeypress\r
         */\r
    },\r
\r
    beforeRender: function() {\r
        var me = this,\r
            bufferedRenderer = me.bufferedRenderer,\r
            ariaAttr;\r
\r
        // If this is the topmost container of a lockable assembly, add the special class body\r
        if (me.lockable) {\r
            me.getProtoBody().addCls(me.lockingBodyCls);\r
        }\r
        \r
        // Don't create a buffered renderer for a locked grid.\r
        else {\r
            // If we're auto heighting, we can't buffered render, so don't create it\r
            if (bufferedRenderer && me.getSizeModel().height.auto) {\r
                //<debug>\r
                if (bufferedRenderer.isBufferedRenderer) {\r
                    Ext.raise('Cannot use buffered rendering with auto height');\r
                }\r
                //</debug>\r
                me.bufferedRenderer = bufferedRenderer = false;\r
            }\r
        \r
            if (bufferedRenderer && !bufferedRenderer.isBufferedRenderer) {\r
                // Create a BufferedRenderer as a plugin if we have not already configured with one.\r
                bufferedRenderer = {\r
                    xclass: 'Ext.grid.plugin.BufferedRenderer'\r
                };\r
                Ext.copy(bufferedRenderer, me, 'variableRowHeight,numFromEdge,trailingBufferZone,leadingBufferZone,scrollToLoadBuffer');\r
                me.bufferedRenderer = me.addPlugin(bufferedRenderer);\r
            }\r
            \r
            ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});\r
            ariaAttr['aria-readonly'] = !me.isEditable;\r
            ariaAttr['aria-multiselectable'] = me.selModel.selectionMode !== 'SINGLE';\r
        }\r
        \r
        me.callParent(arguments);\r
    },\r
\r
    onRender: function() {\r
        var me = this,\r
            gridPanelBorderWidth,\r
            totalColumnWidth;\r
\r
        // If this is the locked side, include border width in calculated locked grid width.\r
        // TODO: Use shrinkWrapDock on the locked grid's headerCt when it works.\r
        if (me.isLocked && me.getSizeModel().width.shrinkWrap) {\r
            me.shrinkWrapColumns = true;\r
            totalColumnWidth = me.headerCt.getTableWidth();\r
            //<debug>\r
            if (isNaN(totalColumnWidth)) {\r
                Ext.raise("Locked columns in an unsized locked side do NOT support a flex width.");\r
            }\r
            //</debug>\r
            gridPanelBorderWidth = me.gridPanelBorderWidth || (me.gridPanelBorderWidth = me.el.getBorderWidth('lr'));\r
            me.width = totalColumnWidth + gridPanelBorderWidth;\r
        }\r
        me.callParent();\r
    },\r
\r
    /**\r
     * Gets the {@link Ext.grid.header.Container headercontainer} for this grid / tree.\r
     * @return {Ext.grid.header.Container} headercontainer\r
     *\r
     * **Note:** While a locked grid / tree will return an instance of\r
     * {@link Ext.grid.locking.HeaderContainer} you will code to the\r
     * {@link Ext.grid.header.Container} API.\r
     */\r
    getHeaderContainer: function () {\r
        return this.getView().getHeaderCt();\r
    },\r
\r
    /**\r
     * @inheritdoc Ext.grid.header.Container#getGridColumns\r
     */\r
    getColumns: function () {\r
        return this.getColumnManager().getColumns();\r
    },\r
\r
    /**\r
     * @inheritdoc Ext.grid.header.Container#getVisibleGridColumns\r
     */\r
    getVisibleColumns: function () {\r
        return this.getVisibleColumnManager().getColumns();\r
    },\r
\r
    focus: function() {\r
        // TablePanel is not focusable, but allow a call to delegate into the view\r
        this.getView().focus();\r
    },\r
    \r
    /**\r
     * Disables interaction with, and masks this grid's column headers.\r
     */\r
    disableColumnHeaders: function() {\r
        this.headerCt.disable();\r
    },\r
\r
    /**\r
     * Enables interaction with, and unmasks this grid's column headers after a call to {#disableColumnHeaders}.\r
     */\r
    enableColumnHeaders: function() {\r
        this.headerCt.enable();\r
    },\r
\r
    /**\r
     * @private\r
     * Determine if there are any columns with a locked configuration option.\r
     */\r
    hasLockedColumns: function(columns) {\r
        var i,\r
            len,\r
            column;\r
\r
        // Fully instantiated HeaderContainer\r
        if (columns.isRootHeader) {\r
            columns = columns.items.items;\r
        }\r
        // Config object with items\r
        else if (Ext.isObject(columns)) {\r
            columns = columns.items;\r
        }\r
        for (i = 0, len = columns.length; i < len; i++) {\r
            column = columns[i];\r
            if (!column.processed && column.locked) {\r
                return true;\r
            }\r
        }\r
    },\r
\r
    relayHeaderCtEvents: function (headerCt) {\r
        this.relayEvents(headerCt, [\r
            /**\r
             * @event columnresize\r
             * @inheritdoc Ext.grid.header.Container#columnresize\r
             */\r
            'columnresize',\r
            /**\r
             * @event columnmove\r
             * @inheritdoc Ext.grid.header.Container#columnmove\r
             */\r
            'columnmove',\r
            /**\r
             * @event columnhide\r
             * @inheritdoc Ext.grid.header.Container#columnhide\r
             */\r
            'columnhide',\r
            /**\r
             * @event columnshow\r
             * @inheritdoc Ext.grid.header.Container#columnshow\r
             */\r
            'columnshow',\r
            /**\r
             * @event columnschanged\r
             * @inheritdoc Ext.grid.header.Container#columnschanged\r
             */\r
            'columnschanged',\r
            /**\r
             * @event sortchange\r
             * @inheritdoc Ext.grid.header.Container#sortchange\r
             */\r
            'sortchange',\r
            /**\r
             * @event headerclick\r
             * @inheritdoc Ext.grid.header.Container#headerclick\r
             */\r
            'headerclick',\r
            /**\r
             * @event headercontextmenu\r
             * @inheritdoc Ext.grid.header.Container#headercontextmenu\r
             */\r
            'headercontextmenu',\r
            /**\r
             * @event headertriggerclick\r
             * @inheritdoc Ext.grid.header.Container#headertriggerclick\r
             */\r
            'headertriggerclick'\r
        ]);\r
    },\r
\r
    getState: function(){\r
        var me = this,\r
            state = me.callParent(),\r
            storeState = me.store.getState();\r
\r
        state = me.addPropertyToState(state, 'columns', me.headerCt.getColumnsState());\r
\r
        if (storeState) {\r
            state.storeState = storeState;\r
        }\r
        return state;\r
    },\r
\r
    applyState: function (state) {\r
        var me = this,\r
            sorter = state.sort,\r
            storeState = state.storeState,\r
            store = me.store,\r
            columns = state.columns;\r
\r
        delete state.columns;\r
\r
        // Ensure superclass has applied *its* state.\r
        // Component saves dimensions (and anchor/flex) plus collapsed state.\r
        me.callParent(arguments);\r
\r
        if (columns) {\r
            // Column state restoration needs to examine store state\r
            me.headerCt.applyColumnsState(columns, storeState);\r
        }\r
\r
        // Old stored sort state. Deprecated and will die out.\r
        if (sorter) {\r
            if (store.getRemoteSort()) {\r
                // Pass false to prevent a sort from occurring.\r
                store.sort({\r
                    property: sorter.property,\r
                    direction: sorter.direction,\r
                    root: sorter.root\r
                }, null, false);\r
            } else {\r
                store.sort(sorter.property, sorter.direction);\r
            }\r
        }\r
        // New storeState which encapsulates groupers, sorters and filters.\r
        else if (storeState) {\r
            store.applyState(storeState);\r
        }\r
    },\r
\r
    /**\r
     * Returns the store associated with this Panel.\r
     * @return {Ext.data.Store} The store\r
     */\r
    getStore: function(){\r
        return this.store;\r
    },\r
\r
    /**\r
     * Gets the view for this panel.\r
     * @return {Ext.view.Table}\r
     */\r
    getView: function() {\r
        var me = this,\r
            scroll, scrollable, viewConfig;\r
\r
        if (!me.view) {\r
            viewConfig = me.viewConfig;\r
            scroll = viewConfig.scroll || me.scroll;\r
            scrollable = me.scrollable;\r
\r
            if (scrollable == null && viewConfig.scrollable == null && scroll !== null) {\r
                // transform deprecated scroll config into scrollable config\r
                if (scroll === true || scroll === 'both') {\r
                    scrollable = true;\r
                } else if (scroll === false || scroll === 'none') {\r
                    scrollable = false;\r
                } else if (scroll === 'vertical') {\r
                    scrollable = {\r
                        x: false,\r
                        y: true\r
                    };\r
                } else if (scroll === 'horizontal') {\r
                    scrollable = {\r
                        x: true,\r
                        y: false\r
                    };\r
                }\r
            }\r
\r
            viewConfig = Ext.apply({\r
                // TableView injects the view reference into this grid so that we have a reference as early as possible\r
                // and Features need a reference to the grid.\r
                // For these reasons, we configure a reference to this grid into the View\r
                grid: me,\r
                ownerGrid: me.ownerGrid,\r
                deferInitialRefresh: me.deferRowRender,\r
                variableRowHeight: me.variableRowHeight,\r
                preserveScrollOnRefresh: true,\r
                trackOver: me.trackMouseOver !== false,\r
                throttledUpdate: me.throttledUpdate === true,\r
                xtype: me.viewType,\r
                store: me.store,\r
                headerCt: me.headerCt,\r
                columnLines: me.columnLines,\r
                rowLines: me.rowLines,\r
                navigationModel: 'grid',\r
                features: me.features,\r
                panel: me,\r
                emptyText: me.emptyText || ''\r
            }, me.viewConfig);\r
\r
            if (scrollable != null) {\r
                viewConfig.scrollable = scrollable;\r
                me.scrollable = null;\r
            }\r
\r
            Ext.create(viewConfig);\r
\r
            // Normalize the application of the markup wrapping the emptyText config.\r
            // `emptyText` can now be defined on the grid as well as on its viewConfig, and this led to the emptyText not\r
            // having the wrapping markup when it was defined in the viewConfig. It should be backwards compatible.\r
            // Note that in the unlikely event that emptyText is defined on both the grid config and the viewConfig that the viewConfig wins.\r
            if (me.view.emptyText) {\r
                me.view.emptyText = '<div class="' + me.emptyCls + '">' + me.view.emptyText + '</div>';\r
            }\r
\r
            // TableView's custom component layout, Ext.view.TableLayout requires a reference to the headerCt because it depends on the headerCt doing its work.\r
            me.view.getComponentLayout().headerCt = me.headerCt;\r
\r
            me.mon(me.view, {\r
                uievent: me.processEvent,\r
                scope: me\r
            });\r
            me.headerCt.view = me.view;\r
\r
            // Plugins and features may need to access the view as soon as it is created.\r
            if (me.hasListeners.viewcreated) {\r
                me.fireEvent('viewcreated', me, me.view);\r
            }\r
        }\r
        return me.view;\r
    },\r
\r
    getColumnManager: function() {\r
        return this.columnManager;\r
    },\r
\r
    getVisibleColumnManager: function() {\r
        return this.visibleColumnManager;\r
    },\r
\r
    getTopLevelColumnManager: function() {\r
        return this.ownerGrid.getColumnManager();\r
    },\r
\r
    getTopLevelVisibleColumnManager: function() {\r
        return this.ownerGrid.getVisibleColumnManager();\r
    },\r
\r
    /**\r
     * @private\r
     * autoScroll is never valid for all classes which extend TablePanel.\r
     */\r
    setAutoScroll: Ext.emptyFn,\r
\r
    applyScrollable: function(scrollable) {\r
        if (this.view) {\r
            this.view.setScrollable(scrollable);\r
        }\r
\r
        return scrollable;\r
    },\r
\r
    getScrollable: function() {\r
        return null;\r
    },\r
\r
    /**\r
     * @private\r
     * Processes UI events from the view. Propagates them to whatever internal Components need to process them.\r
     * @param {String} type Event type, eg 'click'\r
     * @param {Ext.view.Table} view TableView Component\r
     * @param {HTMLElement} cell Cell HTMLElement the event took place within\r
     * @param {Number} recordIndex Index of the associated Store Model (-1 if none)\r
     * @param {Number} cellIndex Cell index within the row\r
     * @param {Ext.event.Event} e Original event\r
     */\r
    processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {\r
        var header = e.position.column;\r
\r
        if (header) {\r
            return header.processEvent.apply(header, arguments);\r
        }\r
    },\r
\r
    /**\r
     * Scrolls the specified record into view.\r
     * @param {Number/String/Ext.data.Model} record The record, record id,  or the zero-based position in the dataset to scroll to.\r
     * @param {Object}          [options] An object containing options to modify the operation.\r
     * @param {Boolean}         [options.animate] Pass `true` to animate the row into view.\r
     * @param {Boolean}         [options.highlight] Pass `true` to highlight the row with a glow animation when it is in view.\r
     * @param {Boolean}         [options.select] Pass as `true` to select the specified row.\r
     * @param {Boolean}         [options.focus] Pass as `true` to focus the specified row.\r
     * @param {Function}        [options.callback] A function to execute when the record is in view. This may be necessary if the\r
     *                          first parameter is a record index and the view is backed by a {@link Ext.data.BufferedStore buffered store}\r
     *                          which does not contain that record.\r
     * @param {Boolean}         options.callback.success `true` if acquiring the record's view node was successful.\r
     * @param {Ext.data.Model}  options.callback.record If successful, the target record.\r
     * @param {HTMLElement}     options.callback.node If successful, the record's view node.\r
     * @param {Object}          [options.scope] The scope (`this` reference) in which the callback function is executed.\r
     */\r
    ensureVisible: function(record, options) {\r
        this.doEnsureVisible(record, options);\r
    },\r
\r
    scrollByDeltaY: function(yDelta, animate) {\r
        this.getView().scrollBy(0, yDelta, animate);\r
    },\r
\r
    scrollByDeltaX: function(xDelta, animate) {\r
        this.getView().scrollBy(xDelta, 0, animate);\r
    },\r
\r
    afterCollapse: function() {\r
        this.saveScrollPos();\r
        this.callParent(arguments);\r
    },\r
\r
    afterExpand: function() {\r
        this.callParent(arguments);\r
        this.restoreScrollPos();\r
    },\r
\r
    saveScrollPos: Ext.emptyFn,\r
\r
    restoreScrollPos: Ext.emptyFn,\r
\r
    onHeaderResize: function() {\r
        var scroller = this.view.getScrollable(),\r
            size;\r
\r
        if (scroller && scroller.isTouchScroller) {\r
            size = scroller.getSize();\r
            if (size) {\r
                scroller.setSize({\r
                    x: this.headerCt.getTableWidth(),\r
                    y: size.y\r
                });\r
            }\r
        }\r
    },\r
\r
    // Update the view when a header moves\r
    onHeaderMove: function(headerCt, header, colsToMove, fromIdx, toIdx) {\r
        var me = this;\r
\r
        // If there are Features or Plugins which create DOM which must match column order, they set the optimizedColumnMove flag to false.\r
        // In this case we must refresh the view on column move.\r
        if (me.optimizedColumnMove === false) {\r
            me.view.refreshView();\r
        }\r
\r
        // Simplest case for default DOM structure is just to swap the columns round in the view.\r
        else {\r
            me.view.moveColumn(fromIdx, toIdx, colsToMove);\r
        }\r
        me.delayScroll();\r
    },\r
\r
    // Section onHeaderHide is invoked after view.\r
    onHeaderHide: function(headerCt, header) {\r
        var view = this.view;\r
        // The headerCt may be hiding multiple children if a leaf level column\r
        // causes a parent (and possibly other parents) to be hidden. Only run the refresh\r
        // once we're done\r
        if (!headerCt.childHideCount && view.refreshCounter) {\r
            view.refreshView();\r
        }\r
    },\r
\r
    onHeaderShow: function(headerCt, header) {\r
        var view = this.view;\r
        if (view.refreshCounter) {\r
            view.refreshView();\r
        }\r
    },\r
\r
    // To be triggered on add/remove/move for a leaf header\r
    onHeadersChanged: function(headerCt, header) {\r
        var me = this;\r
        if (me.rendered && !me.reconfiguring) {\r
            me.view.refreshView();\r
            me.delayScroll();\r
        }\r
    },\r
\r
    delayScroll: function(){\r
        var target = this.view;\r
        if (target) {\r
            // Do not cause a layout by reading scrollX now.\r
            // It must be read from the target when the task finally executes.\r
            this.scrollTask.delay(10, null, null, [target]);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Fires the TablePanel's viewready event when the view declares that its internal DOM is ready\r
     */\r
    onViewReady: function() {\r
         this.fireEvent('viewready', this);   \r
    },\r
\r
    /**\r
     * @private\r
     * Tracks when things happen to the view and preserves the horizontal scroll position.\r
     */\r
    onRestoreHorzScroll: function() {\r
        var me = this,\r
            x = me.scrollXPos;\r
\r
        if (x) {\r
            // We need to restore the body scroll position here\r
            me.syncHorizontalScroll(me, true);\r
        }\r
    },\r
\r
    getScrollerOwner: function() {\r
        var rootCmp = this;\r
        if (!this.scrollerOwner) {\r
            rootCmp = this.up('[scrollerOwner]');\r
        }\r
        return rootCmp;\r
    },\r
\r
    /**\r
     * Gets left hand side marker for header resizing.\r
     * @private\r
     */\r
    getLhsMarker: function() {\r
        var me = this;\r
        return me.lhsMarker || (me.lhsMarker = Ext.DomHelper.append(me.el, {\r
            role: 'presentation',\r
            cls: me.resizeMarkerCls\r
        }, true));\r
    },\r
\r
    /**\r
     * Gets right hand side marker for header resizing.\r
     * @private\r
     */\r
    getRhsMarker: function() {\r
        var me = this;\r
\r
        return me.rhsMarker || (me.rhsMarker = Ext.DomHelper.append(me.el, {\r
            role: 'presentation',\r
            cls: me.resizeMarkerCls\r
        }, true));\r
    },\r
\r
    /**\r
     * Returns the grid's selection. See `{@link Ext.selection.Model#getSelection}`.\r
     * @inheritdoc Ext.selection.Model#getSelection\r
     */\r
    getSelection: function () {\r
        return this.getSelectionModel().getSelection();\r
    },\r
\r
    updateSelection: function(selection) {\r
        var me = this,\r
            sm;\r
\r
        if (!me.ignoreNextSelection) {\r
            me.ignoreNextSelection = true;\r
            sm = me.getSelectionModel();\r
            if (selection) {\r
                sm.select(selection);\r
            } else {\r
                sm.deselectAll();\r
            }\r
            me.ignoreNextSelection = false;\r
        }\r
    },\r
\r
    updateBindSelection: function(selModel, selection) {\r
        var me = this,\r
            selected = null;\r
\r
        if (!me.ignoreNextSelection) {\r
            me.ignoreNextSelection = true;\r
            if (selection.length) {\r
                selected = selModel.getLastSelected();\r
                me.hasHadSelection = true;\r
            }\r
            if (me.hasHadSelection) {\r
                me.setSelection(selected);\r
            }\r
            me.ignoreNextSelection = false;\r
        }\r
    },\r
\r
    updateHeaderBorders: function(headerBorders) {\r
        this[headerBorders ? 'removeCls' : 'addCls'](this.noHeaderBordersCls);\r
    },\r
\r
    getNavigationModel: function() {\r
        return this.getView().getNavigationModel();\r
    },\r
\r
    /**\r
     * Returns the selection model being used by this grid's {@link Ext.view.Table view}.\r
     * @return {Ext.selection.Model} The selection model being used by this grid's {@link Ext.view.Table view}.\r
     */\r
    getSelectionModel: function() {\r
        return this.getView().getSelectionModel();\r
    },\r
\r
    getScrollTarget: function(){\r
        var items = this.getScrollerOwner().query('tableview');\r
\r
        // Last view has the scroller\r
        return items[items.length - 1];\r
    },\r
\r
    syncHorizontalScroll: function(target, setBody) {\r
        var me = this,\r
            x = me.view.getScrollX(),\r
            scrollTarget;\r
\r
        setBody = setBody === true;\r
        // Only set the horizontal scroll if we've changed position,\r
        // so that we don't set this on vertical scrolls\r
        if (me.rendered && (setBody || x !== me.scrollXPos)) {\r
            // Only set the body position if we're reacting to a refresh, otherwise\r
            // we just need to set the header.\r
            if (setBody) {   \r
                scrollTarget = me.getScrollTarget();\r
                scrollTarget.setScrollX(x);\r
            }\r
            me.headerCt.setScrollX(x);\r
            me.scrollXPos = x;\r
        }\r
    },\r
\r
    // template method meant to be overriden\r
    onStoreLoad: Ext.emptyFn,\r
\r
    getEditorParent: function() {\r
        return this.body;\r
    },\r
\r
    bindStore: function(store, initial) {\r
        var me = this,\r
            view = me.getView();\r
\r
        // Normally, this method will always be called with a valid store (because there is a symmetric\r
        // .unbindStore method), but there are cases where this method will be called and passed a null\r
        // value, i.e., a panel is used as a pickerfield. See EXTJS-13089.\r
        if (store) {\r
            // Bind to store immediately because subsequent processing looks for grid's store property\r
            me.store = store;\r
\r
            if (view.store !== store) {\r
                // If coming from a reconfigure, we need to set the actual store property on the view. Setting the\r
                // store will then also set the dataSource.\r
                //\r
                // Note that if it's a grid feature then this is sorted out in view.bindStore(), and it's own\r
                // implementation of .bindStore() will be called.\r
                view.bindStore(store, false);\r
            }\r
\r
            me.mon(store, {\r
                load: me.onStoreLoad,\r
                scope: me\r
            });\r
            me.storeRelayers = me.relayEvents(store, [\r
                /**\r
                 * @event filterchange\r
                 * @inheritdoc Ext.data.Store#filterchange\r
                 */\r
                'filterchange',\r
                /**\r
                 * @event groupchange\r
                 * @inheritdoc Ext.data.Store#groupchange\r
                 */\r
                'groupchange'\r
            ]);\r
        } else {\r
            me.unbindStore();\r
        }\r
    },\r
\r
    unbindStore: function() {\r
        var me = this,\r
            store = me.store,\r
            view;\r
\r
        if (store) {\r
            store.trackStateChanges = false;\r
\r
            me.store = null;\r
\r
            me.mun(store, {\r
                load: me.onStoreLoad,\r
                scope: me\r
            });\r
\r
            Ext.destroy(me.storeRelayers);\r
\r
            view = me.view;\r
            if (view.store) {\r
                view.bindStore(null);\r
            }\r
        }\r
    },\r
\r
    setColumns: function(columns) {\r
        // If being reconfigured from zero columns to zero columns, skip operation.\r
        // This can happen if columns are being set from a binding and the initial value\r
        // of the bound data in the ViewModel is []\r
        if (columns.length || this.getColumnManager().getColumns().length) {\r
            this.reconfigure(undefined, columns);\r
        }\r
    },\r
\r
    /**\r
     * A convenience method that fires {@link #reconfigure} with the store param.  To set the store AND change columns,\r
     * use the {@link #reconfigure reconfigure method}.\r
     *\r
     * @param {Ext.data.Store} [store] The new store.\r
     */\r
    setStore: function (store) {\r
        this.reconfigure(store);\r
\r
        if (this.autoLoad && !store.isEmptyStore && !(store.loading || store.isLoaded())) {\r
            store.load();\r
        }\r
    },\r
\r
    /**\r
     * Reconfigures the grid or tree with a new store and/or columns. Stores and columns \r
     * may also be passed as params.\r
     *\r
     *     grid.reconfigure(store, columns);\r
     *\r
     * Additionally, you can pass just a store or columns.\r
     *\r
     *     tree.reconfigure(store);\r
     *     // or\r
     *     grid.reconfigure(columns);\r
     *     // or\r
     *     tree.reconfigure(null, columns);\r
     *\r
     * If you're using locked columns, the {@link #enableLocking} config should be set \r
     * to `true` before the reconfigure method is executed.\r
     *\r
     * @param {Ext.data.Store/Object} [store] The new store instance or store config. You can \r
     * pass `null` if no new store.\r
     * @param {Object[]} [columns] An array of column configs\r
     */\r
    reconfigure: function(store, columns) {\r
        var me = this,\r
            oldStore = me.store,\r
            headerCt = me.headerCt,\r
            lockable = me.lockable,\r
            oldColumns = headerCt ? headerCt.items.getRange() : me.columns,\r
            view = me.getView(),\r
            block, refreshCounter;\r
\r
        // Allow optional store argument to be fully omitted, and the columns argument to be solo\r
        if (arguments.length === 1 && Ext.isArray(store)) {\r
            columns = store;\r
            store = null;\r
        }\r
\r
        // Make copy in case the beforereconfigure listener mutates it.\r
        if (columns) {\r
            columns = Ext.Array.slice(columns);\r
        }\r
\r
        me.reconfiguring = true;\r
        if (store) {\r
            store = Ext.StoreManager.lookup(store);\r
        }\r
        me.fireEvent('beforereconfigure', me, store, columns, oldStore, oldColumns);\r
\r
        Ext.suspendLayouts();\r
\r
        if (lockable) {\r
            me.reconfigureLockable(store, columns);\r
        } else {\r
            // Prevent the view from refreshing until we have resumed layouts and any columns are rendered\r
            block = view.blockRefresh;\r
            view.blockRefresh = true;\r
\r
            // The following test compares the result of an assignment of the store var with the oldStore var.\r
            // This saves a large amount of code.\r
            //\r
            // Note that we need to process the store first in case one or more passed columns (if there are any)\r
            // have active gridfilters with values which would filter the currently-bound store.\r
            if (store && store !== oldStore) {\r
                me.unbindStore();\r
                me.bindStore(store);\r
            }\r
\r
            if (columns) {\r
                // new columns, delete scroll pos\r
                delete me.scrollXPos;\r
                headerCt.removeAll();\r
                headerCt.add(columns);\r
            }\r
\r
            view.blockRefresh = block;\r
            refreshCounter = view.refreshCounter;\r
        }\r
\r
        Ext.resumeLayouts(true);\r
        if (lockable) {\r
            me.afterReconfigureLockable();\r
        } else if (view.refreshCounter === refreshCounter) {\r
            // If the layout resumption didn't trigger the view to refresh, do it here\r
            view.refreshView();\r
        }\r
\r
        me.fireEvent('reconfigure', me, store, columns, oldStore, oldColumns);\r
        delete me.reconfiguring;\r
    },\r
\r
    beforeDestroy: function(){\r
        var me = this,\r
            task = me.scrollTask;\r
            \r
        if (task) {\r
            task.cancel();\r
            me.scrollTask = null;\r
        }\r
        Ext.destroy(me.focusEnterLeaveListeners);\r
        me.callParent();\r
    },\r
\r
    onDestroy: function(){\r
        var me = this;\r
        if (me.lockable) {\r
            me.destroyLockable();\r
        }\r
        me.unbindStore();\r
        me.callParent();\r
        me.columns = me.storeRelayers = me.columnManager = me.visibleColumnManager = null;\r
    },\r
    \r
    destroy: function() {\r
        // Clear out references here because other things (plugins/features) may need to know about them during destruction\r
        var me = this;\r
        me.callParent();\r
        if (me.destroyed) {\r
            me.view = me.selModel = me.headerCt = null;\r
        }\r
    },\r
\r
    privates: {\r
        // The focusable flag is set, but there is no focusable element.\r
        // Focus is delegated to the view by the focus implementation.\r
        initFocusableElement: function() {},\r
\r
        doEnsureVisible: function(record, options) {\r
            // Handle the case where this is a lockable assembly\r
            if (this.lockable) {\r
                return this.ensureLockedVisible(record, options);\r
            }\r
\r
            // Allow them to pass the record id.\r
            if (typeof record !== 'number' && !record.isEntity) {\r
                record = this.store.getById(record);\r
            }\r
            var me = this,\r
                view = me.getView(),\r
                domNode = view.getNode(record),\r
                callback, scope, animate,\r
                highlight, select, doFocus, scrollable, column, cell;\r
\r
            if (options) {\r
                callback = options.callback;\r
                scope = options.scope;\r
                animate = options.animate;\r
                highlight = options.highlight;\r
                select = options.select;\r
                doFocus = options.focus;\r
                column = options.column;\r
            }\r
\r
            // Always supercede any prior deferred request\r
            if (me.deferredEnsureVisible) {\r
                me.deferredEnsureVisible.destroy();\r
            }\r
\r
            // We have not yet run the layout.\r
            // Add this to the end of the first sizing process.\r
            // By using the resize event, we will come in AFTER any Component's onResize and onBoxReady handling.\r
            if (!view.componentLayoutCounter) {\r
                me.deferredEnsureVisible = view.on({\r
                    resize: me.doEnsureVisible,\r
                    args: Ext.Array.slice(arguments),\r
                    scope: me,\r
                    single: true,\r
                    destroyable: true\r
                });\r
                return;\r
            }\r
\r
            if (typeof column === 'number') {\r
                column = me.ownerGrid.getVisibleColumnManager().getColumns()[column];\r
            }\r
            \r
            // We found the DOM node associated with the record\r
            if (domNode) {\r
                scrollable = view.getScrollable();\r
                if (column) {\r
                    cell = Ext.fly(domNode).selectNode(column.getCellSelector());\r
                }\r
                if (scrollable) {\r
                    scrollable.scrollIntoView(cell || domNode, !!column, animate, highlight);\r
                }\r
                if (!record.isEntity) {\r
                    record = view.getRecord(domNode);\r
                }\r
                if (select) {\r
                    view.getSelectionModel().select(record);\r
                }\r
                if (doFocus) {\r
                    view.getNavigationModel().setPosition(record, 0);\r
                }\r
                Ext.callback(callback, scope || me, [true, record, domNode]);\r
            }\r
            // If we didn't find it, it's probably because of buffered rendering\r
            else if (view.bufferedRenderer) {\r
                view.bufferedRenderer.scrollTo(record, {\r
                    animate: animate,\r
                    highlight: highlight,\r
                    select: select,\r
                    focus: doFocus,\r
                    column: column,\r
                    callback: function(recordIdx, record, domNode) {\r
                        Ext.callback(callback, scope || me, [true, record, domNode]);\r
                    }\r
                });\r
            } else {\r
                Ext.callback(callback, scope || me, [false, null]);\r
            }\r
        },\r
        \r
        getFocusEl: function() {\r
            return this.getView().getFocusEl();\r
        },\r
\r
        /**\r
         * Toggles ARIA actionable mode on/off\r
         * @param {Boolean} enabled\r
         * @return {Boolean} `true` if actionable mode was entered\r
         * @private\r
         */\r
        setActionableMode: function(enabled, position) {\r
            // Always set the topmost grid in a lockable assembly\r
            var me = this.ownerGrid;\r
\r
            // Can be called to exit actionable mode upon a focusLeave caused by destruction\r
            if (!me.destroying && me.view.setActionableMode(enabled, position) !== false) {\r
                me.fireEvent('actionablemodechange', enabled);\r
                me[enabled ? 'addCls' : 'removeCls'](me.actionableModeCls);\r
                return true;\r
            }\r
        }\r
    }\r
});\r