+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
/**
- * @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: {
mouseout: 'MouseOut',
mouseenter: 'MouseEnter',
mouseleave: 'MouseLeave',
- keydown: 'KeyDown'
+ keydown: 'KeyDown',
+ focus: 'Focus'
}
},
* @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',
/**
* 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,
/**
- * 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
},
/**
- * Un-highlight the currently highlighted item, if any.
+ * 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();
+ }
}
-});
\ No newline at end of file
+});
git.ithinksw.org / extjs.git / blobdiff