    /**
     * @class Ext.view.AbstractView
     * @extends Ext.Component
     * This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.
     */
    Ext.define('Ext.view.AbstractView', {
        extend: 'Ext.Component',
        alternateClassName: 'Ext.view.AbstractView',
        requires: [
            'Ext.LoadMask',
            'Ext.data.StoreManager',
            'Ext.CompositeElementLite',
            'Ext.DomQuery',
            'Ext.selection.DataViewModel'
        ],

        inheritableStatics: {
            getRecord: function(node) {
                return this.getBoundView(node).getRecord(node);
            },

            getBoundView: function(node) {
                return Ext.getCmp(node.boundView);
            }
        },

        /**
         * @cfg {String/Array/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}.
         */
        /**
         * @cfg {Ext.data.Store} store
         * @required
         * The {@link Ext.data.Store} to bind this DataView to.
         */

        /**
         * @cfg {String} itemSelector
         * @required
         * <b>This is a required setting</b>. A simple CSS selector (e.g. <tt>div.some-class</tt> or
         * <tt>span:first-child</tt>) 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.
         */

        /**
         * @cfg {String} itemCls
         * Specifies the class to be assigned to each element in the view when used in conjunction with the
         * {@link #itemTpl} configuration.
         */
        itemCls: Ext.baseCSSPrefix + 'dataview-item',

        /**
         * @cfg {String/Array/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 (defaults to undefined).
         * Ensure {@link #trackOver} is set to `true` to make use of this.
         */

        /**
         * @cfg {String} loadingText
         * A string to display during data load operations (defaults to undefined).  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.
         */
        loadingText: 'Loading...',

        /**
         * @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. Defaults to undefined.
         */

        /**
         * @cfg {String} selectedItemCls
         * A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').
         */
        selectedItemCls: Ext.baseCSSPrefix + 'item-selected',

        /**
         * @cfg {String} emptyText
         * The text to display in the view when there is no data to display (defaults to '').
         * Note that when using local data the emptyText will not be displayed unless you set
         * the {@link #deferEmptyText} option to false.
         */
        emptyText: "",

        /**
         * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load
         */
        deferEmptyText: true,

        /**
         * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events
         */
        trackOver: false,

        /**
         * @cfg {Boolean} blockRefresh Set this to true to ignore datachanged events on the bound store. This is useful if
         * you wish to provide custom transition animations via a plugin (defaults to false)
         */
        blockRefresh: false,

        /**
         * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selection within the DataView. Defaults to <tt>false</tt>.
         * This configuration will lock the selection model that the DataView uses.</p>
         */

        //private
        last: false,

        triggerEvent: 'itemclick',
        triggerCtEvent: 'containerclick',

        addCmpEvents: function() {

        },

        // private
        initComponent : function(){
            var me = this,
                isDef = Ext.isDefined,
                itemTpl = me.itemTpl,
                memberFn = {};

            if (itemTpl) {
                if (Ext.isArray(itemTpl)) {
                    // string array
                    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;
                }

                itemTpl = Ext.String.format('<tpl for="."><div class="{0}">{1}</div></tpl>', me.itemCls, itemTpl);
                me.tpl = Ext.create('Ext.XTemplate', itemTpl, memberFn);
            }

            //<debug>
            if (!isDef(me.tpl) || !isDef(me.itemSelector)) {
                Ext.Error.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();
            if(Ext.isString(me.tpl) || Ext.isArray(me.tpl)){
                me.tpl = Ext.create('Ext.XTemplate', me.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 (me.overItemCls) {
                me.trackOver = true;
            }

            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>

            me.addEvents(
                /**
                 * @event beforerefresh
                 * Fires before the view is refreshed
                 * @param {Ext.view.View} this The DataView object
                 */
                'beforerefresh',
                /**
                 * @event refresh
                 * Fires when the view is refreshed
                 * @param {Ext.view.View} this The DataView object
                 */
                'refresh',
                /**
                 * @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/node
                 * @param {HTMLElement} node The node that has just been updated
                 */
                'itemupdate',
                /**
                 * @event itemadd
                 * Fires when the nodes associated with an recordset have been added to the underlying store
                 * @param {Array[Ext.data.Model]} records The model instance
                 * @param {Number} index The index at which the set of record/nodes starts
                 * @param {Array[HTMLElement]} node The node that has just been updated
                 */
                'itemadd',
                /**
                 * @event itemremove
                 * Fires when the node associated with an individual record is removed
                 * @param {Ext.data.Model} record The model instance
                 * @param {Number} index The index of the record/node
                 */
                'itemremove'
            );

            me.addCmpEvents();

            if (me.store) {
                me.store = Ext.data.StoreManager.lookup(me.store);
            }
            me.all = new Ext.CompositeElementLite();
            me.getSelectionModel().bindComponent(me);
        },

        onRender: function() {
            var me = this,
                loadingText = me.loadingText,
                loadingHeight = me.loadingHeight,
                undef;

            me.callParent(arguments);
            if (loadingText) {

                // Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
                // If this DataView is floating, then mask this DataView.
                // Otherwise, mask its owning Container (or this, if there *is* no owning Container).
                // LoadMask captures the element upon render.
                me.loadMask = Ext.create('Ext.LoadMask', me.floating ? me : me.ownerCt || me, {
                    msg: loadingText,
                    msgCls: me.loadingCls,
                    useMsg: me.loadingUseMsg,
                    listeners: {
                        beforeshow: function() {
                            me.getTargetEl().update('');
                            me.getSelectionModel().deselectAll();
                            me.all.clear();
                            if (loadingHeight) {
                                me.setCalculatedSize(undef, loadingHeight);
                            }
                        },
                        hide: function() {
                            if (loadingHeight) {
                                me.setHeight(me.height);
                            }
                        }
                    }
                });
            }
        },

        getSelectionModel: function(){
            var me = this,
                mode = 'SINGLE';

            if (!me.selModel) {
                me.selModel = {};
            }

            if (me.simpleSelect) {
                mode = 'SIMPLE';
            } else if (me.multiSelect) {
                mode = 'MULTI';
            }

            Ext.applyIf(me.selModel, {
                allowDeselect: me.allowDeselect,
                mode: mode
            });

            if (!me.selModel.events) {
                me.selModel = Ext.create('Ext.selection.DataViewModel', me.selModel);
            }

            if (!me.selModel.hasRelaySetup) {
                me.relayEvents(me.selModel, ['selectionchange', 'beforeselect', 'select', 'deselect']);
                me.selModel.hasRelaySetup = true;
            }

            // lock the selection model if user
            // has disabled selection
            if (me.disableSelection) {
                me.selModel.locked = true;
            }

            return me.selModel;
        },

        /**
         * Refreshes the view by reloading the data from the store and re-rendering the template.
         */
        refresh: function() {
            var me = this,
                el,
                records;

            if (!me.rendered) {
                return;
            }

            me.fireEvent('beforerefresh', me);
            el = me.getTargetEl();
            records = me.store.getRange();

            el.update('');
            if (records.length < 1) {
                if (!me.deferEmptyText || me.hasSkippedEmptyText) {
                    el.update(me.emptyText);
                }
                me.all.clear();
            } else {
                me.tpl.overwrite(el, me.collectData(records, 0));
                me.all.fill(Ext.query(me.getItemSelector(), el.dom));
                me.updateIndexes(0);
            }

            me.selModel.refresh();
            me.hasSkippedEmptyText = true;
            me.fireEvent('refresh', me);
        },

        /**
         * 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 {Array/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 {Record} 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'}))
         */
        prepareData: function(data, index, record) {
            if (record) {
                Ext.apply(data, record.getAssociatedData());
            }
            return data;
        },

        /**
         * <p>Function which can be overridden which returns the data object passed to this
         * DataView's {@link #tpl template} to render the whole DataView.</p>
         * <p>This is usually an Array of data objects, each element of which is processed by an
         * {@link Ext.XTemplate XTemplate} which uses <tt>'&lt;tpl for="."&gt;'</tt> 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.</p>
         * @param {Array} 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 {Array} An Array of data objects to be processed by a repeating XTemplate. May also
         * contain <i>named</i> properties.
         */
        collectData : function(records, startIndex){
            var r = [],
                i = 0,
                len = records.length;

            for(; i < len; i++){
                r[r.length] = this.prepareData(records[i].data, startIndex + i, records[i]);
            }

            return r;
        },

        // private
        bufferRender : function(records, index){
            var div = document.createElement('div');
            this.tpl.overwrite(div, this.collectData(records, index));
            return Ext.query(this.getItemSelector(), div);
        },

        // private
        onUpdate : function(ds, record){
            var me = this,
                index = me.store.indexOf(record),
                original,
                node;

            if (index > -1){
                original = me.all.elements[index];
                node = me.bufferRender([record], index)[0];

                me.all.replaceElement(index, node, true);
                me.updateIndexes(index, index);

                // Maintain selection after update
                // TODO: Move to approriate event handler.
                me.selModel.refresh();
                me.fireEvent('itemupdate', record, index, node);
            }

        },

        // private
        onAdd : function(ds, records, index) {
            var me = this,
                nodes;

            if (me.all.getCount() === 0) {
                me.refresh();
                return;
            }

            nodes = me.bufferRender(records, index);
            me.doAdd(nodes, records, index);

            me.selModel.refresh();
            me.updateIndexes(index);
            me.fireEvent('itemadd', records, index, nodes);
        },

        doAdd: function(nodes, records, index) {
            var n, a = this.all.elements;
            if (index < this.all.getCount()) {
                n = this.all.item(index).insertSibling(nodes, 'before', true);
                a.splice.apply(a, [index, 0].concat(nodes));
            }
            else {
                n = this.all.last().insertSibling(nodes, 'after', true);
                a.push.apply(a, nodes);
            }
        },

        // private
        onRemove : function(ds, record, index) {
            var me = this;

            me.doRemove(record, index);
            me.updateIndexes(index);
            if (me.store.getCount() === 0){
                me.refresh();
            }
            me.fireEvent('itemremove', record, index);
        },

        doRemove: function(record, index) {
            this.all.removeElement(index, true);
        },

        /**
         * Refreshes an individual node's data from the store.
         * @param {Number} index The item's data index in the store
         */
        refreshNode : function(index){
            this.onUpdate(this.store, this.store.getAt(index));
        },

        // private
        updateIndexes : function(startIndex, endIndex) {
            var ns = this.all.elements,
                records = this.store.getRange();
            startIndex = startIndex || 0;
            endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
            for(var i = startIndex; i <= endIndex; i++){
                ns[i].viewIndex = i;
                ns[i].viewRecordId = records[i].internalId;
                if (!ns[i].boundView) {
                    ns[i].boundView = this.id;
                }
            }
        },

        /**
         * Returns the store associated with this DataView.
         * @return {Ext.data.Store} The store
         */
        getStore : function(){
            return this.store;
        },

        /**
         * Changes the data store bound to this view and refreshes it.
         * @param {Store} store The store to bind to this view
         */
        bindStore : function(store, initial) {
            var me = this;

            if (!initial && me.store) {
                if (store !== me.store && me.store.autoDestroy) {
                    me.store.destroy();
                }
                else {
                    me.mun(me.store, {
                        scope: me,
                        datachanged: me.onDataChanged,
                        add: me.onAdd,
                        remove: me.onRemove,
                        update: me.onUpdate,
                        clear: me.refresh
                    });
                }
                if (!store) {
                    if (me.loadMask) {
                        me.loadMask.bindStore(null);
                    }
                    me.store = null;
                }
            }
            if (store) {
                store = Ext.data.StoreManager.lookup(store);
                me.mon(store, {
                    scope: me,
                    datachanged: me.onDataChanged,
                    add: me.onAdd,
                    remove: me.onRemove,
                    update: me.onUpdate,
                    clear: me.refresh
                });
                if (me.loadMask) {
                    me.loadMask.bindStore(store);
                }
            }

            me.store = store;
            // Bind the store to our selection model
            me.getSelectionModel().bind(store);

            if (store) {
                me.refresh(true);
            }
        },

        /**
         * @private
         * Calls this.refresh if this.blockRefresh is not true
         */
        onDataChanged: function() {
            if (this.blockRefresh !== true) {
                this.refresh.apply(this, arguments);
            }
        },

        /**
         * 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.EventObject or null if it is not found.
         * @param {Ext.EventObject} e
         */
        findTargetByEvent: function(e) {
            return e.getTarget(this.getItemSelector(), this.getTargetEl());
        },

        /**
         * Gets the currently selected nodes.
         * @return {Array} An array of HTMLElements
         */
        getSelectedNodes: function(){
            var nodes   = [],
                records = this.selModel.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 {Array} nodes The nodes to evaluate
         * @return {Array} records The {@link Ext.data.Model} objects
         */
        getRecords: function(nodes) {
            var records = [],
                i = 0,
                len = nodes.length,
                data = this.store.data;

            for (; i < len; i++) {
                records[records.length] = data.getByKey(nodes[i].viewRecordId);
            }

            return records;
        },

        /**
         * Gets a record from a node
         * @param {Element/HTMLElement} node The node to evaluate
         *
         * @return {Record} record The {@link Ext.data.Model} object
         */
        getRecord: function(node){
            return this.store.data.getByKey(Ext.getDom(node).viewRecordId);
        },

        /**
         * 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
         */
        isSelected : function(node) {
            // TODO: El/Idx/Record
            var r = this.getRecord(node);
            return this.selModel.isSelected(r);
        },

        /**
         * Selects a record instance by record instance or index.
         * @param {Ext.data.Model/Index} records An array of records or an index
         * @param {Boolean} keepExisting
         * @param {Boolean} suppressEvent Set to false to not fire a select event
         */
        select: function(records, keepExisting, suppressEvent) {
            this.selModel.select(records, keepExisting, suppressEvent);
        },

        /**
         * Deselects a record instance by record instance or index.
         * @param {Ext.data.Model/Index} records An array of records or an index
         * @param {Boolean} suppressEvent Set to false to not fire a deselect event
         */
        deselect: function(records, suppressEvent) {
            this.selModel.deselect(records, suppressEvent);
        },

        /**
         * Gets a template node.
         * @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node, index of a template node,
         * the id of a template node or the record associated with the node.
         * @return {HTMLElement} The node or null if it wasn't found
         */
        getNode : function(nodeInfo) {
            if (Ext.isString(nodeInfo)) {
                return document.getElementById(nodeInfo);
            } else if (Ext.isNumber(nodeInfo)) {
                return this.all.elements[nodeInfo];
            } else if (nodeInfo instanceof Ext.data.Model) {
                return this.getNodeByRecord(nodeInfo);
            }
            return nodeInfo;
        },

        /**
         * @private
         */
        getNodeByRecord: function(record) {
            var ns = this.all.elements,
                ln = ns.length,
                i = 0;

            for (; i < ln; i++) {
                if (ns[i].viewRecordId === record.internalId) {
                    return ns[i];
                }
            }

            return null;
        },

        /**
         * Gets a range nodes.
         * @param {Number} start (optional) The index of the first node in the range
         * @param {Number} end (optional) The index of the last node in the range
         * @return {Array} An array of nodes
         */
        getNodes: function(start, end) {
            var ns = this.all.elements,
                nodes = [],
                i;

            start = start || 0;
            end = !Ext.isDefined(end) ? Math.max(ns.length - 1, 0) : end;
            if (start <= end) {
                for (i = start; i <= end && ns[i]; i++) {
                    nodes.push(ns[i]);
                }
            } else {
                for (i = start; i >= end && ns[i]; i--) {
                    nodes.push(ns[i]);
                }
            }
            return nodes;
        },

        /**
         * Finds the index of the passed node.
         * @param {HTMLElement/String/Number/Record} nodeInfo An HTMLElement template node, index of a template node, the id of a template node
         * or a record associated with a node.
         * @return {Number} The index of the node or -1
         */
        indexOf: function(node) {
            node = this.getNode(node);
            if (Ext.isNumber(node.viewIndex)) {
                return node.viewIndex;
            }
            return this.all.indexOf(node);
        },

        onDestroy : function() {
            var me = this;

            me.all.clear();
            me.callParent();
            me.bindStore(null);
            me.selModel.destroy();
        },

        // invoked by the selection model to maintain visual UI cues
        onItemSelect: function(record) {
            var node = this.getNode(record);
            Ext.fly(node).addCls(this.selectedItemCls);
        },

        // invoked by the selection model to maintain visual UI cues
        onItemDeselect: function(record) {
            var node = this.getNode(record);
            Ext.fly(node).removeCls(this.selectedItemCls);
        },

        getItemSelector: function() {
            return this.itemSelector;
        }
    }, function() {
        // all of this information is available directly
        // from the SelectionModel itself, the only added methods
        // to DataView regarding selection will perform some transformation/lookup
        // between HTMLElement/Nodes to records and vice versa.
        Ext.deprecate('extjs', '4.0', function() {
            Ext.view.AbstractView.override({
                /**
                 * @cfg {Boolean} multiSelect
                 * True to allow selection of more than one item at a time, false to allow selection of only a single item
                 * at a time or no selection at all, depending on the value of {@link #singleSelect} (defaults to false).
                 */
                /**
                 * @cfg {Boolean} singleSelect
                 * True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false).
                 * Note that if {@link #multiSelect} = true, this value will be ignored.
                 */
                /**
                 * @cfg {Boolean} simpleSelect
                 * True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl,
                 * false to force the user to hold Ctrl or Shift to select more than on item (defaults to false).
                 */

                /**
                 * Gets the number of selected nodes.
                 * @return {Number} The node count
                 */
                getSelectionCount : function(){
                    console.warn("DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel");
                    return this.selModel.getSelection().length;
                },

                /**
                 * Gets an array of the selected records
                 * @return {Array} An array of {@link Ext.data.Model} objects
                 */
                getSelectedRecords : function(){
                    console.warn("DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel");
                    return this.selModel.getSelection();
                },

                select: function(records, keepExisting, supressEvents) {
                    console.warn("DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()");
                    var sm = this.getSelectionModel();
                    return sm.select.apply(sm, arguments);
                },

                clearSelections: function() {
                    console.warn("DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()");
                    var sm = this.getSelectionModel();
                    return sm.deselectAll();
                }
            });
        });
    });