<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>
+ <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>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-view-View'>/**
-</span> * @class Ext.view.View
- * @extends Ext.view.AbstractView
+</span> * 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(
- * '&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',
* 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: {
mouseout: 'MouseOut',
mouseenter: 'MouseEnter',
mouseleave: 'MouseLeave',
- keydown: 'KeyDown'
+ keydown: 'KeyDown',
+ focus: 'Focus'
}
},
</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',
<span id='Ext-view-View-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'
);
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,
// @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,
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> * 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
},
<span id='Ext-view-View-method-clearHighlight'> /**
-</span> * Un-highlight the currently highlighted item, if any.
+</span> * Un-highlights the currently highlighted item, if any.
*/
clearHighlight: function() {
var me = this,
},
refresh: function() {
- this.clearHighlight();
- this.callParent(arguments);
+ var me = this;
+ me.clearHighlight();
+ me.callParent(arguments);
+ if (!me.isFixedHeight()) {
+ me.doComponentLayout();
+ }
}
});</pre>
</body>
git.ithinksw.org / extjs.git / blobdiff