X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/view/View.js diff --git a/src/view/View.js b/src/view/View.js index a445bae9..646dc60c 100644 --- 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. 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 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( - * '<tpl for=".">', - * '<div style="thumb-wrap">', - * '<img src="{src}" />', - * '<br/><span>{caption}</span>', - * '</div>', - * '</tpl>' + * '', + * '
', + * '', + * '
{caption}', + * '
', + * '
' * ); * - * 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,