[extjs.git] / extjs / classic / classic / src / view / AbstractView.js

/**\r
 * @class Ext.view.AbstractView\r
 * This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.\r
 * @private\r
 */\r
Ext.define('Ext.view.AbstractView', {\r
    extend: 'Ext.Component',\r
    requires: [\r
        'Ext.LoadMask',\r
        'Ext.CompositeElementLite',\r
        'Ext.selection.DataViewModel',\r
        'Ext.view.NavigationModel'\r
    ],\r
    mixins: [\r
        'Ext.util.StoreHolder'\r
    ],\r
\r
    inheritableStatics: {\r
        /**\r
         * @private\r
         * @static\r
         * @inheritable\r
         */\r
        getRecord: function(node) {\r
            return this.getBoundView(node).getRecord(node);\r
        },\r
\r
        /**\r
         * @private\r
         * @static\r
         * @inheritable\r
         */\r
        getBoundView: function(node) {\r
            return Ext.getCmp(node.getAttribute('data-boundView'));\r
        }\r
    },\r
    \r
    defaultBindProperty: 'store',\r
\r
    /**\r
     * @private\r
     * Used for buffered rendering.\r
     */\r
    renderBuffer: document.createElement('div'),\r
\r
    statics: {\r
\r
        /**\r
         * @cfg {Number} [updateDelay=200] Global config for use when using {@link #throttledUpdate throttled view updating} if the data in the backing {@link Ext.data.Store store}\r
         * is being changed rapidly, for example receiving changes from the server through a WebSocket connection.\r
         *\r
         * To avoid too-frequent view updates overloading the browser with style recalculation, layout and paint requests, updates can be {@link #throttledUpdate throttled} to \r
         * coalesced, and applied at the interval specified in milliseconds.\r
         */\r
        updateDelay: 200,\r
\r
        queueRecordChange: function(view, store, record, operation, modifiedFieldNames) {\r
            var me = this,\r
                changeQueue = me.changeQueue || (me.changeQueue = {}),\r
                recId = record.internalId,\r
                recChange,\r
                updated,\r
                len, i, fieldName, value,\r
                checkForReversion;\r
\r
            recChange = changeQueue[recId] || (changeQueue[recId] = {\r
                operation: operation,\r
                record: record,\r
                data: {},\r
                views: []\r
            });\r
\r
            // Hash of original values\r
            updated = recChange.data;\r
\r
            // Make sure this view is among those updated when record changes are flushed\r
            Ext.Array.include(recChange.views, view);\r
\r
            // Note the following condition tests the result of an assignment statement.\r
            // If we have been informed that specific fields have changed.\r
            if (modifiedFieldNames && (len = modifiedFieldNames.length)) {\r
                for (i = 0; i < len; i++) {\r
                    fieldName = modifiedFieldNames[i];\r
                    value = record.data[fieldName];\r
\r
                    // More than one update is being performed...\r
                    if (updated.hasOwnProperty(fieldName)) {\r
\r
                        // If the update is back to the original value, this may have reverted the record to original state\r
                        if (record.isEqual(updated[fieldName], value)) {\r
                            delete updated[fieldName];\r
                            checkForReversion = true;\r
                        }\r
                    }\r
\r
                    // On first update, cache the original value\r
                    else {\r
                        updated[fieldName] = value;\r
                    }\r
                }\r
\r
                // If the record has been returned to its original state, delete the queue entry.\r
                // checkForReversion flag saves the expensive (on legacy browsers) call to Ext.Object.getKeys\r
                if (checkForReversion && !Ext.Object.getKeys(updated).length) {\r
                    delete changeQueue[recId];\r
                }\r
            }\r
\r
            // Unpsecified fields have changed. We have to collect the whole data object.\r
            else {\r
                Ext.apply(updated, record.data);\r
            }\r
\r
            // Create a task which will call on to the onFlushTick every updateDelay milliseconds.\r
            if (!me.flushQueueTask) {\r
                me.flushQueueTask = Ext.util.TaskManager.newTask({\r
                    // Queue the actual render flush on the next animation frame if available.\r
                    run: Ext.global.requestAnimationFrame ? Ext.Function.createAnimationFrame(me.onFlushTick, me) : Ext.Function.bind(me.onFlushTick, me),\r
                    interval: Ext.view.AbstractView.updateDelay,\r
                    repeat: 1\r
                });\r
            }\r
            me.flushQueueTask.start();\r
        },\r
\r
        /**\r
         * @private\r
         * On every flush (determined by updateDelay setting), ask the animation system to schedule a call to\r
         * flushChangeQueue at the next animation frame.\r
         */\r
        onFlushTick: function() {\r
            Ext.AnimationQueue.start(this.flushChangeQueue, this);\r
        },\r
\r
        /**\r
        * @private\r
        * Flushes all queued field updates to the UI.\r
        *\r
        * Called in the context of the AbstractView class.\r
        *\r
        * The queue is shared across all Views so that there is only one global flush operation.\r
        */\r
        flushChangeQueue: function() {\r
            // Maintainer: Note that "me" references AbstractView class\r
            var me = this,\r
                dirtyViews,\r
                len,\r
                changeQueue,\r
                recChange,\r
                recId,\r
                i, view;\r
\r
            // If there is scrolling going on anywhere, requeue the flush operation.\r
            if (Ext.isScrolling) {\r
                me.flushQueueTask.start();\r
                return;\r
            }\r
\r
            changeQueue = me.changeQueue;\r
\r
            // Empty the view's changeQueue\r
            this.changeQueue = {};\r
\r
            for (recId in changeQueue) {\r
                recChange = changeQueue[recId];\r
                dirtyViews = recChange.views;\r
                len = dirtyViews.length;\r
\r
                // Loop through all the views which have outstanding changes.\r
                for (i = 0; i < len; i++) {\r
                    view = dirtyViews[i];\r
\r
                    // View may have been destroyed during the buffered phase.\r
                    if (!view.destroyed) {\r
                        view.handleUpdate(view.dataSource, recChange.record, recChange.operation, Ext.Object.getKeys(recChange.data));\r
                    }\r
                }\r
            }\r
            Ext.AnimationQueue.stop(me.flushChangeQueue, me);\r
        }\r
    },\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 {Ext.data.Store} store\r
         * The {@link Ext.data.Store} to bind this DataView to.\r
         * @since 2.3.0\r
         */\r
        store: 'ext-empty-store',\r
\r
        // @cmd-auto-dependency { aliasPrefix: 'view.navigation.' }\r
        /**\r
         * @private\r
         * The {@link Ext.view.NavigationModel} [default] alias to use.\r
         * @since 5.0.1\r
         */\r
        navigationModel: {\r
            type: 'default'\r
        },\r
\r
        // @cmd-auto-dependency { aliasPrefix: 'selection.' }\r
        /**\r
         * @cfg {Object/Ext.selection.DataViewModel} selectionModel\r
         * The {@link Ext.selection.Model selection model} [dataviewmodel] config or alias to use.\r
         * @since 5.1.0\r
         */\r
        selectionModel: {\r
            type: 'dataviewmodel'\r
        }\r
    },\r
\r
    publishes: ['selection'],\r
    twoWayBindable: ['selection'],\r
\r
    /**\r
     * @cfg {Boolean} [throttledUpdate=false]\r
     * Configure as `true` to have this view participate in the global throttled update queue which flushes store changes to the UI at a maximum rate\r
     * determined by the {@link #updateDelay} setting.\r
     */\r
    throttledUpdate: false,\r
\r
    /**\r
     * @cfg {String/String[]/Ext.XTemplate} tpl (required)\r
     * The HTML fragment or an array of fragments that will make up the template used by this DataView.  This should\r
     * be specified in the same format expected by the constructor of {@link Ext.XTemplate}. When a `tpl` is specified,\r
     * this class assumes that records are rendered in the order they appear in the `{@link #store}`. If a custom `tpl`\r
     * does not conform to this assumption, index values will be incorrect which may cause the view to misbehave.\r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [deferInitialRefresh=false]\r
     * Configure as 'true` to defer the initial refresh of the view.\r
     *\r
     * This allows the View to execute its render and initial layout more quickly because the process will not be encumbered\r
     * by the update of the view structure.\r
     */\r
    deferInitialRefresh: false,\r
\r
    /**\r
     * @cfg {String} itemSelector (required)\r
     * <b>This is a required setting</b>. A simple CSS selector (e.g. `div.some-class` or\r
     * `span:first-child`) that will be used to determine what nodes this DataView will be\r
     * working with. The itemSelector is used to map DOM nodes to records. As such, there should\r
     * only be one root level element that matches the selector for each record. The itemSelector\r
     * will be automatically configured if the {@link #itemTpl} config is used.\r
     * \r
     *     new Ext.view.View({\r
     *         renderTo: Ext.getBody(),\r
     *         store: {\r
     *             fields: ['name'],\r
     *             data: [\r
     *                 {name: 'Item 1'},\r
     *                 {name: 'Item 2'}\r
     *             ]\r
     *         },\r
     *         tpl: [\r
     *             '<ul>',\r
     *             '<tpl for=".">',\r
     *                 '<li>{name}</li>',\r
     *             '</tpl>',\r
     *             '</ul>'\r
     *         ],\r
     *         // Match the li, since each one maps to a record\r
     *         itemSelector: 'li'\r
     *     });\r
     * \r
     * @since 2.3.0\r
     */\r
\r
    /**\r
     * @cfg {String} itemCls\r
     * Specifies the class to be assigned to each element in the view when used in conjunction with the\r
     * {@link #itemTpl} configuration.\r
     * @since 2.3.0\r
     */\r
    itemCls: Ext.baseCSSPrefix + 'dataview-item',\r
\r
    /**\r
     * @cfg {String/String[]/Ext.XTemplate} itemTpl\r
     * The inner portion of the item template to be rendered. Follows an XTemplate\r
     * structure and will be placed inside of a tpl.\r
     */\r
\r
    /**\r
     * @cfg {String} overItemCls\r
     * A CSS class to apply to each item in the view on mouseover.\r
     * Setting this will automatically set {@link #trackOver} to `true`.\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} loadingText\r
     * A string to display during data load operations.  If specified, this text will be\r
     * displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's\r
     * contents will continue to display normally until the new data is loaded and the contents are replaced.\r
     * @since 2.3.0\r
     */\r
    loadingText: 'Loading...',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Boolean/Object} loadMask\r
     * False to disable a load mask from displaying while the view is loading. This can also be a\r
     * {@link Ext.LoadMask} configuration object.\r
     */\r
    loadMask: true,\r
\r
    /**\r
     * @cfg {String} loadingCls\r
     * The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls "x-mask-loading".\r
     */\r
\r
    /**\r
     * @cfg {Boolean} loadingUseMsg\r
     * Whether or not to use the loading message.\r
     * @private\r
     */\r
    loadingUseMsg: true,\r
\r
\r
    /**\r
     * @cfg {Number} loadingHeight\r
     * If specified, gives an explicit height for the data view when it is showing the {@link #loadingText},\r
     * if that is specified. This is useful to prevent the view's height from collapsing to zero when the\r
     * loading mask is applied and there are no other contents in the data view.\r
     */\r
\r
    /**\r
     * @cfg {String} selectedItemCls\r
     * A CSS class to apply to each selected item in the view.\r
     */\r
    selectedItemCls: Ext.baseCSSPrefix + 'item-selected',\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} emptyText\r
     * The text to display in the view when there is no data to display.\r
     * Note that when using local data the emptyText will not be displayed unless you set\r
     * the {@link #deferEmptyText} option to false.\r
     * @since 2.3.0\r
     */\r
    emptyText: "",\r
    //</locale>\r
\r
    /**\r
     * @cfg {Boolean} deferEmptyText\r
     * True to defer emptyText being applied until the store's first load.\r
     * @since 2.3.0\r
     */\r
    deferEmptyText: true,\r
\r
    /**\r
     * @cfg {Boolean} trackOver\r
     * When `true` the {@link #overItemCls} will be applied to items when hovered over.\r
     * This in return will also cause {@link Ext.view.View#highlightitem highlightitem} and\r
     * {@link Ext.view.View#unhighlightitem unhighlightitem} events to be fired.\r
     *\r
     * Enabled automatically when the {@link #overItemCls} config is set.\r
     *\r
     * @since 2.3.0\r
     */\r
    trackOver: false,\r
\r
    /**\r
     * @cfg {Boolean} blockRefresh\r
     * Set this to true to ignore refresh events on the bound store. This is useful if\r
     * you wish to provide custom transition animations via a plugin\r
     * @since 3.4.0\r
     */\r
    blockRefresh: false,\r
\r
    /**\r
     * @cfg {Boolean} [disableSelection=false]\r
     * True to disable selection within the DataView. This configuration will lock the selection model\r
     * that the DataView uses.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} preserveScrollOnRefresh\r
     * True to preserve scroll position across refresh operations.\r
     */\r
    preserveScrollOnRefresh: false,\r
\r
    /**\r
     * @cfg {Boolean} [preserveScrollOnReload=false]\r
     * True to preserve scroll position when the store is reloaded.\r
     *\r
     * You may want to configure this as `true` if you are using a {@link Ext.data.BufferedStore buffered store}\r
     * and you require refreshes of the client side data state not to disturb the state of the UI.\r
     *\r
     * @since 5.1.1\r
     */\r
    preserveScrollOnReload: false,\r
\r
    ariaRole: 'listbox',\r
    itemAriaRole: 'option',\r
\r
    /**\r
     * @private\r
     */\r
    last: false,\r
    focusable: true,\r
    tabIndex: 0,\r
\r
    triggerEvent: 'itemclick',\r
    triggerCtEvent: 'containerclick',\r
\r
    // Starts as true by default so that pn the leading edge of the first layout a refresh will be triggered.\r
    // A refresh opereration sets this flag to false.\r
    // When a refresh is requested using refreshView, the request may be deferred because of hidden or collapsed state.\r
    // This is done by setting the refreshNeeded flag to true, and the the next layout will trigger  refresh.\r
    refreshNeeded: true,\r
\r
    updateSuspendCounter: 0,\r
\r
    addCmpEvents: Ext.emptyFn,\r
\r
    /**\r
     * @event beforerefresh\r
     * Fires before the view is refreshed\r
     * @param {Ext.view.View} this The DataView object\r
     */\r
\r
    /**\r
     * @event refresh\r
     * Fires when the view is refreshed\r
     * @param {Ext.view.View} this The DataView object\r
     */\r
\r
    /**\r
     * @event viewready\r
     * Fires when the View's item elements representing Store items has been rendered. No items will be available\r
     * for selection until this event fires.\r
     * @param {Ext.view.View} this\r
     */\r
\r
    /**\r
     * @event itemupdate\r
     * Fires when the node associated with an individual record is updated\r
     * @param {Ext.data.Model} record The model instance\r
     * @param {Number} index The index of the record\r
     * @param {HTMLElement} node The node that has just been updated\r
     */\r
\r
    /**\r
     * @event itemadd\r
     * Fires when the nodes associated with an recordset have been added to the underlying store\r
     * @param {Ext.data.Model[]} records The model instance\r
     * @param {Number} index The index at which the set of records was inserted\r
     * @param {HTMLElement[]} node The node that has just been updated\r
     */\r
\r
    /**\r
     * @event itemremove\r
     * Fires when the node associated with an individual record is removed\r
     * @param {Ext.data.Model[]} records The model instances removed\r
     * @param {Number} index The index from which the records wer removed\r
     * @param {HTMLElement[]} item The view items removed\r
     * @param {Ext.view.View} view The view removing the item\r
     */\r
\r
    constructor: function(config) {\r
        if (config && config.selModel) {\r
            config.selectionModel = config.selModel;\r
        }\r
        this.callParent([config]);\r
    },\r
\r
    initComponent: function(){\r
        var me = this,\r
            isDef = Ext.isDefined,\r
            itemTpl = me.itemTpl,\r
            memberFn = {},\r
            store;\r
\r
        if (itemTpl) {\r
            if (Ext.isArray(itemTpl)) {\r
                // string array\r
                if (typeof itemTpl[itemTpl.length - 1] !== 'string') {\r
                    itemTpl = itemTpl.slice(0);\r
                    memberFn = itemTpl.pop();\r
                }\r
                itemTpl = itemTpl.join('');\r
            } else if (Ext.isObject(itemTpl)) {\r
                // tpl instance\r
                memberFn = Ext.apply(memberFn, itemTpl.initialConfig);\r
                itemTpl = itemTpl.html;\r
            }\r
\r
            if (!me.itemSelector) {\r
                me.itemSelector = '.' + me.itemCls;\r
            }\r
\r
            itemTpl = Ext.String.format('<tpl for="."><div class="{0}" role="{2}">{1}</div></tpl>', me.itemCls, itemTpl, me.itemAriaRole);\r
            me.tpl = new Ext.XTemplate(itemTpl, memberFn);\r
        }\r
\r
        //<debug>\r
        if (!isDef(me.tpl) || !isDef(me.itemSelector)) {\r
            Ext.raise({\r
                sourceClass: 'Ext.view.View',\r
                tpl: me.tpl,\r
                itemSelector: me.itemSelector,\r
                msg: "DataView requires both tpl and itemSelector configurations to be defined."\r
            });\r
        }\r
        //</debug>\r
\r
        me.callParent();\r
        me.tpl = me.getTpl('tpl');\r
\r
        //<debug>\r
        // backwards compat alias for overClass/selectedClass\r
        // TODO: Consider support for overCls generation Ext.Component config\r
        if (isDef(me.overCls) || isDef(me.overClass)) {\r
            if (Ext.isDefined(Ext.global.console)) {\r
                Ext.global.console.warn('Ext.view.View: Using the deprecated overCls or overClass configuration. Use overItemCls instead.');\r
            }\r
            me.overItemCls = me.overCls || me.overClass;\r
            delete me.overCls;\r
            delete me.overClass;\r
        }\r
\r
        if (isDef(me.selectedCls) || isDef(me.selectedClass)) {\r
            if (Ext.isDefined(Ext.global.console)) {\r
                Ext.global.console.warn('Ext.view.View: Using the deprecated selectedCls or selectedClass configuration. Use selectedItemCls instead.');\r
            }\r
            me.selectedItemCls = me.selectedCls || me.selectedClass;\r
            delete me.selectedCls;\r
            delete me.selectedClass;\r
        }\r
        //</debug>\r
\r
        if (me.overItemCls) {\r
            me.trackOver = true;\r
        }\r
\r
        me.addCmpEvents();\r
\r
        // Look up the configured Store. If none configured, use the fieldless, empty Store defined in Ext.data.Store.\r
        store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');\r
\r
        // Use the provided store as the data source unless a Feature or plugin has injected a special one\r
        if (!me.dataSource) {\r
            me.dataSource = store;\r
        }\r
\r
        me.bindStore(store, true);\r
\r
        // Must exist before the selection model.\r
        // Selection model listens to this for navigation events.\r
        me.getNavigationModel().bindComponent(this);\r
\r
        if (!me.all) {\r
            me.all = new Ext.CompositeElementLite();\r
        }\r
\r
        // We track the scroll position\r
        me.scrollState = {\r
            top: 0,\r
            left: 0\r
        };\r
\r
        me.savedTabIndexAttribute = 'data-savedtabindex-' + me.id;\r
    },\r
\r
    getElConfig: function() {\r
        var result = this.mixins.renderable.getElConfig.call(this);\r
\r
        // Subclasses may set focusable to false (BoundList is not focusable)\r
        if (this.focusable) {\r
            result.tabIndex = 0;\r
        }\r
        return result;\r
    },\r
\r
    onRender: function() {\r
        var mask = this.loadMask;\r
\r
        this.callParent(arguments);\r
        if (mask) {\r
            this.createMask(mask);\r
        }\r
    },\r
\r
    beforeLayout: function() {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        // If a refresh is needed, just before the layout is the time to apply it.\r
        // If there is a deferred refresh timer running, allow that to do the refresh.\r
        if (me.refreshNeeded && !me.pendingRefresh) {\r
            // If we have refreshed before, just call a refresh now.\r
            if (me.refreshCounter) {\r
                me.refresh();\r
            }\r
            else {\r
                me.doFirstRefresh(me.dataSource);\r
            }\r
        }\r
    },\r
\r
    onMaskBeforeShow: function(){\r
        var me = this,\r
            loadingHeight = me.loadingHeight;\r
\r
        if (loadingHeight && loadingHeight > me.getHeight()) {\r
            me.hasLoadingHeight = true;\r
            me.oldMinHeight = me.minHeight;\r
            me.minHeight = loadingHeight;\r
            me.updateLayout();\r
        }\r
    },\r
\r
    onMaskHide: function(){\r
        var me = this;\r
\r
        if (!me.destroying && me.hasLoadingHeight) {\r
            me.minHeight = me.oldMinHeight;\r
            me.updateLayout();\r
            delete me.hasLoadingHeight;\r
        }\r
    },\r
\r
    beforeRender: function() {\r
        this.callParent(arguments);\r
        this.getSelectionModel().beforeViewRender(this);\r
    },\r
\r
    afterRender: function() {\r
        this.callParent(arguments);\r
\r
        // Subclasses may set focusable to false.\r
        // BoundList is not focusable.\r
        // BoundList processes key events from its boundField.\r
        if (this.focusable) {\r
            this.focusEl = this.el;\r
        }\r
    },\r
\r
    getRefItems: function() {\r
        var mask = this.loadMask,\r
            result = [];\r
\r
        if (mask && mask.isComponent) {\r
            result.push(mask);\r
        }\r
        return result;\r
    },\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
    applySelectionModel: function(selModel, oldSelModel) { \r
        var me = this,\r
            grid = me.grid,\r
            mode, ariaAttr, ariaDom;\r
\r
        if (oldSelModel) {\r
            oldSelModel.un({\r
                scope: me,\r
                selectionchange: me.updateBindSelection,\r
                lastselectedchanged: me.updateBindSelection,\r
                select: me.ariaSelect,\r
                deselect: me.ariaDeselect\r
            });\r
            \r
            Ext.destroy(me.selModelRelayer);\r
            selModel = Ext.Factory.selection(selModel);\r
        }\r
        // If this is the initial configuration, pull overriding configs in from this view\r
        else {\r
            if (selModel && selModel.isSelectionModel) {\r
                selModel.locked = me.disableSelection;\r
            } else {\r
                if (me.simpleSelect) {\r
                    mode = 'SIMPLE';\r
                } else if (me.multiSelect) {\r
                    mode = 'MULTI';\r
                } else {\r
                    mode = 'SINGLE';\r
                }\r
\r
                if (typeof selModel === 'string') {\r
                    selModel = {\r
                        type: selModel\r
                    };\r
                }\r
                selModel = Ext.Factory.selection(Ext.apply({\r
                    allowDeselect: me.allowDeselect || me.multiSelect,\r
                    mode: mode,\r
                    locked: me.disableSelection\r
                }, selModel));\r
            }\r
        }\r
        \r
        // Grids should have aria-multiselectable on their ariaEl instead\r
        if (selModel.mode !== 'SINGLE') {\r
            ariaDom = (grid || me).ariaEl.dom;\r
            \r
            if (ariaDom) {\r
                ariaDom.setAttribute('aria-multiselectable', true);\r
            }\r
            else if (!grid) {\r
                ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});\r
                ariaAttr['aria-multiselectable'] = true;\r
            }\r
        }\r
\r
        me.selModelRelayer = me.relayEvents(selModel, [\r
            'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect', 'focuschange'\r
        ]);\r
        \r
        selModel.on({\r
            scope: me,\r
            lastselectedchanged: me.updateBindSelection,\r
            selectionchange: me.updateBindSelection,\r
            select: me.ariaSelect,\r
            deselect: me.ariaDeselect\r
        });\r
\r
        return selModel;\r
    },\r
\r
    updateSelectionModel: function(selectionModel) {\r
        // Keep the legacy property correct\r
        this.selModel = selectionModel;\r
    },\r
\r
    applyNavigationModel: function (navigationModel) {\r
        return Ext.Factory.viewNavigation(navigationModel);\r
    },\r
\r
    onFocusEnter: function(e) {\r
        var me = this,\r
            navigationModel = me.getNavigationModel(),\r
            focusPosition;\r
\r
        // Disable tabbability of elements within this view.\r
        me.toggleChildrenTabbability(false);\r
        \r
        if (!me.itemFocused && me.all.getCount()) {\r
            focusPosition = navigationModel.getLastFocused();\r
            navigationModel.setPosition(focusPosition || 0, e.event, null, !focusPosition);\r
\r
            // We now contain focus is that was successful\r
            me.itemFocused = navigationModel.getPosition() != null;\r
        }\r
        \r
        // View's main el should be kept untabbable, otherwise pressing\r
        // Shift-Tab key in the view would move the focus to the main el\r
        // which will then bounce it back to the last focused item.\r
        // That would effectively make Shift-Tab unusable.\r
        if (me.itemFocused) {\r
            this.el.dom.setAttribute('tabIndex', '-1');\r
        }\r
\r
        me.callParent([e]);\r
    },\r
\r
    onFocusLeave: function(e) {\r
        var me = this;\r
\r
        // Ignore this event if we do not actually contain focus,\r
        // or if the reason for focus exiting was that we are refreshing.\r
        if (me.itemFocused && !me.refreshing) {\r
\r
            // Blur the focused cell\r
            me.getNavigationModel().setPosition(null, e.event, null, true);\r
\r
            me.itemFocused = false;\r
            me.el.dom.setAttribute('tabIndex', 0);\r
        }\r
\r
        me.callParent([e]);\r
    },\r
    \r
    ariaSelect: function(selModel, record) {\r
        var node = this.getNode(record);\r
        \r
        if (node) {\r
            node.setAttribute('aria-selected', true);\r
        }\r
    },\r
    \r
    ariaDeselect: function(selModel, record) {\r
        var node = this.getNode(record);\r
        \r
        if (node) {\r
            node.removeAttribute('aria-selected');\r
        }\r
    },\r
\r
    onRemoved: function(isDestroying) {\r
        this.callParent([isDestroying]);\r
\r
        // IE does not fire focusleave on removal from DOM\r
        if (!isDestroying) {\r
            this.onFocusLeave({});\r
        }\r
    },\r
    \r
    /**\r
     * Refreshes the view by reloading the data from the store and re-rendering the template.\r
     * @since 2.3.0\r
     */\r
    refresh: function() {\r
        var me = this,\r
            items = me.all,\r
            prevItemCount = items.getCount(),\r
            refreshCounter = me.refreshCounter,\r
            targetEl,\r
            dom,\r
            records,\r
            selModel = me.getSelectionModel(),\r
            restoreFocus,\r
            // If there are items in the view, then honour preserveScrollOnRefresh\r
            scroller = refreshCounter && items.getCount() && me.preserveScrollOnRefresh && me.getScrollable(),\r
            scrollPos;\r
\r
        if (!me.rendered || me.destroyed) {\r
            return;\r
        }\r
\r
        if (!me.hasListeners.beforerefresh || me.fireEvent('beforerefresh', me) !== false) {\r
\r
            // So that listeners to itemremove events know that its because of a refresh\r
            me.refreshing = true;\r
\r
            // If focus was in this view, this will restore it\r
            restoreFocus = me.saveFocusState();\r
\r
            targetEl = me.getTargetEl();\r
            records = me.getViewRange();\r
            dom = targetEl.dom;\r
\r
            if (scroller) {\r
                scrollPos = scroller.getPosition();\r
                if (!(scrollPos.x || scrollPos.y)) {\r
                    scrollPos = null;\r
                }\r
            }\r
\r
            if (refreshCounter) {\r
                me.clearViewEl();\r
                me.refreshCounter++;\r
            } else {\r
                me.refreshCounter = 1;\r
            }\r
\r
            // Usually, for an empty record set, this would be blank, but when the Template\r
            // Creates markup outside of the record loop, this must still be honoured even if there are no\r
            // records.\r
            me.tpl.append(targetEl, me.collectData(records, items.startIndex || 0));\r
\r
            // The emptyText is now appended to the View's element\r
            // after nodes outside the tpl block.\r
            if (records.length < 1) {\r
                // Process empty text unless the store is being cleared.\r
                me.addEmptyText();\r
                items.clear();\r
            } else {\r
                me.collectNodes(targetEl.dom);\r
                me.updateIndexes(0);\r
            }\r
\r
            // If focus was in any way in this view, this will restore it\r
            restoreFocus();\r
\r
            // Some subclasses do not need to do this. TableView does not need to do this - it renders selected class using its tenmplate.\r
            if (me.refreshSelmodelOnRefresh !== false) {\r
                selModel.refresh();\r
            }\r
\r
            me.refreshNeeded = false;\r
\r
            // Ensure layout system knows about new content size.\r
            // If number of items have changed, force a layout.\r
            me.refreshSize(items.getCount() !== prevItemCount);\r
\r
            me.fireEvent('refresh', me, records);\r
\r
            if (scroller) {\r
                scroller.scrollTo(scrollPos);\r
            }\r
\r
            // Upon first refresh, fire the viewready event.\r
            // Reconfiguring the grid "renews" this event.\r
            if (!me.viewReady) {\r
                // Fire an event when deferred content becomes available.\r
                me.viewReady = true;\r
                me.fireEvent('viewready', me);\r
            }\r
            \r
            me.refreshing = false;\r
            me.refreshScroll();\r
            \r
            me.cleanupData();\r
        }\r
    },\r
\r
    addEmptyText: function() {       \r
        var me = this,\r
            store = me.getStore();\r
\r
        if (me.emptyText && !store.isLoading() && (!me.deferEmptyText || me.refreshCounter > 1 || store.isLoaded())) {\r
            me.emptyEl = Ext.core.DomHelper.insertHtml('beforeEnd', me.getTargetEl().dom, me.emptyText);\r
        }\r
    },\r
\r
    getViewRange: function() {\r
        return this.dataSource.getRange();\r
    },\r
\r
    /**\r
     * @private\r
     * Called by the framework when the view is refreshed, or when rows are added or deleted.\r
     *\r
     * These operations may cause the view's dimensions to change, and if the owning container\r
     * is shrinkwrapping this view, then the layout must be updated to accommodate these new dimensions.\r
     */\r
    refreshSize: function(forceLayout) {\r
        var me = this,\r
            sizeModel = me.getSizeModel(),\r
            scroller = me.getScrollable();\r
\r
        if (sizeModel.height.shrinkWrap || sizeModel.width.shrinkWrap || forceLayout) {\r
            me.updateLayout();\r
        }\r
\r
        // We need to refresh the Scroller (BufferedRenderer has to do this if present).\r
        // But the first refresh takes place on the leading edge of the first layout\r
        // before the Scroller has been initialized, so do it as soon\r
        // as we reach boxready.\r
        else if (me.touchScroll && !me.bufferedRenderer) {\r
            if (scroller) {\r
                scroller.refresh();\r
            } else {\r
                me.on({\r
                    boxready: me.refreshScroll,\r
                    scope: me,\r
                    single: true\r
                });\r
            }\r
        }\r
    },\r
\r
    afterFirstLayout: function(width, height) {\r
        var me = this,\r
            scroller = me.getScrollable();\r
\r
        if (scroller) {\r
            scroller.on({\r
                scroll: me.onViewScroll,\r
                scrollend: me.onViewScrollEnd,\r
                scope: me,\r
                onFrame: !!Ext.global.requestAnimationFrame\r
            });\r
        }\r
        me.callParent([width, height]);\r
    },\r
\r
    clearViewEl: function() {\r
        var me = this,\r
            targetEl = me.getTargetEl(),\r
            nodeContainerIsTarget = me.getNodeContainer() === targetEl;\r
\r
        me.clearEmptyEl();\r
        // If nodeContainer is the el, just clear the innerHTML. Otherwise, we need\r
        // to manually remove each node we know about.\r
        me.all.clear(!nodeContainerIsTarget);\r
        if (nodeContainerIsTarget) {\r
            targetEl.dom.innerHTML = '';\r
        }\r
    },\r
\r
    clearEmptyEl: function() {\r
        var emptyEl = this.emptyEl;\r
\r
        // emptyEl is likely to be a TextNode if emptyText is not HTML code.\r
        // Use native DOM to remove it.\r
        if (emptyEl) {\r
            Ext.removeNode(emptyEl);\r
        }\r
        this.emptyEl = null;\r
    },\r
\r
    onViewScroll: function(scroller, x, y) {\r
        this.fireEvent('scroll', this, x, y);\r
    },\r
\r
    onViewScrollEnd: function(scroller, x, y) {\r
        this.fireEvent('scrollend', this, x, y);\r
    },\r
\r
    /**\r
     * Saves the scrollState in a private variable. Must be used in conjunction with restoreScrollState.\r
     * @private\r
     */\r
    saveScrollState: function() {\r
        var me = this,\r
            state = me.scrollState;\r
\r
        if (me.rendered) {\r
            state.left = me.getScrollX();\r
            state.top = me.getScrollY();\r
        }\r
    },\r
\r
    /**\r
     * Restores the scrollState.\r
     * Must be used in conjunction with saveScrollState\r
     * @private\r
     */\r
    restoreScrollState: function() {\r
        var me = this,\r
            state = me.scrollState;\r
\r
        if (me.rendered) {\r
            me.setScrollX(state.left);\r
            me.setScrollY(state.top);\r
        }\r
    },\r
\r
    /**\r
     * Function which can be overridden to provide custom formatting for each Record that is used by this\r
     * DataView's {@link #tpl template} to render each node.\r
     * @param {Object/Object[]} data The raw data object that was used to create the Record.\r
     * @param {Number} recordIndex the index number of the Record being prepared for rendering.\r
     * @param {Ext.data.Model} record The Record being prepared for rendering.\r
     * @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method.\r
     * (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}))\r
     * @since 2.3.0\r
     */\r
    prepareData: function(data, index, record) {\r
        var associatedData, attr, hasCopied;\r
        if (record) {\r
            associatedData = record.getAssociatedData();\r
            for (attr in associatedData) {\r
                if (associatedData.hasOwnProperty(attr)) {\r
                    // This would be better done in collectData, however\r
                    // we only need to copy the data object if we have any associations,\r
                    // so we optimize it by only copying if we must.\r
                    // We do this so we don't mutate the underlying record.data\r
                    if (!hasCopied) {\r
                        data = Ext.Object.chain(data);\r
                        hasCopied = true;\r
                    }\r
                    data[attr] = associatedData[attr];\r
                }\r
            }\r
        }\r
        return data;\r
    },\r
\r
    /**\r
     * Function which can be overridden which returns the data object passed to this\r
     * DataView's {@link #cfg-tpl template} to render the whole DataView.\r
     *\r
     * This is usually an Array of data objects, each element of which is processed by an\r
     * {@link Ext.XTemplate XTemplate} which uses `'&lt;tpl for="."&gt;'` to iterate over its supplied\r
     * data object as an Array. However, <i>named</i> properties may be placed into the data object to\r
     * provide non-repeating data such as headings, totals etc.\r
     *\r
     * @param {Ext.data.Model[]} records An Array of {@link Ext.data.Model}s to be rendered into the DataView.\r
     * @param {Number} startIndex the index number of the Record being prepared for rendering.\r
     * @return {Object[]} An Array of data objects to be processed by a repeating XTemplate. May also\r
     * contain <i>named</i> properties.\r
     * @since 2.3.0\r
     */\r
    collectData: function(records, startIndex){\r
        var data = [],\r
            i = 0,\r
            len = records.length,\r
            record;\r
\r
        for (; i < len; i++) {\r
            record = records[i];\r
            data[i] = this.prepareData(record.data, startIndex + i, record);\r
        }\r
        return data;\r
    },\r
    \r
    cleanupData: Ext.emptyFn,\r
\r
    bufferRender: function(records, index) {\r
        var me = this,\r
            div = me.renderBuffer,\r
            result = document.createDocumentFragment(),\r
            nodes, len, i;\r
\r
        me.tpl.overwrite(div, me.collectData(records, index));\r
        nodes = Ext.fly(div).query(me.getItemSelector());\r
        for (i = 0, len = nodes.length; i < len; i++) {\r
            result.appendChild(nodes[i]);\r
        }\r
        return {\r
            fragment: result,\r
            children: nodes\r
        };\r
    },\r
\r
    // Element which contains rows\r
    nodeContainerSelector: null,\r
\r
    getNodeContainer: function() {\r
        var target = this.getTargetEl(),\r
            selector = this.nodeContainerSelector;\r
        return selector ? target.down(selector, true) : target;\r
    },\r
\r
    /**\r
     * Returns a CSS selector which selects the element which contains record nodes.\r
     */\r
    getNodeContainerSelector: function() {\r
        return this.nodeContainerSelector;\r
    },\r
\r
    onUpdate: function(store, record, operation, modifiedFieldNames, details) {\r
        var me = this,\r
            isFiltered = details && details.filtered;\r
\r
        // If, due to filtering or buffered rendering, or node collapse, the updated record is not\r
        // represented in the rendered structure, this is a no-op.\r
        // The correct, new values will be rendered the next time the record becomes visible and is rendered.\r
        if (!isFiltered && me.getNode(record)) {\r
\r
            // If we are throttling UI updates (See the updateDelay global config), ensure there's a change entry\r
            // queued for the record in the global queue.\r
            if (me.throttledUpdate) {\r
                me.statics().queueRecordChange(me, store, record, operation, modifiedFieldNames);\r
            } else {\r
                me.handleUpdate.apply(me, arguments);\r
            }\r
        }\r
    },\r
\r
    handleUpdate: function(store, record){\r
        var me = this,\r
            index,\r
            node,\r
            selModel = me.getSelectionModel();\r
\r
        if (me.viewReady) {\r
            index = me.dataSource.indexOf(record);\r
\r
            // If the record has been removed from the data source since the changes were made, do nothing\r
            if (index > -1) {\r
                // ensure the node actually exists in the DOM\r
                if (me.getNode(record)) {\r
                    node = me.bufferRender([record], index).children[0];\r
                    me.all.replaceElement(index, node, true);\r
                    me.updateIndexes(index, index);\r
                    // Maintain selection after update\r
                    selModel.onUpdate(record);\r
                    me.refreshSizePending = true;\r
                    if (selModel.isSelected(record)) {\r
                        me.onItemSelect(record);\r
                    }\r
                    if (me.hasListeners.itemupdate) {\r
                        me.fireEvent('itemupdate', record, index, node);\r
                    }\r
                    return node;\r
                }\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Respond to store replace event which is fired by GroupStore group expand/collapse operations.\r
     * This saves a layout because a remove and add operation are coalesced in this operation.\r
     */\r
    onReplace: function(store, startIndex, oldRecords, newRecords) {\r
        var me = this,\r
            all = me.all,\r
            selModel = me.getSelectionModel(),\r
            origStart = startIndex,\r
            result, item, fragment, children, oldItems, endIndex, restoreFocus;\r
\r
        if (me.rendered) {\r
            // Insert the new items before the remove block\r
            result = me.bufferRender(newRecords, startIndex, true);\r
            fragment = result.fragment;\r
            children = result.children;\r
            item = all.item(startIndex);\r
\r
            if (item) {\r
                all.item(startIndex).insertSibling(fragment, 'before', true);\r
            } else {\r
                me.appendNodes(fragment);\r
            }\r
\r
            all.insert(startIndex, children);\r
\r
            if (oldRecords.length) {\r
                // If focus was in the view, this will return\r
                // a function which will restore that state.\r
                // If not, a function which does nothing.\r
                restoreFocus = me.saveFocusState();\r
            }\r
\r
            startIndex += newRecords.length;\r
            endIndex = startIndex + oldRecords.length - 1;\r
\r
            // Remove the items which correspond to old records\r
            oldItems = all.removeRange(startIndex, endIndex, true);\r
\r
            // Some subclasses do not need to do this. TableView does not need to do this.\r
            if (me.refreshSelmodelOnRefresh !== false) {\r
                selModel.refresh();\r
            }\r
\r
            // Update the row indices (TableView) doesn't do this.\r
            me.updateIndexes(startIndex);\r
\r
            if (me.hasListeners.itemremove) {\r
                me.fireEvent('itemremove', oldRecords, origStart, oldItems, me);\r
            }\r
\r
            if (me.hasListeners.itemadd) {\r
                me.fireEvent('itemadd', newRecords, origStart, children);\r
            }\r
\r
            // If focus was in this view, this will restore it\r
            restoreFocus();\r
\r
            me.refreshSize();\r
        }\r
    },\r
\r
    onAdd: function(store, records, index) {\r
        var me = this,\r
            nodes,\r
            selModel = me.getSelectionModel();\r
\r
        if (me.rendered) {\r
            // If we are adding into an empty view, we must refresh in order that the *full tpl* is applied\r
            // which might create boilerplate content *around* the record nodes.\r
            if (me.all.getCount() === 0) {\r
                me.refresh();\r
                nodes = me.all.slice();\r
            } else {\r
                nodes = me.doAdd(records, index);\r
                // Some subclasses do not need to do this. TableView does not need to do this.\r
                if (me.refreshSelmodelOnRefresh !== false) {\r
                    selModel.refresh();\r
                }\r
                me.updateIndexes(index);\r
\r
                // Ensure layout system knows about new content size\r
                me.refreshSizePending = true;\r
            }\r
\r
            if (me.hasListeners.itemadd) {\r
                me.fireEvent('itemadd', records, index, nodes);\r
            }\r
        }\r
\r
    },\r
    \r
    appendNodes: function(nodes) {\r
        var all = this.all,\r
            count = all.getCount();\r
\r
        if (this.nodeContainerSelector) {\r
            this.getNodeContainer().appendChild(nodes);\r
        } else {\r
            // If we don't have a nodeContainerSelector, we may have our\r
            // itemSelector nodes wrapped in some other container, so we\r
            // can't just append them to the node container, it may be the wrong element\r
            all.item(count - 1).insertSibling(nodes, 'after');\r
        }\r
    },\r
\r
    doAdd: function(records, index) {\r
        var me = this,\r
            result = me.bufferRender(records, index, true),\r
            fragment = result.fragment,\r
            children = result.children,\r
            all = me.all,\r
            count = all.getCount(),\r
            firstRowIndex = all.startIndex || 0,\r
\r
            lastRowIndex = all.endIndex || count - 1;\r
\r
        if (count === 0 || index > lastRowIndex) {\r
            me.appendNodes(fragment);\r
        } else if (index <= firstRowIndex) {\r
            all.item(firstRowIndex).insertSibling(fragment, 'before', true);\r
        } else {\r
            all.item(index).insertSibling(children, 'before', true);\r
        }\r
\r
        all.insert(index, children);\r
        return children;\r
    },\r
\r
    onRemove: function(store, records, index) {\r
        var me = this,\r
            rows = me.all,\r
            fireItemRemove = me.hasListeners.itemremove,\r
            currIdx, i, record, nodes, node, restoreFocus;\r
\r
        if (rows.getCount()) {\r
            if (me.dataSource.getCount() === 0) {\r
                // Refresh so emptyText can be applied if necessary\r
                if (fireItemRemove) {\r
                    me.fireEvent('itemremove', records, index, me.getNodes(index, index + records.length - 1));\r
                }\r
                me.refresh();\r
            } else {\r
                // If this view contains focus, this will return\r
                // a function which will restore that state.\r
                restoreFocus = me.saveFocusState();\r
\r
                // Just remove the elements which corresponds to the removed records\r
                // The tpl's full HTML will still be in place.\r
                if (fireItemRemove) {\r
                    nodes = [];\r
                }\r
                for (i = records.length - 1; i >= 0; --i) {\r
                    record = records[i];\r
                    currIdx = index + i;\r
                    if (nodes) {\r
                        node = rows.item(currIdx);\r
                        nodes[i] = node ? node.dom : undefined;\r
                    }\r
                    \r
                    if (rows.item(currIdx)) {\r
                        me.doRemove(record, currIdx);\r
                    }\r
                }\r
\r
                if (fireItemRemove) {\r
                    me.fireEvent('itemremove', records, index, nodes, me);\r
                }\r
\r
                // If focus was in this view, this will restore it\r
                restoreFocus();\r
                me.updateIndexes(index);\r
            }\r
\r
            // Ensure layout system knows about new content size\r
            me.refreshSizePending = true;\r
        }\r
    },\r
\r
    doRemove: function(record, index) {\r
        this.all.removeElement(index, true);\r
    },\r
    \r
    /**\r
     * @private\r
     * Called prior to an operation which mey remove focus from this view by some kind of DOM operation.\r
     *\r
     * If this view contains focus, this method returns a function which, when called after\r
     * the disruptive DOM operation will restore focus to the same record, or, if the record has\r
     * been removed to the same item index..\r
     *\r
     * @returns {Function} A function that will restore focus if focus was within this view,\r
     * or a function which does nothing is focus is not in this view.\r
     */\r
    saveFocusState: function() {\r
        var me = this,\r
            store = me.dataSource || me.store,\r
            navModel = me.getNavigationModel(),\r
            lastFocusedIndex = navModel.recordIndex,\r
            lastFocusedRec = navModel.record;\r
\r
        // Check if we really have focus.\r
        // Some NavigationModels record position with focus outside of the view.\r
        // This happens in BoundLists when focus stays in the bound field.\r
        if (me.el.contains(Ext.Element.getActiveElement())) {\r
            // Blur the focused descendant, but do not trigger focusLeave.\r
            me.el.dom.focus();\r
\r
            // The following function will attempt to refocus back to the same record if it is still there,\r
            // or the same item index.\r
            return function() {\r
                // If we still have data, attempt to refocus at the same record, or the same item index..\r
                if (store.getCount()) {\r
\r
                    // Adjust expectations of where we are able to refocus according to what kind of destruction\r
                    // might have been wrought on this view's DOM during focus save.\r
                    lastFocusedIndex = Math.min(lastFocusedIndex, me.all.getCount() - 1);\r
                    navModel.setPosition(store.contains(lastFocusedRec) ? lastFocusedRec : lastFocusedIndex, null, null, true);\r
                }\r
            };\r
        }\r
        return Ext.emptyFn;\r
    },\r
\r
    /**\r
     * Refreshes an individual node's data from the store.\r
     * @param {Ext.data.Model/Number} record The record or index of the record to update.\r
     * @since 2.3.0\r
     */\r
    refreshNode: function(record) {\r
        if (Ext.isNumber(record)) {\r
            record = this.store.getAt(record);\r
        }\r
        this.onUpdate(this.dataSource, record);\r
    },\r
\r
    updateIndexes: function(startIndex, endIndex) {\r
        var nodes = this.all.elements,\r
            node,\r
            records = this.getViewRange(),\r
            i,\r
            myId = this.id;\r
\r
        startIndex = startIndex || 0;\r
        endIndex = endIndex || ((endIndex === 0) ? 0 : (nodes.length - 1));\r
        for (i = startIndex; i <= endIndex; i++) {\r
            node = nodes[i];\r
            node.setAttribute('data-recordIndex', i);\r
            node.setAttribute('data-recordId', records[i].internalId);\r
            node.setAttribute('data-boundView', myId);\r
        }\r
    },\r
\r
    /**\r
     * Changes the data store bound to this view and refreshes it.\r
     * @param {Ext.data.Store} store The store to bind to this view\r
     * @since 3.4.0\r
     */\r
    bindStore: function(store, initial) {\r
        var me = this,\r
            selModel = me.getSelectionModel(),\r
            navModel = me.getNavigationModel();\r
\r
        selModel.bindStore(store);\r
        selModel.bindComponent(store ? me : null);\r
        me.mixins.storeholder.bindStore.apply(me, arguments);\r
\r
        // Navigation model must bind to new store\r
        navModel.setStore(store);\r
\r
        // If we have already achieved our first layout, refresh immediately.\r
        // If we bind to the Store before the first layout, then beforeLayout will\r
        // call doFirstRefresh\r
        if (store && me.componentLayoutCounter) {\r
            // If not the initial bind, we enforce noDefer.\r
            me.doFirstRefresh(store, !initial);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Perform the first refresh of the View from a newly bound store.\r
     *\r
     * This is called when this View has been sized for the first time.\r
     */\r
    doFirstRefresh: function(store, noDefer) {\r
        var me = this;\r
\r
        // If we are configured to defer, and *NOT* called from the defer call below\r
        if (me.deferInitialRefresh && !noDefer) {\r
            Ext.defer(me.doFirstRefresh, 1, me, [store, true]);\r
        }\r
\r
        else {\r
            // 4.1.0: If we have a store, and the Store is *NOT* already loading (a refresh is on the way), then\r
            // on first layout, refresh regardless of record count.\r
            // Template may contain boilerplate HTML outside of record iteration loop.\r
            // Also, emptyText is appended by the refresh method.\r
            if (store && !store.isLoading()) {\r
                me.refresh();\r
            }\r
        }\r
    },\r
\r
    onUnbindStore: function(store) {\r
        this.setMaskBind(null);\r
\r
        if (this.dataSource === store) {\r
            this.dataSource = null;\r
        }\r
    },\r
\r
    onBindStore: function(store, oldStore) {\r
        var me = this;\r
\r
        // A BufferedStore has to know to reload the most recent visible zone if its View is preserveScrollOnReload\r
        if (me.store.isBufferedStore) {\r
            me.store.preserveScrollOnReload = me.preserveScrollOnReload;\r
        }\r
        if (oldStore && oldStore.isBufferedStore) {\r
            delete oldStore.preserveScrollOnReload;\r
        }\r
\r
        me.setMaskBind(store);\r
\r
        // When unbinding the data store, the dataSource will be nulled out if it's the same as the data store.\r
        // Restore it here.\r
        if (!me.dataSource) {\r
            me.dataSource = store;\r
        }\r
    },\r
\r
    setMaskBind: function(store) {\r
        var mask = this.loadMask;\r
\r
\r
        if (this.rendered && mask && store && !mask.bindStore) {\r
            mask = this.createMask();\r
        }\r
\r
        if (mask && mask.bindStore) {\r
            mask.bindStore(store);\r
        }\r
    },\r
\r
    getStoreListeners: function() {\r
        var me = this;\r
        return {\r
            refresh: me.onDataRefresh,\r
            replace: me.onReplace,\r
            add: me.onAdd,\r
            remove: me.onRemove,\r
            update: me.onUpdate,\r
            clear: me.onDataRefresh,\r
            beginupdate: me.onBeginUpdate,\r
            endupdate: me.onEndUpdate\r
        };\r
    },\r
\r
    onBeginUpdate: function() {\r
        ++this.updateSuspendCounter;\r
        Ext.suspendLayouts();\r
    },\r
\r
    onEndUpdate: function() {\r
        var me = this;\r
\r
        if (me.updateSuspendCounter) {\r
            --me.updateSuspendCounter;\r
        }\r
        \r
        Ext.resumeLayouts(true);\r
        if (me.refreshSizePending) {\r
            me.refreshSize(true);\r
            me.refreshSizePending = false;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Calls this.refresh if this.blockRefresh is not true\r
     * @since 3.4.0\r
     */\r
    onDataRefresh: function(store) {\r
        var me = this,\r
            preserveScrollOnRefresh = me.preserveScrollOnRefresh;\r
\r
        // If this refresh event is fire from a store load, then use the \r
        // preserveScrollOnReLoad setting to decide whether to preserve scroll position\r
        if (store.loadCount > me.lastRefreshLoadCount) {\r
            me.preserveScrollOnRefresh = me.preserveScrollOnReLoad;\r
        }\r
        me.refreshView();\r
        me.preserveScrollOnRefresh = preserveScrollOnRefresh;\r
        me.lastRefreshLoadCount = store.loadCount;\r
    },\r
\r
    refreshView: function() {\r
        var me = this,\r
            // If we have an ancestor in a non-boxready state (collapsed or in-transition, or hidden), then block the\r
            // refresh because the next layout will trigger the refresh\r
            blocked = me.blockRefresh || !me.rendered || me.up('[collapsed],[isCollapsingOrExpanding],[hidden]');\r
\r
        // If we are blocked in any way due to either a setting, or hidden or collapsed, or animating ancestor, then\r
        // the next refresh attempt at the upcoming layout must not defer.\r
        if (blocked) {\r
            me.refreshNeeded = true;\r
        } else {\r
            if (me.bufferedRenderer) {\r
                me.bufferedRenderer.refreshView();\r
            } else {\r
                me.refresh();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Returns the template node the passed child belongs to, or null if it doesn't belong to one.\r
     * @param {HTMLElement} node\r
     * @return {HTMLElement} The template node\r
     */\r
    findItemByChild: function(node){\r
        return Ext.fly(node).findParent(this.getItemSelector(), this.getTargetEl());\r
    },\r
\r
    /**\r
     * Returns the template node by the Ext.event.Event or null if it is not found.\r
     * @param {Ext.event.Event} e\r
     */\r
    findTargetByEvent: function(e) {\r
        return e.getTarget(this.getItemSelector(), this.getTargetEl());\r
    },\r
\r
\r
    /**\r
     * Gets the currently selected nodes.\r
     * @return {HTMLElement[]} An array of HTMLElements\r
     * @since 2.3.0\r
     */\r
    getSelectedNodes: function(){\r
        var nodes   = [],\r
            records = this.getSelectionModel().getSelection(),\r
            ln = records.length,\r
            i  = 0;\r
\r
        for (; i < ln; i++) {\r
            nodes.push(this.getNode(records[i]));\r
        }\r
\r
        return nodes;\r
    },\r
\r
    /**\r
     * Gets an array of the records from an array of nodes\r
     * @param {HTMLElement[]} nodes The nodes to evaluate\r
     * @return {Ext.data.Model[]} records The {@link Ext.data.Model} objects\r
     * @since 2.3.0\r
     */\r
    getRecords: function(nodes) {\r
        var records = [],\r
            i = 0,\r
            len = nodes.length,\r
            data = this.dataSource.data;\r
\r
        for (; i < len; i++) {\r
            records[records.length] = data.getByKey(nodes[i].getAttribute('data-recordId'));\r
        }\r
\r
        return records;\r
    },\r
\r
    /**\r
     * Gets a record from a node\r
     * @param {Ext.dom.Element/HTMLElement} node The node to evaluate\r
     *\r
     * @return {Ext.data.Model} record The {@link Ext.data.Model} object\r
     * @since 2.3.0\r
     */\r
    getRecord: function(node){\r
        return this.dataSource.getByInternalId(Ext.getDom(node).getAttribute('data-recordId'));\r
    },\r
\r
\r
    /**\r
     * Returns true if the passed node is selected, else false.\r
     * @param {HTMLElement/Number/Ext.data.Model} node The node, node index or record to check\r
     * @return {Boolean} True if selected, else false\r
     * @since 2.3.0\r
     */\r
    isSelected: function(node) {\r
        var r = this.getRecord(node);\r
        return this.getSelectionModel().isSelected(r);\r
    },\r
\r
    /**\r
     * Selects a record instance by record instance or index.\r
     * @param {Ext.data.Model[]/Number} records An array of records or an index\r
     * @param {Boolean} keepExisting\r
     * @param {Boolean} suppressEvent Set to false to not fire a select event\r
     * @deprecated 4.0 Use {@link Ext.selection.Model#select} instead.\r
     * @since 2.3.0\r
     */\r
    select: function(records, keepExisting, suppressEvent) {\r
        this.getSelectionModel().select(records, keepExisting, suppressEvent);\r
    },\r
\r
    /**\r
     * Deselects a record instance by record instance or index.\r
     * @param {Ext.data.Model[]/Number} records An array of records or an index\r
     * @param {Boolean} suppressEvent Set to false to not fire a deselect event\r
     * @since 2.3.0\r
     */\r
    deselect: function(records, suppressEvent) {\r
        this.getSelectionModel().deselect(records, suppressEvent);\r
    },\r
\r
    /**\r
     * Gets a template node.\r
     * @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node, index of a template node,\r
     * the id of a template node or the record associated with the node.\r
     * @return {HTMLElement} The node or null if it wasn't found\r
     * @since 2.3.0\r
     */\r
    getNode: function(nodeInfo) {\r
        var me = this,\r
            out;\r
\r
        if (me.rendered && (nodeInfo || nodeInfo === 0)) {\r
            if (Ext.isString(nodeInfo)) {\r
                // Id\r
                out = document.getElementById(nodeInfo);\r
            } else if (nodeInfo.isModel) {\r
                // Record\r
                out = me.getNodeByRecord(nodeInfo);\r
            } else if (Ext.isNumber(nodeInfo)) {\r
                // Index\r
                out = me.all.elements[nodeInfo];\r
            } else {\r
                if (nodeInfo.target && nodeInfo.target.nodeType) {\r
                    // An event. Check that target is a node: <a target="_blank"> must pass unchanged\r
                    nodeInfo = nodeInfo.target;\r
                }\r
                out = Ext.fly(nodeInfo).findParent(me.itemSelector, me.getTargetEl()); // already an HTMLElement\r
            }\r
        }\r
        return out || null;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    getNodeByRecord: function(record) {\r
        var index = this.store.indexOf(record);\r
        return this.all.elements[index] || null;\r
    },\r
\r
    /**\r
     * Gets a range nodes.\r
     * @param {Number} start (optional) The index of the first node in the range\r
     * @param {Number} end (optional) The index of the last node in the range\r
     * @return {HTMLElement[]} An array of nodes\r
     * @since 2.3.0\r
     */\r
    getNodes: function(start, end) {\r
        var all = this.all;\r
\r
        if (end !== undefined) {\r
            end++;\r
        }\r
        return all.slice(start, end);\r
    },\r
\r
    /**\r
     * Finds the index of the passed node.\r
     * @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node, index of a template node, the id of a template node\r
     * or a record associated with a node.\r
     * @return {Number} The index of the node or -1\r
     * @since 2.3.0\r
     */\r
    indexOf: function(node) {\r
        node = this.getNode(node);\r
        if (!node && node !== 0) {\r
            return -1;\r
        }\r
        if (node.getAttribute('data-recordIndex')) {\r
            return Number(node.getAttribute('data-recordIndex'));\r
        }\r
        return this.all.indexOf(node);\r
    },\r
\r
    onDestroy: function() {\r
        var me = this,\r
            count = me.updateSuspendCounter;\r
\r
        me.all.clear();\r
        me.emptyEl = null;\r
        \r
        me.callParent();\r
        me.bindStore(null);\r
        \r
        me.store = me.dataSource = me.storeListeners = null;\r
        \r
        if (me.selModelRelayer) {\r
            me.selModelRelayer.destroy();\r
            me.selModelRelayer = null;\r
        }\r
        \r
        Ext.destroy(me.navigationModel, me.selectionModel);\r
        me.navigationModel = me.selectionModel = me.selModel = null;\r
        \r
        me.loadMask = null;\r
\r
        // We have been destroyed during a begin/end update, which means we're\r
        // suspending layouts, must forcibly do it here.\r
        while (count--) {\r
            Ext.resumeLayouts(true);\r
        }\r
    },\r
\r
    // invoked by the selection model to maintain visual UI cues\r
    onItemSelect: function(record) {\r
        var node = this.getNode(record);\r
\r
        if (node) {\r
            Ext.fly(node).addCls(this.selectedItemCls);\r
        }\r
    },\r
\r
    // invoked by the selection model to maintain visual UI cues\r
    onItemDeselect: function(record) {\r
        var node = this.getNode(record);\r
\r
        if (node) {\r
            Ext.fly(node).removeCls(this.selectedItemCls);\r
        }\r
    },\r
\r
    getItemSelector: function() {\r
        return this.itemSelector;\r
    },\r
\r
    /**\r
     * Adds a CSS Class to a specific item.\r
     * @param {HTMLElement/String/Number/Ext.data.Model} itemInfo An HTMLElement, index or instance of a model\r
     * representing this item\r
     * @param {String} cls\r
     */\r
    addItemCls: function(itemInfo, cls) {\r
        var item = this.getNode(itemInfo);\r
        if (item) {\r
            Ext.fly(item).addCls(cls);\r
        }\r
    },\r
\r
    /**\r
     * Removes a CSS Class from a specific item.\r
     * @param {HTMLElement/String/Number/Ext.data.Model} itemInfo An HTMLElement, index or instance of a model\r
     * representing this item\r
     * @param {String} cls\r
     */\r
    removeItemCls: function(itemInfo, cls) {\r
        var item = this.getNode(itemInfo);\r
        if (item) {\r
            Ext.fly(item).removeCls(cls);\r
        }\r
    },\r
\r
    setStore: function (newStore) {\r
        // Here we want to override the config system setter because setting the store is a special case\r
        // that the config system wasn't able to handle.\r
        //\r
        // For instance, because `bindStore` is the only API for both binding and unbinding a store, we\r
        // couldn't unbind the old store using the config system because it would simply unbind the new\r
        // store that the setter had just poked onto the instance:\r
        //\r
        //      setStore    -> intance.store = newStore\r
        //      updateStore -> view.unbind(null) (unbinds the newStore)\r
        //\r
        var me = this;\r
\r
        if (me.store !== newStore) {\r
            if (me.isConfiguring) {\r
                me.store = newStore;\r
            } else {\r
                me.bindStore(newStore, /*initial*/ false);\r
            }\r
        }\r
    },\r
\r
    privates: {\r
        toggleChildrenTabbability: function(enableTabbing) {\r
            var focusEl = this.getTargetEl();\r
\r
            if (enableTabbing) {\r
                focusEl.restoreTabbableState(/* skipSelf = */ true);\r
            }\r
            else {\r
                // Do NOT includeSaved\r
                // Once an item has had tabbability saved, do not increment its save level\r
                focusEl.saveTabbableState({\r
                    skipSelf: true,\r
                    includeSaved: false\r
                });\r
            }\r
        },\r
\r
        /**\r
         * @private\r
         * Called by refresh to collect the view item nodes.\r
         */\r
        collectNodes: function(targetEl) {\r
            var all = this.all,\r
                options = {\r
                    role: this.itemAriaRole\r
                };\r
\r
            all.fill(Ext.fly(targetEl).query(this.getItemSelector()), all.startIndex || 0);\r
\r
            // Subclasses may set focusable to false (BoundList is not focusable)\r
            if (this.focusable) {\r
                options.tabindex = '-1';\r
            }\r
            \r
            all.set(options);\r
        },\r
\r
        createMask: function(mask) {\r
            var me = this,\r
                maskStore = me.getStore(),\r
                cfg;\r
\r
            if (maskStore && !maskStore.isEmptyStore && !maskStore.loadsSynchronously()) {\r
                cfg = {\r
                    target: me,\r
                    msg: me.loadingText,\r
                    useMsg: me.loadingUseMsg,\r
                    // The store gets bound in initComponent, so while\r
                    // rendering let's push on the store\r
                    store: maskStore\r
                };\r
                // Do not overwrite default msgCls if we do not have a loadingCls\r
                if (me.loadingCls) {\r
                    cfg.msgCls = me.loadingCls;\r
                }\r
                // either a config object \r
                if (Ext.isObject(mask)) {\r
                    cfg = Ext.apply(cfg, mask);\r
                }\r
                // Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.\r
                // If this DataView is floating, then mask this DataView.\r
                // Otherwise, mask its owning Container (or this, if there *is* no owning Container).\r
                // LoadMask captures the element upon render.\r
                me.loadMask = new Ext.LoadMask(cfg);\r
                me.loadMask.on({\r
                    scope: me,\r
                    beforeshow: me.onMaskBeforeShow,\r
                    hide: me.onMaskHide\r
                });\r
            }\r
            return me.loadMask;\r
        },\r
\r
        getOverflowEl: function() {\r
            // The desired behavior here is just to inherit from the superclass.  However,\r
            // the superclass method calls this.getTargetEl, which sends us into an infinte\r
            // loop because our getTargetEl may call getScrollerEl(), which calls getOverflowEl()\r
            return Ext.Component.prototype.getTargetEl.call(this);\r
        },\r
\r
        getTargetEl: function() {\r
            return this.touchScroll ? this.getScrollerEl() : this.callParent();\r
        }\r
    }\r
}, function() {\r
    // all of this information is available directly\r
    // from the SelectionModel itself, the only added methods\r
    // to DataView regarding selection will perform some transformation/lookup\r
    // between HTMLElement/Nodes to records and vice versa.\r
    Ext.deprecate('extjs', '4.0', function() {\r
        Ext.view.AbstractView.override({\r
            /**\r
             * @cfg {Boolean} [multiSelect=false]\r
             * True to allow selection of more than one item at a time, false to allow selection of only a single item\r
             * at a time or no selection at all, depending on the value of {@link #singleSelect}.\r
             * @deprecated 4.0 Use {@link Ext.selection.Model#mode} 'MULTI' instead.\r
             * @since 2.3.0\r
             */\r
            /**\r
             * @cfg {Boolean} [singleSelect]\r
             * Allows selection of exactly one item at a time. As this is the default selection mode anyway, this config\r
             * is completely ignored.\r
             * @removed 4.0 Use {@link Ext.selection.Model#mode} 'SINGLE' instead.\r
             * @since 2.3.0\r
             */\r
            /**\r
             * @cfg {Boolean} [simpleSelect=false]\r
             * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,\r
             * false to force the user to hold Ctrl or Shift to select more than on item.\r
             * @deprecated 4.0 Use {@link Ext.selection.Model#mode} 'SIMPLE' instead.\r
             * @since 2.3.0\r
             */\r
\r
            /**\r
             * Gets the number of selected nodes.\r
             * @return {Number} The node count\r
             * @deprecated 4.0 Use {@link Ext.selection.Model#getCount} instead.\r
             * @since 2.3.0\r
             */\r
            getSelectionCount: function(){\r
                if (Ext.global.console) {\r
                    Ext.global.console.warn("DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel");\r
                }\r
                return this.selModel.getSelection().length;\r
            },\r
\r
            /**\r
             * Gets an array of the selected records\r
             * @return {Ext.data.Model[]} An array of {@link Ext.data.Model} objects\r
             * @deprecated 4.0 Use {@link Ext.selection.Model#getSelection} instead.\r
             * @since 2.3.0\r
             */\r
            getSelectedRecords: function(){\r
                if (Ext.global.console) {\r
                    Ext.global.console.warn("DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel");\r
                }\r
                return this.selModel.getSelection();\r
            },\r
\r
            // documented above\r
            // @ignore\r
            select: function(records, keepExisting, supressEvents) {\r
                if (Ext.global.console) {\r
                    Ext.global.console.warn("DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()");\r
                }\r
                var sm = this.getSelectionModel();\r
                return sm.select.apply(sm, arguments);\r
            },\r
\r
            /**\r
             * Deselects all selected records.\r
             * @deprecated 4.0 Use {@link Ext.selection.Model#deselectAll} instead.\r
             * @since 2.3.0\r
             */\r
            clearSelections: function() {\r
                if (Ext.global.console) {\r
                    Ext.global.console.warn("DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()");\r
                }\r
                var sm = this.getSelectionModel();\r
                return sm.deselectAll();\r
            }\r
        });\r
    });\r
});\r
\r