X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..HEAD:/docs/source/View3.html diff --git a/docs/source/View3.html b/docs/source/View3.html index a9d033f7..ae1c1f66 100644 --- a/docs/source/View3.html +++ b/docs/source/View3.html @@ -3,8 +3,8 @@
/** - * @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' } * ] * }); - * + * * Ext.create('Ext.data.Store', { * 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>' + * '<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', * emptyText: 'No images available', * renderTo: Ext.getBody() * }); - * - * @xtype dataview */ Ext.define('Ext.view.View', { extend: 'Ext.view.AbstractView', - alternateClassName: 'Ext.view.View', + alternateClassName: 'Ext.DataView', alias: 'widget.dataview', inheritableStatics: { @@ -83,7 +80,8 @@ Ext.define('Ext.view.View', { mouseout: 'MouseOut', mouseenter: 'MouseEnter', mouseleave: 'MouseLeave', - keydown: 'KeyDown' + keydown: 'KeyDown', + focus: 'Focus' } }, @@ -359,7 +357,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', /** @@ -367,7 +365,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' ); @@ -381,6 +379,13 @@ Ext.define('Ext.view.View', { 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, @@ -536,12 +541,14 @@ Ext.define('Ext.view.View', { // @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, + onBeforeItemFocus: Ext.emptyFn, onBeforeItemMouseEnter: Ext.emptyFn, onBeforeItemMouseLeave: Ext.emptyFn, onBeforeItemClick: Ext.emptyFn, @@ -568,7 +575,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 @@ -581,7 +588,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, @@ -594,8 +601,12 @@ Ext.define('Ext.view.View', { }, refresh: function() { - this.clearHighlight(); - this.callParent(arguments); + var me = this; + me.clearHighlight(); + me.callParent(arguments); + if (!me.isFixedHeight()) { + me.doComponentLayout(); + } } });