/**
 * @class Ext.view.AbstractView
 * This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.
 * @private
 */
Ext.define('Ext.view.AbstractView', {
    extend: 'Ext.Component',
 
    requires: [
        'Ext.LoadMask',
        'Ext.CompositeElementLite',
        'Ext.selection.DataViewModel',
        'Ext.view.NavigationModel',
        'Ext.util.CSS'
    ],
 
    mixins: [
        'Ext.util.StoreHolder'
    ],
 
    isDataView: true,
 
    inheritableStatics: {
        /**
         * @private
         * @static
         * @inheritable
         */
        getRecord: function(node) {
            return this.getBoundView(node).getRecord(node);
        },
 
        /**
         * @private
         * @static
         * @inheritable
         */
        getBoundView: function(node) {
            return Ext.getCmp(node.getAttribute('data-boundView'));
        }
    },
 
    /**
     * @property defaultBindProperty
     * @inheritdoc
     */
    defaultBindProperty: 'store',
 
    /**
     * @private
     * Used for buffered rendering.
     */
    renderBuffer: new Ext.dom.Fly(document.createElement('div')),
 
    statics: {
        /**
         * @prop {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} is being changed rapidly, for example receiving changes
         * from the server through a WebSocket connection.
         *
         * To avoid too-frequent view updates overloading the browser with style recalculation,
         * layout and paint requests, updates can be {@link #throttledUpdate throttled} to 
         * coalesced, and applied at the interval specified in milliseconds.
         *
         * Note that on lower powered devices, updating is throttled to once every second.
         */
        updateDelay: Ext.platformTags.desktop ? 200 : 1000,
 
        queueRecordChange: function(view, store, record, operation, modifiedFieldNames) {
            var me = this,
                changeQueue = me.changeQueue || (me.changeQueue = {}),
                recId = record.internalId,
                recChange,
                updated,
                len, i, fieldName, value,
                checkForReversion;
 
            recChange = changeQueue[recId] || (changeQueue[recId] = {
                operation: operation,
                record: record,
                data: {},
                views: []
            });
 
            // Hash of original values
            updated = recChange.data;
 
            // Make sure this view is among those updated when record changes are flushed
            Ext.Array.include(recChange.views, view);
 
            // Note the following condition tests the result of an assignment statement.
            // If we have been informed that specific fields have changed.
            if (modifiedFieldNames && (len = modifiedFieldNames.length)) {
                for (= 0; i < len; i++) {
                    fieldName = modifiedFieldNames[i];
                    value = record.data[fieldName];
 
                    // More than one update is being performed...
                    if (updated.hasOwnProperty(fieldName)) {
 
                        // If the update is back to the original value,
                        // this may have reverted the record to original state
                        if (record.isEqual(updated[fieldName], value)) {
                            delete updated[fieldName];
                            checkForReversion = true;
                        }
                    }
 
                    // On first update, cache the original value
                    else {
                        updated[fieldName] = value;
                    }
                }
 
                // If the record has been returned to its original state, delete the queue entry.
                // checkForReversion flag saves the expensive (on legacy browsers)
                // call to Ext.Object.getKeys
                if (checkForReversion && !Ext.Object.getKeys(updated).length) {
                    delete changeQueue[recId];
                }
            }
 
            // Unspecified fields have changed. We have to collect the whole data object.
            else {
                Ext.apply(updated, record.data);
            }
 
            // Create a task which will call flushChangeQueue in updateDelay milliseconds
            // from the time it's invoked.
            if (!me.flushQueueTask) {
                me.flushQueueTask = new Ext.util.DelayedTask(
                    Ext.global.requestAnimationFrame
                        ? Ext.Function.createAnimationFrame(me.flushChangeQueue, me)
                        : me.flushChangeQueue.bind(me), me, null, false
                );
            }
 
            if (!me.flushTimer) {
                me.flushTimer = me.flushQueueTask.delay(Ext.view.AbstractView.updateDelay);
            }
        },
 
        /**
        * @private
        * Flushes all queued field updates to the UI.
        *
        * Called in the context of the AbstractView class.
        *
        * The queue is shared across all Views so that there is only one global flush operation.
        */
        flushChangeQueue: function() {
            // Maintainer: Note that "me" references AbstractView class
            var me = this,
                dirtyViews, len, changeQueue, recChange, recId, i, view;
 
            // If there is scrolling going on anywhere, requeue the flush operation ASAP.
            if (Ext.isScrolling) {
                return me.flushTimer = me.flushQueueTask.delay(1);
            }
 
            me.flushTimer = null;
 
            changeQueue = me.changeQueue;
 
            // Empty the view's changeQueue
            me.changeQueue = {};
 
            for (recId in changeQueue) {
                recChange = changeQueue[recId];
                dirtyViews = recChange.views;
                len = dirtyViews.length;
 
                // Loop through all the views which have outstanding changes.
                for (= 0; i < len; i++) {
                    view = dirtyViews[i];
 
                    // View may have been destroyed during the buffered phase.
                    if (!view.destroyed) {
                        view.handleUpdate(
                            view.dataSource, recChange.record, recChange.operation,
                            Ext.Object.getKeys(recChange.data)
                        );
                    }
                }
            }
        }
    },
 
    config: {
        /**
         * @cfg {Ext.data.Store} store
         * The {@link Ext.data.Store} to bind this DataView to.
         * @since 2.3.0
         */
        store: 'ext-empty-store',
 
        // @cmd-auto-dependency { aliasPrefix: 'view.navigation.' }
        /**
         * @private
         * The {@link Ext.view.NavigationModel} [default] alias to use.
         * @since 5.0.1
         */
        navigationModel: {
            type: 'default'
        },
 
        // @cmd-auto-dependency { aliasPrefix: 'selection.' }
        /**
         * @cfg {Object/Ext.selection.DataViewModel} selectionModel
         * The {@link Ext.selection.Model selection model} [dataviewmodel] config or alias to use.
         * @since 5.1.0
         */
        selectionModel: {
            type: 'dataviewmodel'
        }
    },
 
    /**
     * @cfg publishes
     * @inheritdoc
     */
    publishes: ['selection'],
 
    /**
     * @cfg twoWayBindable
     * @inheritdoc
     */
    twoWayBindable: ['selection'],
 
    /**
     * @cfg {Ext.data.Model} selection
     * The selected model. Typically used with {@link #bind binding}.
     */
    selection: null,
 
    /**
     * @cfg {Boolean} throttledUpdate
     * 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 determined by the
     * {@link #updateDelay} setting.
     */
    throttledUpdate: false,
 
    /**
     * @cfg {String/String[]/Ext.XTemplate} tpl (required)
     * The HTML fragment or an array of fragments that will make up the template
     * used by this DataView.  This should be specified in the same format expected by the
     * constructor of {@link Ext.XTemplate}. When a `tpl` is specified, this class assumes that
     * records are rendered in the order they appear in the `{@link #store}`. If a custom `tpl`
     * does not conform to this assumption, index values will be incorrect which may cause the view
     * to misbehave.
     * @since 2.3.0
     */
 
    /**
     * @cfg {Boolean} deferInitialRefresh
     * Configure as 'true` to defer the initial refresh of the view.
     *
     * This allows the View to execute its render and initial layout more quickly because
     * the process will not be encumbered by the update of the view structure.
     */
    deferInitialRefresh: false,
 
    /**
     * @cfg {String} itemSelector (required)
     * <b>This is a required setting</b>. A simple CSS selector (e.g. `div.some-class` or
     * `span:first-child`) that will be used to determine what nodes this DataView will be
     * working with. The itemSelector is used to map DOM nodes to records. As such, there should
     * only be one root level element that matches the selector for each record. The itemSelector
     * will be automatically configured if the {@link #itemTpl} config is used.
     * 
     *     new Ext.view.View({
     *         renderTo: Ext.getBody(),
     *         store: {
     *             fields: ['name'],
     *             data: [
     *                 {name: 'Item 1'},
     *                 {name: 'Item 2'}
     *             ]
     *         },
     *         tpl: [
     *             '<ul>',
     *             '<tpl for=".">',
     *                 '<li>{name}</li>',
     *             '</tpl>',
     *             '</ul>'
     *         ],
     *         // Match the li, since each one maps to a record
     *         itemSelector: 'li'
     *     });
     * 
     * @since 2.3.0
     */
 
    /**
     * @cfg {String} itemCls
     * Specifies the class to be assigned to each element in the view when used in conjunction
     * with the {@link #itemTpl} configuration.
     * @since 2.3.0
     */
    itemCls: Ext.baseCSSPrefix + 'dataview-item',
 
    /**
     * @cfg {String/String[]/Ext.XTemplate} itemTpl
     * The inner portion of the item template to be rendered. Follows an XTemplate
     * structure and will be placed inside of a tpl.
     */
 
    /**
     * @cfg {String} overItemCls
     * A CSS class to apply to each item in the view on mouseover.
     * Setting this will automatically set {@link #trackOver} to `true`.
     */
 
    /**
     * @cfg {String} loadingText
     * A string to display during data load operations.  If specified, this text will be
     * displayed in a loading div and the view's contents will be cleared while loading, otherwise
     * the view's contents will continue to display normally until the new data is loaded
     * and the contents are replaced.
     * @since 2.3.0
     * @locale
     */
    loadingText: 'Loading...',
 
    /**
     * @cfg {Boolean/Object} loadMask
     * False to disable a load mask from displaying while the view is loading. This can also be a
     * {@link Ext.LoadMask} configuration object.
     */
    loadMask: true,
 
    /**
     * @cfg {String} loadingCls
     * The CSS class to apply to the loading message element. Defaults to
     * Ext.LoadMask.prototype.msgCls "x-mask-loading".
     */
 
    /**
     * @cfg {Boolean} loadingUseMsg
     * Whether or not to use the loading message.
     * @private
     */
    loadingUseMsg: true,
 
    /**
     * @cfg {Number} loadingHeight
     * If specified, gives an explicit height for the data view when it is showing the
     * {@link #loadingText}, if that is specified. This is useful to prevent the view's height
     * from collapsing to zero when the loading mask is applied and there are no other contents
     * in the data view.
     */
 
    /**
     * @cfg {String} selectedItemCls
     * A CSS class to apply to each selected item in the view.
     */
    selectedItemCls: Ext.baseCSSPrefix + 'item-selected',
 
    /**
     * @cfg {String} emptyText
     * The text to display in the view when there is no data to display.
     * Note that when using local data the emptyText will not be displayed unless you set
     * the {@link #deferEmptyText} option to false.
     * @since 2.3.0
     * @accessor
     * @locale
     */
    emptyText: "",
 
    /**
     * @cfg {Boolean} deferEmptyText
     * True to defer emptyText being applied until the store's first load.
     * @since 2.3.0
     */
    deferEmptyText: true,
 
    /**
     * @cfg {Boolean} trackOver
     * When `true` the {@link #overItemCls} will be applied to items when hovered over.
     * This in return will also cause {@link Ext.view.View#highlightitem highlightitem} and
     * {@link Ext.view.View#unhighlightitem unhighlightitem} events to be fired.
     *
     * Enabled automatically when the {@link #overItemCls} config is set.
     *
     * @since 2.3.0
     */
    trackOver: false,
 
    /**
     * @cfg {Boolean} blockRefresh
     * Set this to true to ignore refresh events on the bound store. This is useful if
     * you wish to provide custom transition animations via a plugin
     * @since 3.4.0
     */
    blockRefresh: false,
 
    /**
     * @cfg {Boolean} [disableSelection=false]
     * True to disable selection within the DataView. This configuration will lock
     * the selection model that the DataView uses.
     */
 
    /**
     * @cfg {Boolean} preserveScrollOnRefresh
     * True to preserve scroll position across refresh operations.
     */
    preserveScrollOnRefresh: false,
 
    /**
     * @cfg {Boolean} preserveScrollOnReload
     * True to preserve scroll position when the store is reloaded.
     *
     * You may want to configure this as `true` if you are using a
     * {@link Ext.data.BufferedStore buffered store} and you require refreshes of the client side
     * data state not to disturb the state of the UI.
     *
     * @since 5.1.1
     */
    preserveScrollOnReload: false,
 
    /**
     * @property autoDestroyBoundStore
     * @inheritdoc
     */
    autoDestroyBoundStore: true,
 
    /**
     * @property ariaRole
     * @inheritdoc
     */
    ariaRole: 'listbox',
    itemAriaRole: 'option',
 
    /**
     * @private
     */
    last: false,
 
    /**
     * @property focusable
     * @inheritdoc
     */
    focusable: true,
 
    /**
     * @cfg tabIndex
     * @inheritdoc
     */
    tabIndex: 0,
 
    triggerEvent: 'itemclick',
    triggerCtEvent: 'containerclick',
 
    // Starts as true by default so that pn the leading edge of the first layout a refresh
    // will be triggered. A refresh opereration sets this flag to false.
    // When a refresh is requested using refreshView, the request may be deferred because of hidden
    // or collapsed state. This is done by setting the refreshNeeded flag to true, and the the next
    // layout will trigger refresh.
    refreshNeeded: true,
 
    updateSuspendCounter: 0,
 
    addCmpEvents: Ext.emptyFn,
 
    /**
     * @event beforerefresh
     * Fires before the view is refreshed
     * @param {Ext.view.View} this The DataView object
     */
 
    /**
     * @event refresh
     * Fires when the view is refreshed
     * @param {Ext.view.View} this The DataView object
     */
 
    /**
     * @event viewready
     * Fires when the View's item elements representing Store items has been rendered.
     * No items will be available for selection until this event fires.
     * @param {Ext.view.View} this 
     */
 
    /**
     * @event itemupdate
     * Fires when the node associated with an individual record is updated
     * @param {Ext.data.Model} record The model instance
     * @param {Number} index The index of the record
     * @param {HTMLElement} node The node that has just been updated
     * @param {Ext.view.View} view The view containing the item
     */
 
    /**
     * @event itemadd
     * Fires when the nodes associated with an recordset have been added to the underlying store
     * @param {Ext.data.Model[]} records The model instance
     * @param {Number} index The index at which the set of records was inserted
     * @param {HTMLElement[]} node The node that has just been updated
     * @param {Ext.view.View} view The view adding the item
     */
 
    /**
     * @event itemremove
     * Fires when the node associated with an individual record is removed
     * @param {Ext.data.Model[]} records The model instances removed
     * @param {Number} index The index from which the records wer removed
     * @param {HTMLElement[]} item The view items removed
     * @param {Ext.view.View} view The view removing the item
     */
 
    constructor: function(config) {
        if (config && config.selModel) {
            config.selectionModel = config.selModel;
        }
 
        this.callParent([config]);
    },
 
    initComponent: function() {
        var me = this,
            isDef = Ext.isDefined,
            itemTpl = me.itemTpl,
            memberFn = {},
            selection = me.selection,
            store;
 
        if (selection) {
            me.selection = null;
            me.setSelection(selection);
        }
 
        if (itemTpl) {
            if (Ext.isArray(itemTpl)) {
                // string array
                if (typeof itemTpl[itemTpl.length - 1] !== 'string') {
                    itemTpl = itemTpl.slice(0);
                    memberFn = itemTpl.pop();
                }
 
                itemTpl = itemTpl.join('');
            }
            else if (Ext.isObject(itemTpl)) {
                // tpl instance
                memberFn = Ext.apply(memberFn, itemTpl.initialConfig);
                itemTpl = itemTpl.html;
            }
 
            if (!me.itemSelector) {
                me.itemSelector = '.' + me.itemCls;
            }
 
            if (memberFn.fn) {
                memberFn.baseFn = memberFn.fn;
                delete memberFn.fn;
                itemTpl = "{%this.baseFn(out, values, parent, xindex, xcount, xkey)%}";
            }
 
            itemTpl = Ext.String.format(
                '<tpl for="."><div class="{0}" role="{2}">{1}</div></tpl>', me.itemCls, itemTpl,
                me.itemAriaRole
            );
 
            me.tpl = new Ext.XTemplate(itemTpl, memberFn);
        }
 
        //<debug>
        if (!isDef(me.tpl) || !isDef(me.itemSelector)) {
            Ext.raise({
                sourceClass: 'Ext.view.View',
                tpl: me.tpl,
                itemSelector: me.itemSelector,
                msg: "DataView requires both tpl and itemSelector configurations to be defined."
            });
        }
        //</debug>
 
        me.callParent();
        me.tpl = me.lookupTpl('tpl');
 
        //<debug>
        // backwards compat alias for overClass/selectedClass
        // TODO: Consider support for overCls generation Ext.Component config
        if (isDef(me.overCls) || isDef(me.overClass)) {
            if (Ext.isDefined(Ext.global.console)) {
                Ext.global.console.warn(
                    'Ext.view.View: Using the deprecated overCls or overClass configuration. ' +
                    'Use overItemCls instead.'
                );
            }
 
            me.overItemCls = me.overCls || me.overClass;
 
            delete me.overCls;
            delete me.overClass;
        }
 
        if (isDef(me.selectedCls) || isDef(me.selectedClass)) {
            if (Ext.isDefined(Ext.global.console)) {
                Ext.global.console.warn(
                    'Ext.view.View: Using the deprecated selectedCls or selectedClass ' +
                    'configuration. Use selectedItemCls instead.');
            }
 
            me.selectedItemCls = me.selectedCls || me.selectedClass;
 
            delete me.selectedCls;
            delete me.selectedClass;
        }
        //</debug>
 
        if (me.overItemCls) {
            me.trackOver = true;
        }
 
        me.addCmpEvents();
 
        // Look up the configured Store. If none configured, use the fieldless,
        // empty Store defined in Ext.data.Store.
        store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
 
        // Use the provided store as the data source unless a Feature or plugin
        // has injected a special one
        if (!me.dataSource) {
            me.dataSource = store;
        }
 
        me.bindStore(store, true);
 
        // Must exist before the selection model.
        // Selection model listens to this for navigation events.
        me.getNavigationModel().bindComponent(this);
 
        if (!me.all) {
            me.all = new Ext.CompositeElementLite();
        }
 
        // We track the scroll position
        me.scrollState = {
            top: 0,
            left: 0
        };
 
        me.savedTabIndexAttribute = 'data-savedtabindex-' + me.id;
    },
 
    getElConfig: function() {
        var result = this.mixins.renderable.getElConfig.call(this);
 
        // Subclasses may set focusable to false (BoundList is not focusable)
        if (this.focusable) {
            result.tabIndex = 0;
        }
 
        return result;
    },
 
    onRender: function(parentNode, containerIdx) {
        var mask = this.loadMask;
 
        this.callParent([parentNode, containerIdx]);
 
        if (mask) {
            this.createMask(mask);
        }
    },
 
    beforeLayout: function() {
        var me = this;
 
        me.callParent();
 
        // If there is a deferred refresh timer running, allow that to do the refresh.
        if (me.refreshNeeded && !me.pendingRefresh) {
            // If we have refreshed before, just call a refresh now.
            if (me.refreshCounter) {
                me.refreshView();
            }
            else {
                me.doFirstRefresh(me.dataSource);
            }
        }
    },
 
    onMaskBeforeShow: function() {
        var me = this,
            loadingHeight = me.loadingHeight;
 
        if (loadingHeight && loadingHeight > me.getHeight()) {
            me.hasLoadingHeight = true;
            me.oldMinHeight = me.minHeight;
            me.minHeight = loadingHeight;
            me.updateLayout();
        }
    },
 
    onMaskHide: function() {
        var me = this;
 
        if (!me.destroying && me.hasLoadingHeight) {
            me.minHeight = me.oldMinHeight;
            me.updateLayout();
            delete me.hasLoadingHeight;
        }
    },
 
    beforeRender: function() {
        this.callParent();
        this.getSelectionModel().beforeViewRender(this);
    },
 
    afterRender: function() {
        this.callParent();
 
        // Subclasses may set focusable to false.
        // BoundList is not focusable.
        // BoundList processes key events from its boundField.
        if (this.focusable) {
            this.focusEl = this.el;
        }
    },
 
    getRefItems: function() {
        var mask = this.loadMask,
            result = [];
 
        if (mask && mask.isComponent) {
            result.push(mask);
        }
 
        return result;
    },
 
    getSelection: function() {
        return this.getSelectionModel().getSelection();
    },
 
    /**
     * Sets the value of the selection.
     * @param {Ext.data.Model} selection 
     */
    setSelection: function(selection) {
        // This is purposefully written not as a config. Because getSelection
        // is an existing API that doesn't mirror the value for setSelection, we
        // don't want the publish system to call the getter, but rather just the
        // raw property.
        var current = this.selection;
 
        if (selection !== current) {
            this.selection = selection;
            this.updateSelection(selection, current);
        }
    },
 
    updateSelection: function(selection) {
        var me = this,
            sm;
 
        if (!me.ignoreNextSelection) {
            me.ignoreNextSelection = true;
            sm = me.getSelectionModel();
 
            if (selection) {
                sm.select(selection);
            }
            else {
                sm.deselectAll();
            }
 
            me.ignoreNextSelection = false;
        }
 
        me.publishState('selection', selection);
    },
 
    updateBindSelection: function(selModel, selection) {
        var me = this,
            selected = null;
 
        if (!me.ignoreNextSelection) {
            me.ignoreNextSelection = true;
 
            if (selection.length) {
                selected = selModel.getLastSelected();
                me.hasHadSelection = true;
            }
 
            if (me.hasHadSelection) {
                me.setSelection(selected);
            }
 
            me.ignoreNextSelection = false;
        }
    },
 
    applySelectionModel: function(selModel, oldSelModel) {
        var me = this,
            grid = me.grid,
            mode, ariaAttr, ariaDom;
 
        if (oldSelModel) {
            // Could be already destroyed, and listeners cleared
            if (!oldSelModel.destroyed) {
                oldSelModel.un({
                    scope: me,
                    selectionchange: me.updateBindSelection,
                    lastselectedchanged: me.updateBindSelection
                });
            }
 
            Ext.destroy(me.selModelRelayer);
            selModel = Ext.Factory.selection(selModel);
        }
        // If this is the initial configuration, pull overriding configs in from this view
        else {
            if (selModel && selModel.isSelectionModel) {
                selModel.locked = me.disableSelection;
            }
            else {
                if (me.simpleSelect) {
                    mode = 'SIMPLE';
                }
                else if (me.multiSelect) {
                    mode = 'MULTI';
                }
                else {
                    mode = 'SINGLE';
                }
 
                if (typeof selModel === 'string') {
                    selModel = {
                        type: selModel
                    };
                }
 
                selModel = Ext.Factory.selection(Ext.apply({
                    allowDeselect: me.allowDeselect || me.multiSelect,
                    mode: mode,
                    locked: me.disableSelection
                }, selModel));
            }
        }
 
        // Grids should have aria-multiselectable on their ariaEl instead
        if (selModel.mode !== 'SINGLE') {
            ariaDom = (grid || me).ariaEl.dom;
 
            if (ariaDom) {
                ariaDom.setAttribute('aria-multiselectable', true);
            }
            else if (!grid) {
                ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});
                ariaAttr['aria-multiselectable'] = true;
            }
        }
 
        me.selModelRelayer = me.relayEvents(selModel, [
            'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect', 'focuschange'
        ]);
 
        selModel.on({
            scope: me,
            lastselectedchanged: me.updateBindSelection,
            selectionchange: me.updateBindSelection
        });
 
        return selModel;
    },
 
    updateSelectionModel: function(selectionModel) {
        // Keep the legacy property correct
        this.selModel = selectionModel;
    },
 
    applyNavigationModel: function(navigationModel) {
        return Ext.Factory.viewNavigation(navigationModel);
    },
 
    onFocusEnter: function(e) {
        var me = this,
            navigationModel = me.getNavigationModel(),
            focusPosition = me.lastFocused;
 
        // This is set on mousedown on the scrollbar in IE/Edge.
        // Those browsers focus the element on mousedown on its scrollbar
        // which is not what we want, so throw focus back in this
        // situation.
        // See Ext.view.navigationModel for this being set.
        me.lastFocused = null;
 
        if (focusPosition === 'scrollbar') {
            e.relatedTarget.focus();
 
            return;
        }
 
        // Disable tabbability of elements within this view.
        me.toggleChildrenTabbability(false);
 
        if (!me.itemFocused && me.all.getCount()) {
 
            // SHIFT+TAB hit the tab guard - focus last item.
            if (e.event.getTarget() === me.tabGuardEl) {
                focusPosition = me.all.getCount() - 1;
            }
            else {
                focusPosition = navigationModel.getLastFocused();
            }
 
            navigationModel.setPosition(focusPosition || 0, e.event, null, !focusPosition);
 
            // We now contain focus is that was successful
            me.itemFocused = navigationModel.getPosition() != null;
        }
 
        // View's main el should be kept untabbable, otherwise pressing
        // Shift-Tab key in the view would move the focus to the main el
        // which will then bounce it back to the last focused item.
        // That would effectively make Shift-Tab unusable.
        if (me.itemFocused) {
            me.el.dom.setAttribute('tabIndex', -1);
 
            if (me.tabGuardEl) {
                me.tabGuardEl.setAttribute('tabIndex', -1);
            }
        }
 
        me.callParent([e]);
    },
 
    onFocusLeave: function(e) {
        var me = this;
 
        // Ignore this event if we do not actually contain focus,
        // or if the reason for focus exiting was that we are refreshing.
        if (me.itemFocused && !me.refreshing) {
 
            // Blur the focused cell
            me.getNavigationModel().setPosition(null, e.event, null, true);
 
            me.itemFocused = false;
            me.el.dom.setAttribute('tabIndex', 0);
 
            if (me.tabGuardEl) {
                me.tabGuardEl.setAttribute('tabIndex', 0);
            }
        }
 
        me.callParent([e]);
    },
 
    /**
     * @private
     * Cancel a pending focus task, if any.
     * This is a separate method to allow simple abstraction for locked views.
     */
    cancelFocusTask: function() {
        var task = this.getFocusTask();
 
        if (task) {
            task.cancel();
        }
    },
 
    onRemoved: function(isDestroying) {
        this.callParent([isDestroying]);
 
        // IE does not fire focusleave on removal from DOM
        if (!isDestroying) {
            this.onFocusLeave({});
        }
    },
 
    /**
     * Refreshes the view by reloading the data from the store and re-rendering the template.
     *
     * @since 2.3.0
     */
    refresh: function() {
        var me = this,
            items = me.all,
            prevItemCount = items.getCount(),
            refreshCounter = me.refreshCounter,
            targetEl,
            records,
            selModel = me.getSelectionModel(),
            restoreFocus,
            // If there are items in the view, then honour preserveScrollOnRefresh
            scroller = refreshCounter && items.getCount() && me.preserveScrollOnRefresh &&
                       me.getScrollable(),
            bufferedRenderer = me.bufferedRenderer,
            scrollPos;
 
        if (!me.rendered || me.destroyed) {
            return;
        }
 
        if (!me.hasListeners.beforerefresh || me.fireEvent('beforerefresh', me) !== false) {
            // So that listeners to itemremove events know that its because of a refresh
            me.refreshing = true;
 
            // If focus was in this view, this will restore it
            restoreFocus = me.saveFocusState();
 
            targetEl = me.getTargetEl();
            records = me.getViewRange();
 
            if (scroller) {
                scrollPos = scroller.getPosition();
 
                if (!(scrollPos.x || scrollPos.y)) {
                    scrollPos = null;
                }
            }
 
            if (refreshCounter || me.emptyEl) {
                me.clearViewEl();
            }
 
            if (refreshCounter) {
                me.refreshCounter++;
            }
            else {
                me.refreshCounter = 1;
            }
 
            // Usually, for an empty record set, this would be blank, but when the Template
            // Creates markup outside of the record loop, this must still be honoured
            // even if there are no records.
            me.tpl.append(targetEl, me.collectData(records, items.startIndex || 0));
 
            // The emptyText is now appended to the View's element
            // after nodes outside the tpl block.
            if (records.length < 1) {
                // Process empty text unless the store is being cleared.
                me.addEmptyText();
                items.clear();
            }
            else {
                me.collectNodes(targetEl.dom);
                me.updateIndexes(0);
            }
 
            // If focus was in any way in this view, this will restore it
            restoreFocus();
 
            // Some subclasses do not need to do this. TableView does not need to do this -
            // it renders selected class using its tenmplate.
            if (me.refreshSelmodelOnRefresh !== false) {
                selModel.refresh();
            }
 
            me.refreshNeeded = false;
 
            // Ensure layout system knows about new content size.
            // If number of items have changed, force a layout.
            me.refreshSize(items.getCount() !== prevItemCount);
 
            me.fireItemMutationEvent('refresh', me, records);
 
            if (scroller) {
                scroller.scrollTo(scrollPos);
            }
 
            // Upon first refresh, fire the viewready event.
            // Reconfiguring the grid "renews" this event.
            if (!me.viewReady) {
                // Fire an event when deferred content becomes available.
                me.viewReady = true;
                me.fireEvent('viewready', me);
            }
 
            me.refreshing = false;
 
            if (bufferedRenderer) {
                bufferedRenderer.refreshSize();
            }
 
            me.cleanupData();
        }
 
        // The tabGuardEl is only needed before focus has entered the view to prevent
        // naturally tabbable interior elements from attracting focus when using SHIFT+TAB
        // from after the view. Once focus has entered, we disable tabbability on interior
        // elements so it will not be needed.
        // Subsequent *full* refreshes will destroy it.
        // Buffer rendered refreshes are more granular, and do not destroy extraneous
        // DOM, but this does not matter because tha tabGuardEl will be tabIndex="-1"
        // so out of the tab order.
        if (!me.tabGuardEl) {
            // We only need an "after" tab guard.
            // The View el is tabIndex="0", so captures forward TAB.
            // It's only SHIFT+TAB that we have to guard against.
            me.tabGuardEl = me.el.createChild({
                cls: Ext.baseCSSPrefix + 'tab-guard ' + Ext.baseCSSPrefix + 'tab-guard-after',
                tabIndex: "0"
            }, null, true);
        }
    },
 
    addEmptyText: function() {
        var me = this,
            store = me.getStore();
 
        if (me.emptyText && !store.isLoading() &&
            (!me.deferEmptyText || me.refreshCounter > 1 || store.isLoaded())) {
            if (!me.emptyEl) {
                me.emptyEl =
                    Ext.core.DomHelper.insertHtml('beforeEnd', me.getTargetEl().dom, me.emptyText);
            }
            else {
                Ext.fly(me.emptyEl).setHtml(me.emptyText);
            }
        }
    },
 
    getEmptyText: function() {
        return this.emptyText;
    },
 
    setEmptyText: function(emptyText) {
        var me = this;
 
        if (me.emptyText !== emptyText) {
            me.emptyText = emptyText;
            me.refresh();
        }
 
        return me;
    },
 
    getViewRange: function() {
        return this.dataSource.getRange();
    },
 
    /**
     * @private
     * Called by the framework when the view is refreshed, or when rows are added or deleted.
     *
     * These operations may cause the view's dimensions to change, and if the owning container
     * is shrinkwrapping this view, then the layout must be updated to accommodate these new
     * dimensions.
     */
    refreshSize: function(forceLayout) {
        var me = this,
            sizeModel = me.getSizeModel();
 
        if (sizeModel.height.shrinkWrap || sizeModel.width.shrinkWrap || forceLayout) {
            me.updateLayout();
        }
    },
 
    afterFirstLayout: function(width, height) {
        var me = this,
            scroller = me.getScrollable();
 
        if (scroller) {
            me.viewScrollListeners = scroller.on({
                scroll: me.onViewScroll,
                scrollend: me.onViewScrollEnd,
                scope: me,
                onFrame: !!Ext.global.requestAnimationFrame,
                destroyable: true
            });
        }
 
        me.callParent([width, height]);
    },
 
    clearViewEl: function() {
        var me = this,
            targetEl = me.getTargetEl(),
            all = me.all,
            store = me.getStore(),
            nodeContainerIsTarget = me.getNodeContainer() === targetEl,
            i, removedItems, removedRecs;
 
        // We must ensure that the itemremove event is fired EVERY time an item is removed from the
        // view. This is so that widgets rendered into a view by a WidgetColumn can be recycled.
        removedItems = all.slice();
        removedRecs = [];
 
        for (= all.startIndex; i <= all.endIndex; i++) {
            removedRecs.push(
                store.getByInternalId(all.item(i, true).getAttribute('data-recordId'))
            );
        }
 
        me.fireItemMutationEvent('itemremove', removedRecs, all.startIndex || 0, removedItems, me);
 
        me.clearEmptyEl();
 
        // If nodeContainer is the el, just clear the innerHTML. Otherwise, we need
        // to manually remove each node we know about.
        me.all.clear(!nodeContainerIsTarget);
 
        targetEl = nodeContainerIsTarget ? targetEl.dom : me.getNodeContainer();
 
        if (targetEl) {
            targetEl.innerHTML = '';
        }
    },
 
    clearEmptyEl: function() {
        var emptyEl = this.emptyEl;
 
        // emptyEl is likely to be a TextNode if emptyText is not HTML code.
        // Use native DOM to remove it.
        if (emptyEl) {
            Ext.removeNode(emptyEl);
        }
 
        this.emptyEl = null;
    },
 
    onViewScroll: function(scroller, x, y) {
        if (!this.destroyed) {
            this.fireEvent('scroll', this, x, y);
        }
    },
 
    onViewScrollEnd: function(scroller, x, y) {
        if (!this.destroyed) {
            this.fireEvent('scrollend', this, x, y);
        }
    },
 
    /**
     * Saves the scrollState in a private variable.
     * Must be used in conjunction with restoreScrollState.
     * @private
     */
    saveScrollState: function() {
        var me = this,
            state = me.scrollState;
 
        if (me.rendered) {
            state.left = me.getScrollX();
            state.top = me.getScrollY();
        }
    },
 
    /**
     * Restores the scrollState.
     * Must be used in conjunction with saveScrollState
     * @private
     */
    restoreScrollState: function() {
        var me = this,
            state = me.scrollState;
 
        if (me.rendered) {
            me.setScrollX(state.left);
            me.setScrollY(state.top);
        }
    },
 
    /**
     * Function which can be overridden to provide custom formatting for each Record that is used by
     * this DataView's {@link #tpl template} to render each node.
     * @param {Object/Object[]} data The raw data object that was used to create the Record.
     * @param {Number} recordIndex the index number of the Record being prepared for rendering.
     * @param {Ext.data.Model} record The Record being prepared for rendering.
     * @return {Array/Object} The formatted data in a format expected by the internal
     * {@link #tpl template}'s overwrite() method. (either an array if your params are numeric
     * (i.e. {0}) or an object (i.e. { foo: 'bar' }))
     * @since 2.3.0
     */
    prepareData: function(data, recordIndex, record) {
        var associatedData, attr, hasCopied;
 
        if (record) {
            associatedData = record.getAssociatedData();
 
            for (attr in associatedData) {
                if (associatedData.hasOwnProperty(attr)) {
                    // This would be better done in collectData, however
                    // we only need to copy the data object if we have any associations,
                    // so we optimize it by only copying if we must.
                    // We do this so we don't mutate the underlying record.data
                    if (!hasCopied) {
                        data = Ext.Object.chain(data);
                        hasCopied = true;
                    }
 
                    data[attr] = associatedData[attr];
                }
            }
        }
 
        return data;
    },
 
    /**
     * Function which can be overridden which returns the data object passed to this
     * DataView's {@link #cfg-tpl template} to render the whole DataView.
     *
     * This is usually an Array of data objects, each element of which is processed by an
     * {@link Ext.XTemplate XTemplate} which uses `'&lt;tpl for="."&gt;'` to iterate over
     * its supplied data object as an Array. However, <i>named</i> properties may be placed
     * into the data object to provide non-repeating data such as headings, totals etc.
     *
     * @param {Ext.data.Model[]} records An Array of {@link Ext.data.Model}s to be rendered into
     * the DataView.
     * @param {Number} startIndex the index number of the Record being prepared for rendering.
     * @return {Object[]} An Array of data objects to be processed by a repeating XTemplate.
     * May also contain <i>named</i> properties.
     * @since 2.3.0
     */
    collectData: function(records, startIndex) {
        var data = [],
            i = 0,
            len = records.length,
            record;
 
        for (; i < len; i++) {
            record = records[i];
            data[i] = this.prepareData(record.data, startIndex + i, record);
        }
 
        return data;
    },
 
    cleanupData: Ext.emptyFn,
 
    bufferRender: function(records, index) {
        var me = this,
            div = me.renderBuffer,
            result = document.createDocumentFragment(),
            nodes, len, i;
 
        me.tpl.overwrite(div, me.collectData(records, index));
        nodes = div.query(me.getItemSelector());
 
        for (= 0, len = nodes.length; i < len; i++) {
            result.appendChild(nodes[i]);
        }
 
        return {
            fragment: result,
            children: nodes
        };
    },
 
    // Element which contains rows
    nodeContainerSelector: null,
 
    /**
     * For use by the {@link Ext.view.DragZone} plugin on platforms which use the
     * [Pointer Events standard](https://www.w3.org/TR/pointerevents/).
     *
     * If using touch scrolling, the `pointerdown` event is reserved for starting the scroll
     * gesture. To enable dragging of items using the ExtJS drag/drop system, items
     * must be set draggable. This means that `pointerdown` on view items initiate an ExtJS drag
     * and *not* a scroll gesture.
     *
     * When items are set draggable: true, pointer events platforms can still scroll using two
     * finger drag, or by dragging empty parts of the view.
     *
     * For normal dataviews, havig the backgrounc-color of items and the view be different will
     * indicate where to touch to initiate a scroll.
     *
     * For grids, if rows need to be dragged, there must be some blank space after rows
     * to touch to initiate the scroll gesture.
     *
     * @param {type} draggable 
     * @private
     */
    setItemsDraggable: function(draggable) {
        var me = this,
            selector = '#' + me.id + ' ' + me.getItemSelector(),
            styleSheet = me.viewStyleSheet;
 
        if (draggable) {
            if (!styleSheet) {
                styleSheet = Ext.view.AbstractView.prototype.viewStyleSheet =
                    Ext.util.CSS.createStyleSheet('', 'AbstractView');
            }
 
            // Pointer Events platforms implement the touch-action or -ms-touch-action properties
            // which deicate how an element responds to touches.
            // Non Pointer Events platforms such as iOS show a selection rectangle
            // on longpress+drag, and that is disabled by -webkit-user-drag: none;
            Ext.util.CSS.createRule(
                styleSheet, selector,
                'touch-action: pinch-zoom double-tap-zoom;' +
                '-ms-touch-action: pinch-zoom double-tap-zoom;-webkit-user-drag: none;'
            );
        }
        else if (styleSheet) {
            Ext.util.CSS.deleteRule(selector);
        }
    },
 
    /**
     * Returns a CSS selector which selects the element which contains record nodes.
     */
    getNodeContainerSelector: function() {
        return this.nodeContainerSelector;
    },
 
    onUpdate: function(store, record, operation, modifiedFieldNames, details) {
        var me = this,
            isFiltered = details && details.filtered;
 
        // If, due to filtering or buffered rendering, or node collapse, the updated record is not
        // represented in the rendered structure, this is a no-op.
        // The correct, new values will be rendered the next time the record becomes visible
        // and is rendered.
        if (!isFiltered && me.getNode(record)) {
 
            // If we are throttling UI updates (See the updateDelay global config),
            // ensure there's a change entry queued for the record in the global queue.
            if (me.throttledUpdate) {
                me.statics().queueRecordChange(me, store, record, operation, modifiedFieldNames);
            }
            else {
                // Cannot use arguments array.
                // TableView's signature acceses these arguments plus one more of its own.
                // Event firing passes the addListener options object as rge final parameter
                // and we must not pass that.
                me.handleUpdate(store, record, operation, modifiedFieldNames, details);
            }
        }
    },
 
    handleUpdate: function(store, record) {
        var me = this,
            selModel = me.getSelectionModel(),
            index, node;
 
        if (me.viewReady && !me.refreshNeeded) {
            index = me.dataSource.indexOf(record);
 
            // If the record has been removed from the data source since the changes were made,
            // do nothing
            if (index > -1) {
                // ensure the node actually exists in the DOM
                if (me.getNode(record)) {
                    node = me.bufferRender([record], index).children[0];
                    me.all.replaceElement(index, node, true);
                    me.updateIndexes(index, index);
 
                    // Maintain selection after update
                    selModel.onUpdate(record);
                    me.refreshSizePending = true;
 
                    if (selModel.isSelected(record)) {
                        me.onItemSelect(record);
                    }
 
                    if (me.hasListeners.itemupdate) {
                        me.fireEvent('itemupdate', record, index, node, me);
                    }
 
                    return node;
                }
            }
        }
    },
 
    /**
     * @private
     * Respond to store replace event which is fired by GroupStore group expand/collapse operations.
     * This saves a layout because a remove and add operation are coalesced in this operation.
     */
    onReplace: function(store, startIndex, oldRecords, newRecords) {
        var me = this,
            all = me.all,
            scroller = me.getScrollable(),
            yPos = scroller && scroller.getPosition().y,
            selModel = me.getSelectionModel(),
            origStart = startIndex,
            result, item, fragment, children, oldItems, endIndex, restoreFocus;
 
        if (me.rendered) {
            // Insert the new items before the remove block
            result = me.bufferRender(newRecords, startIndex, true);
            fragment = result.fragment;
            children = result.children;
            item = all.item(startIndex);
 
            if (item) {
                all.item(startIndex).insertSibling(fragment, 'before', true);
            }
            else {
                me.appendNodes(fragment);
            }
 
            all.insert(startIndex, children);
 
            if (oldRecords.length) {
                // If focus was in the view, this will return
                // a function which will restore that state.
                // If not, a function which does nothing.
                restoreFocus = me.saveFocusState();
            }
 
            startIndex += newRecords.length;
            endIndex = startIndex + oldRecords.length - 1;
 
            // Remove the items which correspond to old records
            oldItems = all.removeRange(startIndex, endIndex, true);
 
            // Restore scroll position
            if (scroller) {
                scroller.scrollTo(null, yPos);
            }
 
            // Some subclasses do not need to do this. TableView does not need to do this.
            if (me.refreshSelmodelOnRefresh !== false) {
                selModel.refresh();
            }
 
            // Update the row indices (TableView) doesn't do this.
            me.updateIndexes(startIndex);
 
            me.fireItemMutationEvent('itemremove', oldRecords, origStart, oldItems, me);
            me.fireItemMutationEvent('itemadd', newRecords, origStart, children, me);
 
            // If focus was in this view, this will restore it
            restoreFocus();
 
            me.refreshSize();
        }
    },
 
    onAdd: function(store, records, index) {
        var me = this,
            nodes,
            selModel = me.getSelectionModel();
 
        if (me.rendered && !me.refreshNeeded) {
            // If we are adding into an empty view, we must refresh in order that
            // the *full tpl* is applied which might create boilerplate content *around*
            // the record nodes.
            if (me.all.getCount() === 0) {
                me.refresh();
                nodes = me.all.slice();
            }
            else {
                nodes = me.doAdd(records, index);
 
                // Some subclasses do not need to do this. TableView does not need to do this.
                if (me.refreshSelmodelOnRefresh !== false) {
                    selModel.refresh();
                }
 
                me.updateIndexes(index);
 
                // Ensure layout system knows about new content size
                me.refreshSizePending = true;
            }
 
            me.fireItemMutationEvent('itemadd', records, index, nodes, me);
        }
 
    },
 
    appendNodes: function(nodes) {
        var all = this.all,
            count = all.getCount();
 
        if (this.nodeContainerSelector) {
            this.getNodeContainer().appendChild(nodes);
        }
        else {
            // If we don't have a nodeContainerSelector, we may have our
            // itemSelector nodes wrapped in some other container, so we
            // can't just append them to the node container, it may be the wrong element
            all.item(count - 1).insertSibling(nodes, 'after');
        }
    },
 
    doAdd: function(records, index) {
        var me = this,
            result = me.bufferRender(records, index, true),
            fragment = result.fragment,
            children = result.children,
            all = me.all,
            count = all.getCount(),
            firstRowIndex = all.startIndex || 0,
 
            lastRowIndex = all.endIndex || count - 1;
 
        if (count === 0 || index > lastRowIndex) {
            me.appendNodes(fragment);
        }
        else if (index <= firstRowIndex) {
            all.item(firstRowIndex).insertSibling(fragment, 'before', true);
        }
        else {
            all.item(index).insertSibling(children, 'before', true);
        }
 
        all.insert(index, children);
 
        return children;
    },
 
    onRemove: function(store, records, index) {
        var me = this,
            rows = me.all,
            currIdx, i, record, nodes, node, restoreFocus;
 
        if (me.rendered && !me.refreshNeeded && rows.getCount()) {
            if (me.dataSource.getCount() === 0) {
                me.refresh();
            }
            else {
                // If this view contains focus, this will return
                // a function which will restore that state.
                restoreFocus = me.saveFocusState();
 
                // Just remove the elements which corresponds to the removed records
                // The tpl's full HTML will still be in place.
                nodes = [];
 
                for (= records.length - 1; i >= 0; --i) {
                    record = records[i];
                    currIdx = index + i;
 
                    if (nodes) {
                        node = rows.item(currIdx);
                        nodes[i] = node ? node.dom : undefined;
                    }
 
                    if (rows.item(currIdx)) {
                        me.doRemove(record, currIdx);
                    }
                }
 
                me.fireItemMutationEvent('itemremove', records, index, nodes, me);
 
                // If focus was in this view, this will restore it
                restoreFocus();
                me.updateIndexes(index);
            }
 
            // Ensure layout system knows about new content size
            me.refreshSizePending = true;
        }
    },
 
    doRemove: function(record, index) {
        this.all.removeElement(index, true);
    },
 
    eventLifecycleMap: {
        refresh: 'onViewRefresh',
        itemremove: 'onItemRemove',
        itemadd: 'onItemAdd'
    },
 
    fireItemMutationEvent: function(eventName) {
        var me = this,
            ownerGrid = me.ownerGrid,
            vm;
 
        Ext.suspendLayouts();
 
        // Inform the ownerGrid.
        if (ownerGrid) {
            if (eventName !== 'refresh') {
                vm = me.lookupViewModel();
            }
 
            ownerGrid[me.eventLifecycleMap[eventName]].apply(
                ownerGrid, Ext.Array.slice(arguments, 1)
            );
        }
 
        me.fireEvent.apply(me, arguments);
 
        // The content height MUST be measurable by the caller (the buffered renderer),
        // so data must be flushed to it immediately.
        if (vm) {
            vm.notify();
        }
 
        Ext.resumeLayouts(true);
    },
 
    /**
     * @private
     * Called prior to an operation which mey remove focus from this view by some kind
     * of DOM operation.
     *
     * If this view contains focus, this method returns a function which, when called after
     * the disruptive DOM operation will restore focus to the same record, or, if the record has
     * been removed to the same item index..
     *
     * @returns {Function} A function that will restore focus if focus was within this view,
     * or a function which does nothing is focus is not in this view.
     */
    saveFocusState: function() {
        var me = this,
            store = me.dataSource || me.store,
            navModel = me.getNavigationModel(),
            lastFocusedIndex = navModel.recordIndex,
            lastFocusedRec = navModel.record,
            containsFocus = me.el.contains(Ext.Element.getActiveElement());
 
        // If there is a position to restore...
        if (lastFocusedRec) {
            // Check if we really have focus.
            // Some NavigationModels record position with focus outside of the view.
            // This happens in BoundLists when focus stays in the bound field.
            // Blur the focused descendant, but do not trigger focusLeave.
            if (containsFocus) {
                me.el.dom.focus();
            }
 
            // The following function will attempt to refocus back to the same record
            // if it is still there, or the same item index.
            return function() {
                // If we still have data, attempt to refocus at the same record,
                // or the same item index..
                if (store.getCount()) {
                    // Adjust expectations of where we are able to refocus according to
                    // what kind of destruction might have been wrought on this view's DOM
                    // during focus save.
                    lastFocusedIndex = Math.min(lastFocusedIndex, me.all.getCount() - 1);
 
                    navModel.setPosition(
                        store.contains(lastFocusedRec)
                            ? lastFocusedRec
                            : lastFocusedIndex,
                        null, null, true, !containsFocus
                    );
                }
            };
        }
 
        return Ext.emptyFn;
    },
 
    /**
     * Refreshes an individual node's data from the store.
     * @param {Ext.data.Model/Number} record The record or index of the record to update.
     * @since 2.3.0
     */
    refreshNode: function(record) {
        if (Ext.isNumber(record)) {
            record = this.store.getAt(record);
        }
 
        this.onUpdate(this.dataSource, record);
    },
 
    updateIndexes: function(startIndex, endIndex) {
        var me = this,
            nodes = me.all.elements,
            records = me.getViewRange(),
            selModel = me.getSelectionModel(),
            myId = me.id,
            node, record, i;
 
        startIndex = startIndex || 0;
        endIndex = endIndex || ((endIndex === 0) ? 0 : (nodes.length - 1));
 
        for (= startIndex; i <= endIndex; i++) {
            node = nodes[i];
            record = records[i];
 
            node.setAttribute('data-recordIndex', i);
            node.setAttribute('data-recordId', record.internalId);
            node.setAttribute('data-boundView', myId);
 
            if (selModel.getLastSelected()) {
                me[selModel.isSelected(record) ? 'onItemSelect' : 'onItemDeselect'](record);
            }
        }
    },
 
    /**
     * Changes the data store bound to this view and refreshes it.
     * @param {Ext.data.Store} store The store to bind to this view
     * @param {Object} initial 
     * @since 3.4.0
     */
    bindStore: function(store, initial) {
        var me = this,
            selModel = me.getSelectionModel(),
            navModel = me.getNavigationModel();
 
        // Can be already destroyed if we're called from doDestroy()
        if (selModel && !selModel.destroyed) {
            selModel.bindStore(store, initial);
            selModel.bindComponent(store ? me : null);
        }
 
        me.mixins.storeholder.bindStore.apply(me, arguments);
 
        // Navigation model must bind to new store
        if (navModel && !navModel.destroyed) {
            navModel.setStore(store);
        }
 
        // If we have already achieved our first layout, refresh immediately.
        // If we bind to the Store before the first layout, then beforeLayout will
        // call doFirstRefresh
        if (store && me.componentLayoutCounter) {
            // If not the initial bind, we enforce noDefer.
            if (me.blockRefresh) {
                me.refreshNeeded = true;
            }
            else {
                me.doFirstRefresh(store, !initial);
            }
        }
    },
 
    /**
     * @private
     * Perform the first refresh of the View from a newly bound store.
     *
     * This is called when this View has been sized for the first time.
     */
    doFirstRefresh: function(store, noDefer) {
        var me = this;
 
        // If we are configured to defer, and *NOT* called from the defer call below
        if (me.deferInitialRefresh && !noDefer) {
            Ext.defer(me.doFirstRefresh, 1, me, [store, true]);
        }
 
        else {
            // 4.1.0: If we have a store, and the Store is *NOT* already loading
            // (a refresh is on the way), then on first layout, refresh regardless of record count.
            // Template may contain boilerplate HTML outside of record iteration loop.
            // Also, emptyText is appended by the refresh method.
            if (store && !me.deferRefreshForLoad(store)) {
                me.refresh();
            }
        }
    },
 
    onUnbindStore: function(store) {
        this.setMaskBind(null);
 
        if (this.dataSource === store) {
            this.dataSource = null;
        }
    },
 
    onBindStore: function(store, oldStore) {
        var me = this;
 
        // A BufferedStore has to know to reload the most recent visible zone if its View
        // is preserveScrollOnReload
        if (me.store.isBufferedStore) {
            me.store.preserveScrollOnReload = me.preserveScrollOnReload;
        }
 
        if (oldStore && oldStore.isBufferedStore) {
            delete oldStore.preserveScrollOnReload;
        }
 
        me.setMaskBind(store);
 
        // When unbinding the data store, the dataSource will be nulled out
        // if it's the same as the data store. Restore it here.
        if (!me.dataSource) {
            me.dataSource = store;
        }
    },
 
    setMaskBind: function(store) {
        var mask = this.loadMask;
 
        if (this.rendered && mask && store && !mask.bindStore) {
            mask = this.createMask();
        }
 
        if (mask && mask.bindStore) {
            mask.bindStore(store);
        }
    },
 
    getStoreListeners: function() {
        var me = this;
 
        return {
            refresh: me.onDataRefresh,
            replace: me.onReplace,
            add: me.onAdd,
            remove: me.onRemove,
            update: me.onUpdate,
            clear: me.onDataRefresh,
            beginupdate: me.onBeginUpdate,
            endupdate: me.onEndUpdate
        };
    },
 
    onBeginUpdate: function() {
        ++this.updateSuspendCounter;
 
        Ext.suspendLayouts();
    },
 
    onEndUpdate: function() {
        var me = this;
 
        if (me.updateSuspendCounter) {
            --me.updateSuspendCounter;
        }
 
        Ext.resumeLayouts(true);
 
        if (me.refreshSizePending) {
            me.refreshSize(true);
            me.refreshSizePending = false;
        }
    },
 
    /**
     * @private
     * Calls this.refresh if this.blockRefresh is not true
     * @since 3.4.0
     */
    onDataRefresh: function(store) {
        var me = this,
            preserveScrollOnRefresh = me.preserveScrollOnRefresh;
 
        // If this refresh event is fire from a store load, then use the 
        // preserveScrollOnReload setting to decide whether to preserve scroll position
        if (store.loadCount >= (me.lastRefreshLoadCount || 0)) {
            me.preserveScrollOnRefresh = me.preserveScrollOnReload;
        }
 
        me.refreshView();
        me.preserveScrollOnRefresh = preserveScrollOnRefresh;
        me.lastRefreshLoadCount = store.loadCount;
    },
 
    refreshView: function(startIndex) {
        var me = this,
            // If we have an ancestor in a non-boxready state (collapsed or about to collapse,
            // or hidden), then block the refresh because the next layout will trigger the refresh
            blocked = me.blockRefresh || !me.rendered ||
                      me.up('[collapsed],[isCollapsingOrExpanding=1],[hidden]'),
            bufferedRenderer = me.bufferedRenderer;
 
        // If we are blocked in any way due to either a setting, or hidden or collapsed,
        // or animating ancestor, then the next refresh attempt at the upcoming layout
        // must not defer.
        if (blocked) {
            me.refreshNeeded = true;
        }
        else {
            if (bufferedRenderer) {
                bufferedRenderer.refreshView(startIndex);
            }
            else {
                me.refresh();
            }
        }
    },
 
    /**
     * Returns the template node the passed child belongs to, or null if it doesn't belong to one.
     * @param {HTMLElement} node 
     * @return {HTMLElement} The template node
     */
    findItemByChild: function(node) {
        return Ext.fly(node).findParent(this.getItemSelector(), this.getTargetEl());
    },
 
    /**
     * Returns the template node by the Ext.event.Event or null if it is not found.
     * @param {Ext.event.Event} e 
     */
    findTargetByEvent: function(e) {
        return e.getTarget(this.getItemSelector(), this.getTargetEl());
    },
 
    /**
     * Gets the currently selected nodes.
     * @return {HTMLElement[]} An array of HTMLElements
     * @since 2.3.0
     */
    getSelectedNodes: function() {
        var nodes = [],
            records = this.getSelectionModel().getSelection(),
            ln = records.length,
            i = 0;
 
        for (; i < ln; i++) {
            nodes.push(this.getNode(records[i]));
        }
 
        return nodes;
    },
 
    /**
     * Gets an array of the records from an array of nodes
     * @param {HTMLElement[]} nodes The nodes to evaluate
     * @return {Ext.data.Model[]} records The {@link Ext.data.Model} objects
     * @since 2.3.0
     */
    getRecords: function(nodes) {
        var me = this,
            records = [],
            i;
 
        for (= 0; i < nodes.length; i++) {
            records.push(me.getRecord(nodes[i]));
        }
 
        return records;
    },
 
    /**
     * Gets a record from a node
     * @param {Ext.dom.Element/HTMLElement} node The node to evaluate
     *
     * @return {Ext.data.Model} record The {@link Ext.data.Model} object
     * @since 2.3.0
     */
    getRecord: function(node) {
        var dom = Ext.getDom(node),
            id = dom.getAttribute('data-recordId');
 
        return this.dataSource.getByInternalId(id);
    },
 
    /**
     * Returns true if the passed node is selected, else false.
     * @param {HTMLElement/Number/Ext.data.Model} node The node, node index or record to check
     * @return {Boolean} True if selected, else false
     * @since 2.3.0
     */
    isSelected: function(node) {
        var r =