Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / AbstractView.html
index 4ebd8f7..8e48d6d 100644 (file)
@@ -1,4 +1,21 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-view.AbstractView'>/**
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-view-AbstractView'>/**
 </span> * @class Ext.view.AbstractView
  * @extends Ext.Component
  * This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.
@@ -13,30 +30,30 @@ Ext.define('Ext.view.AbstractView', {
         'Ext.DomQuery',
         'Ext.selection.DataViewModel'
     ],
-    
+
     inheritableStatics: {
         getRecord: function(node) {
             return this.getBoundView(node).getRecord(node);
         },
-        
+
         getBoundView: function(node) {
             return Ext.getCmp(node.boundView);
         }
     },
-    
-<span id='Ext-view.AbstractView-cfg-tpl'>    /**
+
+<span id='Ext-view-AbstractView-cfg-tpl'>    /**
 </span>     * @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}.
      */
-<span id='Ext-view.AbstractView-cfg-store'>    /**
+<span id='Ext-view-AbstractView-cfg-store'>    /**
 </span>     * @cfg {Ext.data.Store} store
      * @required
      * The {@link Ext.data.Store} to bind this DataView to.
      */
 
-<span id='Ext-view.AbstractView-cfg-itemSelector'>    /**
+<span id='Ext-view-AbstractView-cfg-itemSelector'>    /**
 </span>     * @cfg {String} itemSelector
      * @required
      * &lt;b&gt;This is a required setting&lt;/b&gt;. A simple CSS selector (e.g. &lt;tt&gt;div.some-class&lt;/tt&gt; or
@@ -44,27 +61,27 @@ Ext.define('Ext.view.AbstractView', {
      * 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.
      */
-    
-<span id='Ext-view.AbstractView-cfg-itemCls'>    /**
+
+<span id='Ext-view-AbstractView-cfg-itemCls'>    /**
 </span>     * @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',
-    
-<span id='Ext-view.AbstractView-cfg-itemTpl'>    /**
+
+<span id='Ext-view-AbstractView-cfg-itemTpl'>    /**
 </span>     * @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.
      */
 
-<span id='Ext-view.AbstractView-cfg-overItemCls'>    /**
+<span id='Ext-view-AbstractView-cfg-overItemCls'>    /**
 </span>     * @cfg {String} overItemCls
-     * A CSS class to apply to each item in the view on mouseover (defaults to undefined). 
+     * 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.
      */
 
-<span id='Ext-view.AbstractView-cfg-loadingText'>    /**
+<span id='Ext-view-AbstractView-cfg-loadingText'>    /**
 </span>     * @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
@@ -72,33 +89,40 @@ Ext.define('Ext.view.AbstractView', {
      */
     loadingText: 'Loading...',
     
-<span id='Ext-view.AbstractView-cfg-loadingCls'>    /**
+<span id='Ext-view-AbstractView-cfg-loadMask'>    /**
+</span>     * @cfg {Boolean/Object} loadMask
+     * False to disable a load mask from displaying will the view is loading. This can also be a
+     * {@link Ext.LoadMask} configuration object. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
+     */
+    loadMask: true,
+
+<span id='Ext-view-AbstractView-cfg-loadingCls'>    /**
 </span>     * @cfg {String} loadingCls
      * The CSS class to apply to the loading message element (defaults to Ext.LoadMask.prototype.msgCls &quot;x-mask-loading&quot;)
      */
-    
-<span id='Ext-view.AbstractView-cfg-loadingUseMsg'>    /**
+
+<span id='Ext-view-AbstractView-cfg-loadingUseMsg'>    /**
 </span>     * @cfg {Boolean} loadingUseMsg
      * Whether or not to use the loading message.
      * @private
      */
     loadingUseMsg: true,
-    
 
-<span id='Ext-view.AbstractView-cfg-loadingHeight'>    /**
+
+<span id='Ext-view-AbstractView-cfg-loadingHeight'>    /**
 </span>     * @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.
      */
 
-<span id='Ext-view.AbstractView-cfg-selectedItemCls'>    /**
+<span id='Ext-view-AbstractView-cfg-selectedItemCls'>    /**
 </span>     * @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',
 
-<span id='Ext-view.AbstractView-cfg-emptyText'>    /**
+<span id='Ext-view-AbstractView-cfg-emptyText'>    /**
 </span>     * @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
@@ -106,23 +130,23 @@ Ext.define('Ext.view.AbstractView', {
      */
     emptyText: &quot;&quot;,
 
-<span id='Ext-view.AbstractView-cfg-deferEmptyText'>    /**
+<span id='Ext-view-AbstractView-cfg-deferEmptyText'>    /**
 </span>     * @cfg {Boolean} deferEmptyText True to defer emptyText being applied until the store's first load
      */
     deferEmptyText: true,
 
-<span id='Ext-view.AbstractView-cfg-trackOver'>    /**
+<span id='Ext-view-AbstractView-cfg-trackOver'>    /**
 </span>     * @cfg {Boolean} trackOver True to enable mouseenter and mouseleave events
      */
     trackOver: false,
 
-<span id='Ext-view.AbstractView-cfg-blockRefresh'>    /**
+<span id='Ext-view-AbstractView-cfg-blockRefresh'>    /**
 </span>     * @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,
 
-<span id='Ext-view.AbstractView-cfg-disableSelection'>    /**
+<span id='Ext-view-AbstractView-cfg-disableSelection'>    /**
 </span>     * @cfg {Boolean} disableSelection &lt;p&gt;&lt;tt&gt;true&lt;/tt&gt; to disable selection within the DataView. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
      * This configuration will lock the selection model that the DataView uses.&lt;/p&gt;
      */
@@ -130,12 +154,12 @@ Ext.define('Ext.view.AbstractView', {
 
     //private
     last: false,
-    
+
     triggerEvent: 'itemclick',
     triggerCtEvent: 'containerclick',
-    
+
     addCmpEvents: function() {
-        
+
     },
 
     // private
@@ -144,7 +168,7 @@ Ext.define('Ext.view.AbstractView', {
             isDef = Ext.isDefined,
             itemTpl = me.itemTpl,
             memberFn = {};
-            
+
         if (itemTpl) {
             if (Ext.isArray(itemTpl)) {
                 // string array
@@ -154,11 +178,11 @@ Ext.define('Ext.view.AbstractView', {
                 memberFn = Ext.apply(memberFn, itemTpl.initialConfig);
                 itemTpl = itemTpl.html;
             }
-            
+
             if (!me.itemSelector) {
                 me.itemSelector = '.' + me.itemCls;
             }
-            
+
             itemTpl = Ext.String.format('&lt;tpl for=&quot;.&quot;&gt;&lt;div class=&quot;{0}&quot;&gt;{1}&lt;/div&gt;&lt;/tpl&gt;', me.itemCls, itemTpl);
             me.tpl = Ext.create('Ext.XTemplate', itemTpl, memberFn);
         }
@@ -194,7 +218,7 @@ Ext.define('Ext.view.AbstractView', {
         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.');
@@ -204,21 +228,21 @@ Ext.define('Ext.view.AbstractView', {
             delete me.selectedClass;
         }
         //&lt;/debug&gt;
-        
+
         me.addEvents(
-<span id='Ext-view.AbstractView-event-beforerefresh'>            /**
+<span id='Ext-view-AbstractView-event-beforerefresh'>            /**
 </span>             * @event beforerefresh
              * Fires before the view is refreshed
              * @param {Ext.view.View} this The DataView object
              */
             'beforerefresh',
-<span id='Ext-view.AbstractView-event-refresh'>            /**
+<span id='Ext-view-AbstractView-event-refresh'>            /**
 </span>             * @event refresh
              * Fires when the view is refreshed
              * @param {Ext.view.View} this The DataView object
              */
             'refresh',
-<span id='Ext-view.AbstractView-event-itemupdate'>            /**
+<span id='Ext-view-AbstractView-event-itemupdate'>            /**
 </span>             * @event itemupdate
              * Fires when the node associated with an individual record is updated
              * @param {Ext.data.Model} record The model instance
@@ -226,7 +250,7 @@ Ext.define('Ext.view.AbstractView', {
              * @param {HTMLElement} node The node that has just been updated
              */
             'itemupdate',
-<span id='Ext-view.AbstractView-event-itemadd'>            /**
+<span id='Ext-view-AbstractView-event-itemadd'>            /**
 </span>             * @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
@@ -234,7 +258,7 @@ Ext.define('Ext.view.AbstractView', {
              * @param {Array[HTMLElement]} node The node that has just been updated
              */
             'itemadd',
-<span id='Ext-view.AbstractView-event-itemremove'>            /**
+<span id='Ext-view-AbstractView-event-itemremove'>            /**
 </span>             * @event itemremove
              * Fires when the node associated with an individual record is removed
              * @param {Ext.data.Model} record The model instance
@@ -249,45 +273,65 @@ Ext.define('Ext.view.AbstractView', {
             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;
+            mask = me.loadMask,
+            cfg = {
+                msg: me.loadingText,
+                msgCls: me.loadingCls,
+                useMsg: me.loadingUseMsg
+            };
 
         me.callParent(arguments);
-        if (loadingText) {
-            
+
+        if (mask) {
+            // either a config object 
+            if (Ext.isObject(mask)) {
+                cfg = Ext.apply(cfg, mask);
+            }
             // 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);
-                        }
-                    }
-                }
+            me.loadMask = Ext.create('Ext.LoadMask', me.floating ? me : me.ownerCt || me, cfg);
+            me.loadMask.on({
+                scope: me,
+                beforeshow: me.onMaskBeforeShow,
+                hide: me.onMaskHide
             });
         }
     },
+    
+    onMaskBeforeShow: function(){
+        var me = this;
+        me.getSelectionModel().deselectAll();
+        me.all.clear();
+        if (me.loadingHeight) {
+            me.setCalculatedSize(undefined, me.loadingHeight);
+        }
+    },
+    
+    onMaskHide: function(){
+        if (!this.destroying &amp;&amp; this.loadingHeight) {
+            this.setHeight(this.height);
+        }
+    },
+
+    afterRender: function() {
+        this.callParent(arguments);
 
+        // Init the SelectionModel after any on('render') listeners have been added.
+        // Drag plugins create a DragDrop instance in a render listener, and that needs
+        // to see an itemmousedown event first.
+        this.getSelectionModel().bindComponent(this);
+    },
+
+<span id='Ext-view-AbstractView-method-getSelectionModel'>    /**
+</span>     * Gets the selection model for this view.
+     * @return {Ext.selection.Model} The selection model
+     */
     getSelectionModel: function(){
         var me = this,
             mode = 'SINGLE';
@@ -312,7 +356,9 @@ Ext.define('Ext.view.AbstractView', {
         }
 
         if (!me.selModel.hasRelaySetup) {
-            me.relayEvents(me.selModel, ['selectionchange', 'beforeselect', 'select', 'deselect']);
+            me.relayEvents(me.selModel, [
+                'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect'
+            ]);
             me.selModel.hasRelaySetup = true;
         }
 
@@ -325,18 +371,18 @@ Ext.define('Ext.view.AbstractView', {
         return me.selModel;
     },
 
-<span id='Ext-view.AbstractView-method-refresh'>    /**
+<span id='Ext-view-AbstractView-method-refresh'>    /**
 </span>     * 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();
@@ -352,13 +398,13 @@ Ext.define('Ext.view.AbstractView', {
             me.all.fill(Ext.query(me.getItemSelector(), el.dom));
             me.updateIndexes(0);
         }
-        
+
         me.selModel.refresh();
         me.hasSkippedEmptyText = true;
         me.fireEvent('refresh', me);
     },
 
-<span id='Ext-view.AbstractView-method-prepareData'>    /**
+<span id='Ext-view-AbstractView-method-prepareData'>    /**
 </span>     * 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.
@@ -368,13 +414,13 @@ Ext.define('Ext.view.AbstractView', {
      * (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());            
+        if (record) {
+            Ext.apply(data, record.getAssociatedData());
         }
         return data;
     },
-    
-<span id='Ext-view.AbstractView-method-collectData'>    /**
+
+<span id='Ext-view-AbstractView-method-collectData'>    /**
 </span>     * &lt;p&gt;Function which can be overridden which returns the data object passed to this
      * DataView's {@link #tpl template} to render the whole DataView.&lt;/p&gt;
      * &lt;p&gt;This is usually an Array of data objects, each element of which is processed by an
@@ -389,12 +435,13 @@ Ext.define('Ext.view.AbstractView', {
     collectData : function(records, startIndex){
         var r = [],
             i = 0,
-            len = records.length;
+            len = records.length,
+            record;
 
         for(; i &lt; len; i++){
-            r[r.length] = this.prepareData(records[i].data, startIndex + i, records[i]);
+            record = records[i];
+            r[r.length] = this.prepareData(record[record.persistenceProperty], startIndex + i, record);
         }
-
         return r;
     },
 
@@ -409,11 +456,9 @@ Ext.define('Ext.view.AbstractView', {
     onUpdate : function(ds, record){
         var me = this,
             index = me.store.indexOf(record),
-            original,
             node;
 
         if (index &gt; -1){
-            original = me.all.elements[index];
             node = me.bufferRender([record], index)[0];
 
             me.all.replaceElement(index, node, true);
@@ -431,12 +476,12 @@ Ext.define('Ext.view.AbstractView', {
     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);
 
@@ -446,21 +491,22 @@ Ext.define('Ext.view.AbstractView', {
     },
 
     doAdd: function(nodes, records, index) {
-        var n, a = this.all.elements;
-        if (index &lt; this.all.getCount()) {
-            n = this.all.item(index).insertSibling(nodes, 'before', true);
-            a.splice.apply(a, [index, 0].concat(nodes));
-        } 
+        var all = this.all;
+
+        if (index &lt; all.getCount()) {
+            all.item(index).insertSibling(nodes, 'before', true);
+        }
         else {
-            n = this.all.last().insertSibling(nodes, 'after', true);
-            a.push.apply(a, nodes);
-        }    
+            all.last().insertSibling(nodes, 'after', true);
+        }
+
+        Ext.Array.insert(all.elements, index, nodes);
     },
-    
+
     // private
     onRemove : function(ds, record, index) {
         var me = this;
-        
+
         me.doRemove(record, index);
         me.updateIndexes(index);
         if (me.store.getCount() === 0){
@@ -468,12 +514,12 @@ Ext.define('Ext.view.AbstractView', {
         }
         me.fireEvent('itemremove', record, index);
     },
-    
+
     doRemove: function(record, index) {
         this.all.removeElement(index, true);
     },
 
-<span id='Ext-view.AbstractView-method-refreshNode'>    /**
+<span id='Ext-view-AbstractView-method-refreshNode'>    /**
 </span>     * Refreshes an individual node's data from the store.
      * @param {Number} index The item's data index in the store
      */
@@ -496,7 +542,7 @@ Ext.define('Ext.view.AbstractView', {
         }
     },
 
-<span id='Ext-view.AbstractView-method-getStore'>    /**
+<span id='Ext-view-AbstractView-method-getStore'>    /**
 </span>     * Returns the store associated with this DataView.
      * @return {Ext.data.Store} The store
      */
@@ -504,17 +550,17 @@ Ext.define('Ext.view.AbstractView', {
         return this.store;
     },
 
-<span id='Ext-view.AbstractView-method-bindStore'>    /**
+<span id='Ext-view-AbstractView-method-bindStore'>    /**
 </span>     * 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 &amp;&amp; me.store) {
             if (store !== me.store &amp;&amp; me.store.autoDestroy) {
                 me.store.destroy();
-            } 
+            }
             else {
                 me.mun(me.store, {
                     scope: me,
@@ -546,17 +592,17 @@ Ext.define('Ext.view.AbstractView', {
                 me.loadMask.bindStore(store);
             }
         }
-        
+
         me.store = store;
         // Bind the store to our selection model
         me.getSelectionModel().bind(store);
-        
-        if (store) {
+
+        if (store &amp;&amp; (!initial || store.getCount())) {
             me.refresh(true);
         }
     },
 
-<span id='Ext-view.AbstractView-method-onDataChanged'>    /**
+<span id='Ext-view-AbstractView-method-onDataChanged'>    /**
 </span>     * @private
      * Calls this.refresh if this.blockRefresh is not true
      */
@@ -566,7 +612,7 @@ Ext.define('Ext.view.AbstractView', {
         }
     },
 
-<span id='Ext-view.AbstractView-method-findItemByChild'>    /**
+<span id='Ext-view-AbstractView-method-findItemByChild'>    /**
 </span>     * 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
@@ -574,8 +620,8 @@ Ext.define('Ext.view.AbstractView', {
     findItemByChild: function(node){
         return Ext.fly(node).findParent(this.getItemSelector(), this.getTargetEl());
     },
-    
-<span id='Ext-view.AbstractView-method-findTargetByEvent'>    /**
+
+<span id='Ext-view-AbstractView-method-findTargetByEvent'>    /**
 </span>     * Returns the template node by the Ext.EventObject or null if it is not found.
      * @param {Ext.EventObject} e
      */
@@ -584,7 +630,7 @@ Ext.define('Ext.view.AbstractView', {
     },
 
 
-<span id='Ext-view.AbstractView-method-getSelectedNodes'>    /**
+<span id='Ext-view-AbstractView-method-getSelectedNodes'>    /**
 </span>     * Gets the currently selected nodes.
      * @return {Array} An array of HTMLElements
      */
@@ -601,7 +647,7 @@ Ext.define('Ext.view.AbstractView', {
         return nodes;
     },
 
-<span id='Ext-view.AbstractView-method-getRecords'>    /**
+<span id='Ext-view-AbstractView-method-getRecords'>    /**
 </span>     * 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
@@ -619,18 +665,18 @@ Ext.define('Ext.view.AbstractView', {
         return records;
     },
 
-<span id='Ext-view.AbstractView-method-getRecord'>    /**
+<span id='Ext-view-AbstractView-method-getRecord'>    /**
 </span>     * 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);
     },
-    
 
-<span id='Ext-view.AbstractView-method-isSelected'>    /**
+
+<span id='Ext-view-AbstractView-method-isSelected'>    /**
 </span>     * 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
@@ -640,8 +686,8 @@ Ext.define('Ext.view.AbstractView', {
         var r = this.getRecord(node);
         return this.selModel.isSelected(r);
     },
-    
-<span id='Ext-view.AbstractView-method-select'>    /**
+
+<span id='Ext-view-AbstractView-method-select'>    /**
 </span>     * 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
@@ -651,7 +697,7 @@ Ext.define('Ext.view.AbstractView', {
         this.selModel.select(records, keepExisting, suppressEvent);
     },
 
-<span id='Ext-view.AbstractView-method-deselect'>    /**
+<span id='Ext-view-AbstractView-method-deselect'>    /**
 </span>     * 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
@@ -660,7 +706,7 @@ Ext.define('Ext.view.AbstractView', {
         this.selModel.deselect(records, suppressEvent);
     },
 
-<span id='Ext-view.AbstractView-method-getNode'>    /**
+<span id='Ext-view-AbstractView-method-getNode'>    /**
 </span>     * 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.
@@ -676,25 +722,25 @@ Ext.define('Ext.view.AbstractView', {
         }
         return nodeInfo;
     },
-    
-<span id='Ext-view.AbstractView-method-getNodeByRecord'>    /**
+
+<span id='Ext-view-AbstractView-method-getNodeByRecord'>    /**
 </span>     * @private
      */
     getNodeByRecord: function(record) {
         var ns = this.all.elements,
             ln = ns.length,
             i = 0;
-        
+
         for (; i &lt; ln; i++) {
             if (ns[i].viewRecordId === record.internalId) {
                 return ns[i];
             }
         }
-        
+
         return null;
     },
-    
-<span id='Ext-view.AbstractView-method-getNodes'>    /**
+
+<span id='Ext-view-AbstractView-method-getNodes'>    /**
 </span>     * 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
@@ -719,7 +765,7 @@ Ext.define('Ext.view.AbstractView', {
         return nodes;
     },
 
-<span id='Ext-view.AbstractView-method-indexOf'>    /**
+<span id='Ext-view-AbstractView-method-indexOf'>    /**
 </span>     * 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.
@@ -735,7 +781,7 @@ Ext.define('Ext.view.AbstractView', {
 
     onDestroy : function() {
         var me = this;
-        
+
         me.all.clear();
         me.callParent();
         me.bindStore(null);
@@ -753,7 +799,7 @@ Ext.define('Ext.view.AbstractView', {
         var node = this.getNode(record);
         Ext.fly(node).removeCls(this.selectedItemCls);
     },
-    
+
     getItemSelector: function() {
         return this.itemSelector;
     }
@@ -764,52 +810,62 @@ Ext.define('Ext.view.AbstractView', {
     // between HTMLElement/Nodes to records and vice versa.
     Ext.deprecate('extjs', '4.0', function() {
         Ext.view.AbstractView.override({
-<span id='Ext-view.AbstractView-cfg-multiSelect'>            /**
+<span id='Ext-view-AbstractView-cfg-multiSelect'>            /**
 </span>             * @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).
              */
-<span id='Ext-view.AbstractView-cfg-singleSelect'>            /**
+<span id='Ext-view-AbstractView-cfg-singleSelect'>            /**
 </span>             * @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.
              */
-<span id='Ext-view.AbstractView-cfg-simpleSelect'>            /**
+<span id='Ext-view-AbstractView-cfg-simpleSelect'>            /**
 </span>             * @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).
              */
-            
-<span id='Ext-view.AbstractView-method-getSelectionCount'>            /**
+
+<span id='Ext-view-AbstractView-method-getSelectionCount'>            /**
 </span>             * Gets the number of selected nodes.
              * @return {Number} The node count
              */
             getSelectionCount : function(){
-                console.warn(&quot;DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel&quot;);
+                if (Ext.global.console) {
+                    Ext.global.console.warn(&quot;DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel&quot;);
+                }
                 return this.selModel.getSelection().length;
             },
-        
-<span id='Ext-view.AbstractView-method-getSelectedRecords'>            /**
+
+<span id='Ext-view-AbstractView-method-getSelectedRecords'>            /**
 </span>             * Gets an array of the selected records
              * @return {Array} An array of {@link Ext.data.Model} objects
              */
             getSelectedRecords : function(){
-                console.warn(&quot;DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel&quot;);
+                if (Ext.global.console) {
+                    Ext.global.console.warn(&quot;DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel&quot;);
+                }
                 return this.selModel.getSelection();
             },
-    
+
             select: function(records, keepExisting, supressEvents) {
-                console.warn(&quot;DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()&quot;);
+                if (Ext.global.console) {
+                    Ext.global.console.warn(&quot;DataView: select will be removed, please access select through a DataView's SelectionModel, ie: view.getSelectionModel().select()&quot;);
+                }
                 var sm = this.getSelectionModel();
                 return sm.select.apply(sm, arguments);
             },
-            
+
             clearSelections: function() {
-                console.warn(&quot;DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()&quot;);
+                if (Ext.global.console) {
+                    Ext.global.console.warn(&quot;DataView: clearSelections will be removed, please access deselectAll through DataView's SelectionModel, ie: view.getSelectionModel().deselectAll()&quot;);
+                }
                 var sm = this.getSelectionModel();
                 return sm.deselectAll();
             }
-        });    
+        });
     });
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>