git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / View3.html
diff --git a/docs/source/View3.html b/docs/source/View3.html
index 3caa8b1..ae1c1f6 100644 (file)
--- a/docs/source/View3.html
+++ b/docs/source/View3.html
@@ -1,60 +1,74 @@
-<!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.View'>/**
-</span> * @class Ext.view.View
- * @extends Ext.view.AbstractView
- *
- * A mechanism for displaying data using custom layout templates and formatting. DataView uses an {@link Ext.XTemplate}
- * as its internal templating mechanism, and is bound to an {@link Ext.data.Store}
- * so that as the data in the store changes the view is automatically updated to reflect the changes.  The view also
- * provides built-in behavior for many common events that can occur for its contained items including click, doubleclick,
- * mouseover, mouseout, etc. as well as a built-in selection model. &lt;b&gt;In order to use these features, an {@link #itemSelector}
- * config must be provided for the DataView to determine what nodes it will be working with.&lt;/b&gt;
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/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-View'>/**
+</span> * A mechanism for displaying data using custom layout templates and formatting.
  *
  *
- * The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
+ * The View uses an {@link Ext.XTemplate} as its internal templating mechanism, and is bound to an
+ * {@link Ext.data.Store} so that as the data in the store changes the view is automatically updated
+ * to reflect the changes. The view also provides built-in behavior for many common events that can
+ * occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a
+ * built-in selection model. **In order to use these features, an {@link #itemSelector} config must
+ * be provided for the DataView to determine what nodes it will be working with.**
  *
  *
- * {@img Ext.DataView/Ext.DataView.png Ext.DataView component}
+ * The example below binds a View to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
  *
  *
- *     Ext.regModel('Image', {
- *         Fields: [
- *             {name:'src', type:'string'},
- *             {name:'caption', type:'string'}
+ *     @example
+ *     Ext.define('Image', {
+ *         extend: 'Ext.data.Model',
+ *         fields: [
+ *             { name:'src', type:'string' },
+ *             { name:'caption', type:'string' }
  *         ]
  *     });
  *         ]
  *     });
- *     
+ *
  *     Ext.create('Ext.data.Store', {
  *         id:'imagesStore',
  *         model: 'Image',
  *         data: [
  *     Ext.create('Ext.data.Store', {
  *         id:'imagesStore',
  *         model: 'Image',
  *         data: [
- *             {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing &amp; Charts'},
- *             {src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
- *             {src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
- *             {src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}            
+ *             { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing &amp; Charts' },
+ *             { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
+ *             { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
+ *             { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
  *         ]
  *     });
  *         ]
  *     });
- *     
+ *
  *     var imageTpl = new Ext.XTemplate(
  *     var imageTpl = new Ext.XTemplate(
- *         '&amp;lt;tpl for=&quot;.&quot;&amp;gt;',
- *             '&amp;lt;div style=&quot;thumb-wrap&quot;&amp;gt;',
- *               '&amp;lt;img src=&quot;{src}&quot; /&amp;gt;',
- *               '&amp;lt;br/&amp;gt;&amp;lt;span&amp;gt;{caption}&amp;lt;/span&amp;gt;',
- *             '&amp;lt;/div&amp;gt;',
- *         '&amp;lt;/tpl&amp;gt;'
+ *         '&lt;tpl for=&quot;.&quot;&gt;',
+ *             '&lt;div style=&quot;margin-bottom: 10px;&quot; class=&quot;thumb-wrap&quot;&gt;',
+ *               '&lt;img src=&quot;{src}&quot; /&gt;',
+ *               '&lt;br/&gt;&lt;span&gt;{caption}&lt;/span&gt;',
+ *             '&lt;/div&gt;',
+ *         '&lt;/tpl&gt;'
  *     );
  *     );
- *     
- *     Ext.create('Ext.DataView', {
+ *
+ *     Ext.create('Ext.view.View', {
  *         store: Ext.data.StoreManager.lookup('imagesStore'),
  *         tpl: imageTpl,
  *         itemSelector: 'div.thumb-wrap',
  *         emptyText: 'No images available',
  *         renderTo: Ext.getBody()
  *     });
  *         store: Ext.data.StoreManager.lookup('imagesStore'),
  *         tpl: imageTpl,
  *         itemSelector: 'div.thumb-wrap',
  *         emptyText: 'No images available',
  *         renderTo: Ext.getBody()
  *     });
- *
- * @xtype dataview
  */
 Ext.define('Ext.view.View', {
     extend: 'Ext.view.AbstractView',
  */
 Ext.define('Ext.view.View', {
     extend: 'Ext.view.AbstractView',
-    alternateClassName: 'Ext.view.View',
+    alternateClassName: 'Ext.DataView',
     alias: 'widget.dataview',
     alias: 'widget.dataview',
-    
+
     inheritableStatics: {
         EventMap: {
             mousedown: 'MouseDown',
     inheritableStatics: {
         EventMap: {
             mousedown: 'MouseDown',
@@ -66,13 +80,14 @@ Ext.define('Ext.view.View', {
             mouseout: 'MouseOut',
             mouseenter: 'MouseEnter',
             mouseleave: 'MouseLeave',
             mouseout: 'MouseOut',
             mouseenter: 'MouseEnter',
             mouseleave: 'MouseLeave',
-            keydown: 'KeyDown'
+            keydown: 'KeyDown',
+            focus: 'Focus'
         }
     },
         }
     },
-    
+
     addCmpEvents: function() {
         this.addEvents(
     addCmpEvents: function() {
         this.addEvents(
-<span id='Ext-view.View-event-beforeitemmousedown'>            /**
+<span id='Ext-view-View-event-beforeitemmousedown'>            /**
 </span>             * @event beforeitemmousedown
              * Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemmousedown
              * Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -82,7 +97,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmousedown',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmousedown',
-<span id='Ext-view.View-event-beforeitemmouseup'>            /**
+<span id='Ext-view-View-event-beforeitemmouseup'>            /**
 </span>             * @event beforeitemmouseup
              * Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemmouseup
              * Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -92,7 +107,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmouseup',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmouseup',
-<span id='Ext-view.View-event-beforeitemmouseenter'>            /**
+<span id='Ext-view-View-event-beforeitemmouseenter'>            /**
 </span>             * @event beforeitemmouseenter
              * Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemmouseenter
              * Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -102,7 +117,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmouseenter',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmouseenter',
-<span id='Ext-view.View-event-beforeitemmouseleave'>            /**
+<span id='Ext-view-View-event-beforeitemmouseleave'>            /**
 </span>             * @event beforeitemmouseleave
              * Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemmouseleave
              * Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -112,7 +127,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmouseleave',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemmouseleave',
-<span id='Ext-view.View-event-beforeitemclick'>            /**
+<span id='Ext-view-View-event-beforeitemclick'>            /**
 </span>             * @event beforeitemclick
              * Fires before the click event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemclick
              * Fires before the click event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -122,7 +137,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemclick',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemclick',
-<span id='Ext-view.View-event-beforeitemdblclick'>            /**
+<span id='Ext-view-View-event-beforeitemdblclick'>            /**
 </span>             * @event beforeitemdblclick
              * Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemdblclick
              * Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -132,7 +147,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemdblclick',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemdblclick',
-<span id='Ext-view.View-event-beforeitemcontextmenu'>            /**
+<span id='Ext-view-View-event-beforeitemcontextmenu'>            /**
 </span>             * @event beforeitemcontextmenu
              * Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemcontextmenu
              * Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -142,7 +157,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemcontextmenu',
              * @param {Ext.EventObject} e The raw event object
              */
             'beforeitemcontextmenu',
-<span id='Ext-view.View-event-beforeitemkeydown'>            /**
+<span id='Ext-view-View-event-beforeitemkeydown'>            /**
 </span>             * @event beforeitemkeydown
              * Fires before the keydown event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
 </span>             * @event beforeitemkeydown
              * Fires before the keydown event on an item is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
@@ -152,7 +167,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'beforeitemkeydown',
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'beforeitemkeydown',
-<span id='Ext-view.View-event-itemmousedown'>            /**
+<span id='Ext-view-View-event-itemmousedown'>            /**
 </span>             * @event itemmousedown
              * Fires when there is a mouse down on an item
              * @param {Ext.view.View} this
 </span>             * @event itemmousedown
              * Fires when there is a mouse down on an item
              * @param {Ext.view.View} this
@@ -162,7 +177,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmousedown',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmousedown',
-<span id='Ext-view.View-event-itemmouseup'>            /**
+<span id='Ext-view-View-event-itemmouseup'>            /**
 </span>             * @event itemmouseup
              * Fires when there is a mouse up on an item
              * @param {Ext.view.View} this
 </span>             * @event itemmouseup
              * Fires when there is a mouse up on an item
              * @param {Ext.view.View} this
@@ -172,7 +187,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmouseup',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmouseup',
-<span id='Ext-view.View-event-itemmouseenter'>            /**
+<span id='Ext-view-View-event-itemmouseenter'>            /**
 </span>             * @event itemmouseenter
              * Fires when the mouse enters an item.
              * @param {Ext.view.View} this
 </span>             * @event itemmouseenter
              * Fires when the mouse enters an item.
              * @param {Ext.view.View} this
@@ -182,7 +197,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmouseenter',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmouseenter',
-<span id='Ext-view.View-event-itemmouseleave'>            /**
+<span id='Ext-view-View-event-itemmouseleave'>            /**
 </span>             * @event itemmouseleave
              * Fires when the mouse leaves an item.
              * @param {Ext.view.View} this
 </span>             * @event itemmouseleave
              * Fires when the mouse leaves an item.
              * @param {Ext.view.View} this
@@ -192,7 +207,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmouseleave',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemmouseleave',
-<span id='Ext-view.View-event-itemclick'>            /**
+<span id='Ext-view-View-event-itemclick'>            /**
 </span>             * @event itemclick
              * Fires when an item is clicked.
              * @param {Ext.view.View} this
 </span>             * @event itemclick
              * Fires when an item is clicked.
              * @param {Ext.view.View} this
@@ -202,7 +217,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemclick',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemclick',
-<span id='Ext-view.View-event-itemdblclick'>            /**
+<span id='Ext-view-View-event-itemdblclick'>            /**
 </span>             * @event itemdblclick
              * Fires when an item is double clicked.
              * @param {Ext.view.View} this
 </span>             * @event itemdblclick
              * Fires when an item is double clicked.
              * @param {Ext.view.View} this
@@ -212,7 +227,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemdblclick',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemdblclick',
-<span id='Ext-view.View-event-itemcontextmenu'>            /**
+<span id='Ext-view-View-event-itemcontextmenu'>            /**
 </span>             * @event itemcontextmenu
              * Fires when an item is right clicked.
              * @param {Ext.view.View} this
 </span>             * @event itemcontextmenu
              * Fires when an item is right clicked.
              * @param {Ext.view.View} this
@@ -222,7 +237,7 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object
              */
             'itemcontextmenu',
              * @param {Ext.EventObject} e The raw event object
              */
             'itemcontextmenu',
-<span id='Ext-view.View-event-itemkeydown'>            /**
+<span id='Ext-view-View-event-itemkeydown'>            /**
 </span>             * @event itemkeydown
              * Fires when a key is pressed while an item is currently selected.
              * @param {Ext.view.View} this
 </span>             * @event itemkeydown
              * Fires when a key is pressed while an item is currently selected.
              * @param {Ext.view.View} this
@@ -232,138 +247,145 @@ Ext.define('Ext.view.View', {
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'itemkeydown',
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'itemkeydown',
-<span id='Ext-view.View-event-beforecontainermousedown'>            /**
+<span id='Ext-view-View-event-beforecontainermousedown'>            /**
 </span>             * @event beforecontainermousedown
              * Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermousedown',
 </span>             * @event beforecontainermousedown
              * Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermousedown',
-<span id='Ext-view.View-event-beforecontainermouseup'>            /**
+<span id='Ext-view-View-event-beforecontainermouseup'>            /**
 </span>             * @event beforecontainermouseup
              * Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermouseup',
 </span>             * @event beforecontainermouseup
              * Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermouseup',
-<span id='Ext-view.View-event-beforecontainermouseover'>            /**
+<span id='Ext-view-View-event-beforecontainermouseover'>            /**
 </span>             * @event beforecontainermouseover
              * Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermouseover',
 </span>             * @event beforecontainermouseover
              * Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermouseover',
-<span id='Ext-view.View-event-beforecontainermouseout'>            /**
+<span id='Ext-view-View-event-beforecontainermouseout'>            /**
 </span>             * @event beforecontainermouseout
              * Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermouseout',
 </span>             * @event beforecontainermouseout
              * Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainermouseout',
-<span id='Ext-view.View-event-beforecontainerclick'>            /**
+<span id='Ext-view-View-event-beforecontainerclick'>            /**
 </span>             * @event beforecontainerclick
              * Fires before the click event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainerclick',
 </span>             * @event beforecontainerclick
              * Fires before the click event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainerclick',
-<span id='Ext-view.View-event-beforecontainerdblclick'>            /**
+<span id='Ext-view-View-event-beforecontainerdblclick'>            /**
 </span>             * @event beforecontainerdblclick
              * Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainerdblclick',
 </span>             * @event beforecontainerdblclick
              * Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainerdblclick',
-<span id='Ext-view.View-event-beforecontainercontextmenu'>            /**
+<span id='Ext-view-View-event-beforecontainercontextmenu'>            /**
 </span>             * @event beforecontainercontextmenu
              * Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainercontextmenu',
 </span>             * @event beforecontainercontextmenu
              * Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'beforecontainercontextmenu',
-<span id='Ext-view.View-event-beforecontainerkeydown'>            /**
+<span id='Ext-view-View-event-beforecontainerkeydown'>            /**
 </span>             * @event beforecontainerkeydown
              * Fires before the keydown event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'beforecontainerkeydown',
 </span>             * @event beforecontainerkeydown
              * Fires before the keydown event on the container is processed. Returns false to cancel the default action.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'beforecontainerkeydown',
-<span id='Ext-view.View-event-containermouseup'>            /**
+<span id='Ext-view-View-event-containermouseup'>            /**
 </span>             * @event containermouseup
              * Fires when there is a mouse up on the container
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containermouseup',
 </span>             * @event containermouseup
              * Fires when there is a mouse up on the container
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containermouseup',
-<span id='Ext-view.View-event-containermouseover'>            /**
+<span id='Ext-view-View-event-containermouseover'>            /**
 </span>             * @event containermouseover
              * Fires when you move the mouse over the container.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containermouseover',
 </span>             * @event containermouseover
              * Fires when you move the mouse over the container.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containermouseover',
-<span id='Ext-view.View-event-containermouseout'>            /**
+<span id='Ext-view-View-event-containermouseout'>            /**
 </span>             * @event containermouseout
              * Fires when you move the mouse out of the container.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containermouseout',
 </span>             * @event containermouseout
              * Fires when you move the mouse out of the container.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containermouseout',
-<span id='Ext-view.View-event-containerclick'>            /**
+<span id='Ext-view-View-event-containerclick'>            /**
 </span>             * @event containerclick
              * Fires when the container is clicked.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containerclick',
 </span>             * @event containerclick
              * Fires when the container is clicked.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containerclick',
-<span id='Ext-view.View-event-containerdblclick'>            /**
+<span id='Ext-view-View-event-containerdblclick'>            /**
 </span>             * @event containerdblclick
              * Fires when the container is double clicked.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containerdblclick',
 </span>             * @event containerdblclick
              * Fires when the container is double clicked.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containerdblclick',
-<span id='Ext-view.View-event-containercontextmenu'>            /**
+<span id='Ext-view-View-event-containercontextmenu'>            /**
 </span>             * @event containercontextmenu
              * Fires when the container is right clicked.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containercontextmenu',
 </span>             * @event containercontextmenu
              * Fires when the container is right clicked.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object
              */
             'containercontextmenu',
-<span id='Ext-view.View-event-containerkeydown'>            /**
+<span id='Ext-view-View-event-containerkeydown'>            /**
 </span>             * @event containerkeydown
              * Fires when a key is pressed while the container is focused, and no item is currently selected.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'containerkeydown',
 </span>             * @event containerkeydown
              * Fires when a key is pressed while the container is focused, and no item is currently selected.
              * @param {Ext.view.View} this
              * @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
              */
             'containerkeydown',
-            
-<span id='Ext-view.View-event-selectionchange'>            /**
+
+<span id='Ext-view-View-event-selectionchange'>            /**
 </span>             * @event selectionchange
              * Fires when the selected nodes change. Relayed event from the underlying selection model.
              * @param {Ext.view.View} this
 </span>             * @event selectionchange
              * Fires when the selected nodes change. Relayed event from the underlying selection model.
              * @param {Ext.view.View} this
-             * @param {Array} selections Array of the selected nodes
+             * @param {HTMLElement[]} selections Array of the selected nodes
              */
             'selectionchange',
              */
             'selectionchange',
-<span id='Ext-view.View-event-beforeselect'>            /**
+<span id='Ext-view-View-event-beforeselect'>            /**
 </span>             * @event beforeselect
              * Fires before a selection is made. If any handlers return false, the selection is cancelled.
              * @param {Ext.view.View} this
              * @param {HTMLElement} node The node to be selected
 </span>             * @event beforeselect
              * Fires before a selection is made. If any handlers return false, the selection is cancelled.
              * @param {Ext.view.View} this
              * @param {HTMLElement} node The node to be selected
-             * @param {Array} selections Array of currently selected nodes
+             * @param {HTMLElement[]} selections Array of currently selected nodes
              */
             'beforeselect'
         );
     },
     // private
     afterRender: function(){
              */
             'beforeselect'
         );
     },
     // private
     afterRender: function(){
-        var me = this, 
+        var me = this,
             listeners;
             listeners;
-        
+
         me.callParent();
 
         listeners = {
             scope: me,
         me.callParent();
 
         listeners = {
             scope: me,
+            /*
+             * We need to make copies of this since some of the events fired here will end up triggering
+             * a new event to be called and the shared event object will be mutated. In future we should
+             * investigate if there are any issues with creating a new event object for each event that
+             * is fired.
+             */
+            freezeEvent: true,
             click: me.handleEvent,
             mousedown: me.handleEvent,
             mouseup: me.handleEvent,
             click: me.handleEvent,
             mousedown: me.handleEvent,
             mouseup: me.handleEvent,
@@ -373,43 +395,61 @@ Ext.define('Ext.view.View', {
             mouseout: me.handleEvent,
             keydown: me.handleEvent
         };
             mouseout: me.handleEvent,
             keydown: me.handleEvent
         };
-        
+
         me.mon(me.getTargetEl(), listeners);
         me.mon(me.getTargetEl(), listeners);
-        
+
         if (me.store) {
             me.bindStore(me.store, true);
         }
     },
         if (me.store) {
             me.bindStore(me.store, true);
         }
     },
-    
+
     handleEvent: function(e) {
         if (this.processUIEvent(e) !== false) {
             this.processSpecialEvent(e);
         }
     },
     handleEvent: function(e) {
         if (this.processUIEvent(e) !== false) {
             this.processSpecialEvent(e);
         }
     },
-    
+
     // Private template method
     processItemEvent: Ext.emptyFn,
     processContainerEvent: Ext.emptyFn,
     processSpecialEvent: Ext.emptyFn,
     // Private template method
     processItemEvent: Ext.emptyFn,
     processContainerEvent: Ext.emptyFn,
     processSpecialEvent: Ext.emptyFn,
-    
-    processUIEvent: function(e, type) {
-        type = type || e.type;
+
+    /*
+     * Returns true if this mouseover/out event is still over the overItem.
+     */
+    stillOverItem: function (event, overItem) {
+        var nowOver;
+
+        // There is this weird bug when you hover over the border of a cell it is saying
+        // the target is the table.
+        // BrowserBug: IE6 &amp; 7. If me.mouseOverItem has been removed and is no longer
+        // in the DOM then accessing .offsetParent will throw an &quot;Unspecified error.&quot; exception.
+        // typeof'ng and checking to make sure the offsetParent is an object will NOT throw
+        // this hard exception.
+        if (overItem &amp;&amp; typeof(overItem.offsetParent) === &quot;object&quot;) {
+            // mouseout : relatedTarget == nowOver, target == wasOver
+            // mouseover: relatedTarget == wasOver, target == nowOver
+            nowOver = (event.type == 'mouseout') ? event.getRelatedTarget() : event.getTarget();
+            return Ext.fly(overItem).contains(nowOver);
+        }
+
+        return false;
+    },
+
+    processUIEvent: function(e) {
         var me = this,
             item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
             map = this.statics().EventMap,
         var me = this,
             item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
             map = this.statics().EventMap,
-            index, record;
-        
+            index, record,
+            type = e.type,
+            overItem = me.mouseOverItem,
+            newType;
+
         if (!item) {
         if (!item) {
-            // There is this weird bug when you hover over the border of a cell it is saying
-            // the target is the table.
-            // BrowserBug: IE6 &amp; 7. If me.mouseOverItem has been removed and is no longer
-            // in the DOM then accessing .offsetParent will throw an &quot;Unspecified error.&quot; exception.
-            // typeof'ng and checking to make sure the offsetParent is an object will NOT throw
-            // this hard exception.
-            if (type == 'mouseover' &amp;&amp; me.mouseOverItem &amp;&amp; typeof me.mouseOverItem.offsetParent === &quot;object&quot; &amp;&amp; Ext.fly(me.mouseOverItem).getRegion().contains(e.getPoint())) {
-                item = me.mouseOverItem;
+            if (type == 'mouseover' &amp;&amp; me.stillOverItem(e, overItem)) {
+                item = overItem;
             }
             }
-            
+
             // Try to get the selected item to handle the keydown event, otherwise we'll just fire a container keydown event
             if (type == 'keydown') {
                 record = me.getSelectionModel().getLastSelected();
             // Try to get the selected item to handle the keydown event, otherwise we'll just fire a container keydown event
             if (type == 'keydown') {
                 record = me.getSelectionModel().getLastSelected();
@@ -418,54 +458,53 @@ Ext.define('Ext.view.View', {
                 }
             }
         }
                 }
             }
         }
-        
+
         if (item) {
             index = me.indexOf(item);
             if (!record) {
                 record = me.getRecord(item);
             }
         if (item) {
             index = me.indexOf(item);
             if (!record) {
                 record = me.getRecord(item);
             }
-            
-            if (me.processItemEvent(type, record, item, index, e) === false) {
+
+            if (me.processItemEvent(record, item, index, e) === false) {
                 return false;
             }
                 return false;
             }
-            
-            type = me.isNewItemEvent(type, item, e);
-            if (type === false) {
+
+            newType = me.isNewItemEvent(item, e);
+            if (newType === false) {
                 return false;
             }
                 return false;
             }
-            
+
             if (
             if (
-                (me['onBeforeItem' + map[type]](record, item, index, e) === false) ||
-                (me.fireEvent('beforeitem' + type, me, record, item, index, e) === false) ||
-                (me['onItem' + map[type]](record, item, index, e) === false)
-            ) { 
+                (me['onBeforeItem' + map[newType]](record, item, index, e) === false) ||
+                (me.fireEvent('beforeitem' + newType, me, record, item, index, e) === false) ||
+                (me['onItem' + map[newType]](record, item, index, e) === false)
+            ) {
                 return false;
             }
                 return false;
             }
-            
-            me.fireEvent('item' + type, me, record, item, index, e);
-        } 
+
+            me.fireEvent('item' + newType, me, record, item, index, e);
+        }
         else {
             if (
         else {
             if (
-                (me.processContainerEvent(type, e) === false) ||
+                (me.processContainerEvent(e) === false) ||
                 (me['onBeforeContainer' + map[type]](e) === false) ||
                 (me.fireEvent('beforecontainer' + type, me, e) === false) ||
                 (me['onContainer' + map[type]](e) === false)
             ) {
                 return false;
             }
                 (me['onBeforeContainer' + map[type]](e) === false) ||
                 (me.fireEvent('beforecontainer' + type, me, e) === false) ||
                 (me['onContainer' + map[type]](e) === false)
             ) {
                 return false;
             }
-            
+
             me.fireEvent('container' + type, me, e);
         }
             me.fireEvent('container' + type, me, e);
         }
-        
+
         return true;
     },
         return true;
     },
-    
-    isNewItemEvent: function(type, item, e) {
+
+    isNewItemEvent: function (item, e) {
         var me = this,
             overItem = me.mouseOverItem,
         var me = this,
             overItem = me.mouseOverItem,
-            contains,
-            isItem;
-            
+            type = e.type;
+
         switch (type) {
             case 'mouseover':
                 if (item === overItem) {
         switch (type) {
             case 'mouseover':
                 if (item === overItem) {
@@ -473,27 +512,18 @@ Ext.define('Ext.view.View', {
                 }
                 me.mouseOverItem = item;
                 return 'mouseenter';
                 }
                 me.mouseOverItem = item;
                 return 'mouseenter';
-            break;
-            
+
             case 'mouseout':
             case 'mouseout':
-               /*
-                * Need an extra check here to see if it's the parent element. See the
-                * comment re: the browser bug at the start of processUIEvent
-                */
-                if (overItem &amp;&amp; typeof overItem.offsetParent === &quot;object&quot;) {
-                    contains = Ext.fly(me.mouseOverItem).getRegion().contains(e.getPoint());
-                    isItem = Ext.fly(e.getTarget()).hasCls(me.itemSelector);
-                    if (contains &amp;&amp; isItem) {
-                        return false;
-                    }
+                // If the currently mouseovered item contains the mouseover target, it's *NOT* a mouseleave
+                if (me.stillOverItem(e, overItem)) {
+                    return false;
                 }
                 me.mouseOverItem = null;
                 return 'mouseleave';
                 }
                 me.mouseOverItem = null;
                 return 'mouseleave';
-            break;
         }
         return type;
     },
         }
         return type;
     },
-    
+
     // private
     onItemMouseEnter: function(record, item, index, e) {
         if (this.trackOver) {
     // private
     onItemMouseEnter: function(record, item, index, e) {
         if (this.trackOver) {
@@ -511,19 +541,21 @@ Ext.define('Ext.view.View', {
     // @private, template methods
     onItemMouseDown: Ext.emptyFn,
     onItemMouseUp: Ext.emptyFn,
     // @private, template methods
     onItemMouseDown: Ext.emptyFn,
     onItemMouseUp: Ext.emptyFn,
+    onItemFocus: Ext.emptyFn,
     onItemClick: Ext.emptyFn,
     onItemDblClick: Ext.emptyFn,
     onItemContextMenu: Ext.emptyFn,
     onItemKeyDown: Ext.emptyFn,
     onBeforeItemMouseDown: Ext.emptyFn,
     onBeforeItemMouseUp: Ext.emptyFn,
     onItemClick: Ext.emptyFn,
     onItemDblClick: Ext.emptyFn,
     onItemContextMenu: Ext.emptyFn,
     onItemKeyDown: Ext.emptyFn,
     onBeforeItemMouseDown: Ext.emptyFn,
     onBeforeItemMouseUp: Ext.emptyFn,
+    onBeforeItemFocus: Ext.emptyFn,
     onBeforeItemMouseEnter: Ext.emptyFn,
     onBeforeItemMouseLeave: Ext.emptyFn,
     onBeforeItemClick: Ext.emptyFn,
     onBeforeItemDblClick: Ext.emptyFn,
     onBeforeItemContextMenu: Ext.emptyFn,
     onBeforeItemKeyDown: Ext.emptyFn,
     onBeforeItemMouseEnter: Ext.emptyFn,
     onBeforeItemMouseLeave: Ext.emptyFn,
     onBeforeItemClick: Ext.emptyFn,
     onBeforeItemDblClick: Ext.emptyFn,
     onBeforeItemContextMenu: Ext.emptyFn,
     onBeforeItemKeyDown: Ext.emptyFn,
-    
+
     // @private, template methods
     onContainerMouseDown: Ext.emptyFn,
     onContainerMouseUp: Ext.emptyFn,
     // @private, template methods
     onContainerMouseDown: Ext.emptyFn,
     onContainerMouseUp: Ext.emptyFn,
@@ -541,9 +573,9 @@ Ext.define('Ext.view.View', {
     onBeforeContainerDblClick: Ext.emptyFn,
     onBeforeContainerContextMenu: Ext.emptyFn,
     onBeforeContainerKeyDown: Ext.emptyFn,
     onBeforeContainerDblClick: Ext.emptyFn,
     onBeforeContainerContextMenu: Ext.emptyFn,
     onBeforeContainerKeyDown: Ext.emptyFn,
-    
-<span id='Ext-view.View-method-highlightItem'>    /**
-</span>     * Highlight a given item in the DataView. This is called by the mouseover handler if {@link #overItemCls}
+
+<span id='Ext-view-View-method-highlightItem'>    /**
+</span>     * Highlights a given item in the DataView. This is called by the mouseover handler if {@link #overItemCls}
      * and {@link #trackOver} are configured, but can also be called manually by other code, for instance to
      * handle stepping through the list via keyboard navigation.
      * @param {HTMLElement} item The item to highlight
      * and {@link #trackOver} are configured, but can also be called manually by other code, for instance to
      * handle stepping through the list via keyboard navigation.
      * @param {HTMLElement} item The item to highlight
@@ -555,13 +587,13 @@ Ext.define('Ext.view.View', {
         Ext.fly(item).addCls(me.overItemCls);
     },
 
         Ext.fly(item).addCls(me.overItemCls);
     },
 
-<span id='Ext-view.View-method-clearHighlight'>    /**
-</span>     * Un-highlight the currently highlighted item, if any.
+<span id='Ext-view-View-method-clearHighlight'>    /**
+</span>     * Un-highlights the currently highlighted item, if any.
      */
     clearHighlight: function() {
         var me = this,
             highlighted = me.highlightedItem;
      */
     clearHighlight: function() {
         var me = this,
             highlighted = me.highlightedItem;
-            
+
         if (highlighted) {
             Ext.fly(highlighted).removeCls(me.overItemCls);
             delete me.highlightedItem;
         if (highlighted) {
             Ext.fly(highlighted).removeCls(me.overItemCls);
             delete me.highlightedItem;
@@ -569,7 +601,13 @@ Ext.define('Ext.view.View', {
     },
 
     refresh: function() {
     },
 
     refresh: function() {
-        this.clearHighlight();
-        this.callParent(arguments);
+        var me = this;
+        me.clearHighlight();
+        me.callParent(arguments);
+        if (!me.isFixedHeight()) {
+            me.doComponentLayout();
+        }
     }
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.