Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / src / view / View.js

diff --git a/src/view/View.js b/src/view/View.js
index a445bae..646dc60 100644 (file)
--- a/src/view/View.js
+++ b/src/view/View.js
@@ -13,24 +13,23 @@ If you are unsure which license is appropriate for your use, please contact the
 
 */
 /**
- * @class Ext.view.View
- * @extends Ext.view.AbstractView
+ * A mechanism for displaying data using custom layout templates and formatting.
  *
- * 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. <b>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.</b>
+ * 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.**
  *
- * The example below binds a DataView to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
+ * The example below binds a View to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
  *
- * {@img Ext.DataView/Ext.DataView.png Ext.DataView component}
- *
- *     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' }
  *         ]
  *     });
  *
@@ -38,23 +37,23 @@ If you are unsure which license is appropriate for your use, please contact the
  *         id:'imagesStore',
  *         model: 'Image',
  *         data: [
- *             {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & 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 & 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(
- *         '&lt;tpl for="."&gt;',
- *             '&lt;div style="thumb-wrap"&gt;',
- *               '&lt;img src="{src}" /&gt;',
- *               '&lt;br/&gt;&lt;span&gt;{caption}&lt;/span&gt;',
- *             '&lt;/div&gt;',
- *         '&lt;/tpl&gt;'
+ *         '<tpl for=".">',
+ *             '<div style="margin-bottom: 10px;" class="thumb-wrap">',
+ *               '<img src="{src}" />',
+ *               '<br/><span>{caption}</span>',
+ *             '</div>',
+ *         '</tpl>'
  *     );
  *
- *     Ext.create('Ext.DataView', {
+ *     Ext.create('Ext.view.View', {
  *         store: Ext.data.StoreManager.lookup('imagesStore'),
  *         tpl: imageTpl,
  *         itemSelector: 'div.thumb-wrap',
@@ -355,7 +354,7 @@ Ext.define('Ext.view.View', {
              * @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',
             /**
@@ -363,7 +362,7 @@ Ext.define('Ext.view.View', {
              * 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'
         );
@@ -573,7 +572,7 @@ Ext.define('Ext.view.View', {
     onBeforeContainerKeyDown: Ext.emptyFn,
 
     /**
-     * Highlight a given item in the DataView. This is called by the mouseover handler if {@link #overItemCls}
+     * 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
@@ -586,7 +585,7 @@ Ext.define('Ext.view.View', {
     },
 
     /**
-     * Un-highlight the currently highlighted item, if any.
+     * Un-highlights the currently highlighted item, if any.
      */
     clearHighlight: function() {
         var me = this,