-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-view.View'>/**
+<!DOCTYPE html>
+<html>
+<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>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-view-View'>/**
</span> * @class Ext.view.View
* @extends Ext.view.AbstractView
*
extend: 'Ext.view.AbstractView',
alternateClassName: 'Ext.view.View',
alias: 'widget.dataview',
-
+
inheritableStatics: {
EventMap: {
mousedown: 'MouseDown',
keydown: 'KeyDown'
}
},
-
+
addCmpEvents: function() {
this.addEvents(
-<span id='Ext-view.View-event-beforeitemmousedown'> /**
+<span id='Ext-view-View-event-beforeitemmousedown'> /**
</span> * @event beforeitemmousedown
* Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmousedown',
-<span id='Ext-view.View-event-beforeitemmouseup'> /**
+<span id='Ext-view-View-event-beforeitemmouseup'> /**
</span> * @event beforeitemmouseup
* Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmouseup',
-<span id='Ext-view.View-event-beforeitemmouseenter'> /**
+<span id='Ext-view-View-event-beforeitemmouseenter'> /**
</span> * @event beforeitemmouseenter
* Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmouseenter',
-<span id='Ext-view.View-event-beforeitemmouseleave'> /**
+<span id='Ext-view-View-event-beforeitemmouseleave'> /**
</span> * @event beforeitemmouseleave
* Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmouseleave',
-<span id='Ext-view.View-event-beforeitemclick'> /**
+<span id='Ext-view-View-event-beforeitemclick'> /**
</span> * @event beforeitemclick
* Fires before the click event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemclick',
-<span id='Ext-view.View-event-beforeitemdblclick'> /**
+<span id='Ext-view-View-event-beforeitemdblclick'> /**
</span> * @event beforeitemdblclick
* Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemdblclick',
-<span id='Ext-view.View-event-beforeitemcontextmenu'> /**
+<span id='Ext-view-View-event-beforeitemcontextmenu'> /**
</span> * @event beforeitemcontextmenu
* Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemcontextmenu',
-<span id='Ext-view.View-event-beforeitemkeydown'> /**
+<span id='Ext-view-View-event-beforeitemkeydown'> /**
</span> * @event beforeitemkeydown
* Fires before the keydown event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
*/
'beforeitemkeydown',
-<span id='Ext-view.View-event-itemmousedown'> /**
+<span id='Ext-view-View-event-itemmousedown'> /**
</span> * @event itemmousedown
* Fires when there is a mouse down on an item
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemmousedown',
-<span id='Ext-view.View-event-itemmouseup'> /**
+<span id='Ext-view-View-event-itemmouseup'> /**
</span> * @event itemmouseup
* Fires when there is a mouse up on an item
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemmouseup',
-<span id='Ext-view.View-event-itemmouseenter'> /**
+<span id='Ext-view-View-event-itemmouseenter'> /**
</span> * @event itemmouseenter
* Fires when the mouse enters an item.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemmouseenter',
-<span id='Ext-view.View-event-itemmouseleave'> /**
+<span id='Ext-view-View-event-itemmouseleave'> /**
</span> * @event itemmouseleave
* Fires when the mouse leaves an item.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemmouseleave',
-<span id='Ext-view.View-event-itemclick'> /**
+<span id='Ext-view-View-event-itemclick'> /**
</span> * @event itemclick
* Fires when an item is clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemclick',
-<span id='Ext-view.View-event-itemdblclick'> /**
+<span id='Ext-view-View-event-itemdblclick'> /**
</span> * @event itemdblclick
* Fires when an item is double clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemdblclick',
-<span id='Ext-view.View-event-itemcontextmenu'> /**
+<span id='Ext-view-View-event-itemcontextmenu'> /**
</span> * @event itemcontextmenu
* Fires when an item is right clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'itemcontextmenu',
-<span id='Ext-view.View-event-itemkeydown'> /**
+<span id='Ext-view-View-event-itemkeydown'> /**
</span> * @event itemkeydown
* Fires when a key is pressed while an item is currently selected.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
*/
'itemkeydown',
-<span id='Ext-view.View-event-beforecontainermousedown'> /**
+<span id='Ext-view-View-event-beforecontainermousedown'> /**
</span> * @event beforecontainermousedown
* Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermousedown',
-<span id='Ext-view.View-event-beforecontainermouseup'> /**
+<span id='Ext-view-View-event-beforecontainermouseup'> /**
</span> * @event beforecontainermouseup
* Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermouseup',
-<span id='Ext-view.View-event-beforecontainermouseover'> /**
+<span id='Ext-view-View-event-beforecontainermouseover'> /**
</span> * @event beforecontainermouseover
* Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermouseover',
-<span id='Ext-view.View-event-beforecontainermouseout'> /**
+<span id='Ext-view-View-event-beforecontainermouseout'> /**
</span> * @event beforecontainermouseout
* Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermouseout',
-<span id='Ext-view.View-event-beforecontainerclick'> /**
+<span id='Ext-view-View-event-beforecontainerclick'> /**
</span> * @event beforecontainerclick
* Fires before the click event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainerclick',
-<span id='Ext-view.View-event-beforecontainerdblclick'> /**
+<span id='Ext-view-View-event-beforecontainerdblclick'> /**
</span> * @event beforecontainerdblclick
* Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainerdblclick',
-<span id='Ext-view.View-event-beforecontainercontextmenu'> /**
+<span id='Ext-view-View-event-beforecontainercontextmenu'> /**
</span> * @event beforecontainercontextmenu
* Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainercontextmenu',
-<span id='Ext-view.View-event-beforecontainerkeydown'> /**
+<span id='Ext-view-View-event-beforecontainerkeydown'> /**
</span> * @event beforecontainerkeydown
* Fires before the keydown event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
*/
'beforecontainerkeydown',
-<span id='Ext-view.View-event-containermouseup'> /**
+<span id='Ext-view-View-event-containermouseup'> /**
</span> * @event containermouseup
* Fires when there is a mouse up on the container
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containermouseup',
-<span id='Ext-view.View-event-containermouseover'> /**
+<span id='Ext-view-View-event-containermouseover'> /**
</span> * @event containermouseover
* Fires when you move the mouse over the container.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containermouseover',
-<span id='Ext-view.View-event-containermouseout'> /**
+<span id='Ext-view-View-event-containermouseout'> /**
</span> * @event containermouseout
* Fires when you move the mouse out of the container.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containermouseout',
-<span id='Ext-view.View-event-containerclick'> /**
+<span id='Ext-view-View-event-containerclick'> /**
</span> * @event containerclick
* Fires when the container is clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containerclick',
-<span id='Ext-view.View-event-containerdblclick'> /**
+<span id='Ext-view-View-event-containerdblclick'> /**
</span> * @event containerdblclick
* Fires when the container is double clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containerdblclick',
-<span id='Ext-view.View-event-containercontextmenu'> /**
+<span id='Ext-view-View-event-containercontextmenu'> /**
</span> * @event containercontextmenu
* Fires when the container is right clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containercontextmenu',
-<span id='Ext-view.View-event-containerkeydown'> /**
+<span id='Ext-view-View-event-containerkeydown'> /**
</span> * @event containerkeydown
* Fires when a key is pressed while the container is focused, and no item is currently selected.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
*/
'containerkeydown',
-
-<span id='Ext-view.View-event-selectionchange'> /**
+
+<span id='Ext-view-View-event-selectionchange'> /**
</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
*/
'selectionchange',
-<span id='Ext-view.View-event-beforeselect'> /**
+<span id='Ext-view-View-event-beforeselect'> /**
</span> * @event beforeselect
* Fires before a selection is made. If any handlers return false, the selection is cancelled.
* @param {Ext.view.View} this
},
// private
afterRender: function(){
- var me = this,
+ var me = this,
listeners;
-
+
me.callParent();
listeners = {
mouseout: me.handleEvent,
keydown: me.handleEvent
};
-
+
me.mon(me.getTargetEl(), listeners);
-
+
if (me.store) {
me.bindStore(me.store, true);
}
},
-
+
handleEvent: function(e) {
if (this.processUIEvent(e) !== false) {
this.processSpecialEvent(e);
}
},
-
+
// Private template method
processItemEvent: Ext.emptyFn,
processContainerEvent: Ext.emptyFn,
processSpecialEvent: Ext.emptyFn,
-
- processUIEvent: function(e, type) {
- type = type || e.type;
+
+ /*
+ * Returns true if this mouseover/out event is still over the overItem.
+ */
+ stillOverItem: function (event, overItem) {
+ var nowOver;
+
+ // There is this weird bug when you hover over the border of a cell it is saying
+ // the target is the table.
+ // BrowserBug: IE6 & 7. If me.mouseOverItem has been removed and is no longer
+ // in the DOM then accessing .offsetParent will throw an "Unspecified error." exception.
+ // typeof'ng and checking to make sure the offsetParent is an object will NOT throw
+ // this hard exception.
+ if (overItem && typeof(overItem.offsetParent) === "object") {
+ // mouseout : relatedTarget == nowOver, target == wasOver
+ // mouseover: relatedTarget == wasOver, target == nowOver
+ nowOver = (event.type == 'mouseout') ? event.getRelatedTarget() : event.getTarget();
+ return Ext.fly(overItem).contains(nowOver);
+ }
+
+ return false;
+ },
+
+ processUIEvent: function(e) {
var me = this,
item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
map = this.statics().EventMap,
- index, record;
-
+ index, record,
+ type = e.type,
+ overItem = me.mouseOverItem,
+ newType;
+
if (!item) {
- // There is this weird bug when you hover over the border of a cell it is saying
- // the target is the table.
- // BrowserBug: IE6 & 7. If me.mouseOverItem has been removed and is no longer
- // in the DOM then accessing .offsetParent will throw an "Unspecified error." exception.
- // typeof'ng and checking to make sure the offsetParent is an object will NOT throw
- // this hard exception.
- if (type == 'mouseover' && me.mouseOverItem && typeof me.mouseOverItem.offsetParent === "object" && Ext.fly(me.mouseOverItem).getRegion().contains(e.getPoint())) {
- item = me.mouseOverItem;
+ if (type == 'mouseover' && me.stillOverItem(e, overItem)) {
+ item = overItem;
}
-
+
// Try to get the selected item to handle the keydown event, otherwise we'll just fire a container keydown event
if (type == 'keydown') {
record = me.getSelectionModel().getLastSelected();
}
}
}
-
+
if (item) {
index = me.indexOf(item);
if (!record) {
record = me.getRecord(item);
}
-
- if (me.processItemEvent(type, record, item, index, e) === false) {
+
+ if (me.processItemEvent(record, item, index, e) === false) {
return false;
}
-
- type = me.isNewItemEvent(type, item, e);
- if (type === false) {
+
+ newType = me.isNewItemEvent(item, e);
+ if (newType === false) {
return false;
}
-
+
if (
- (me['onBeforeItem' + map[type]](record, item, index, e) === false) ||
- (me.fireEvent('beforeitem' + type, me, record, item, index, e) === false) ||
- (me['onItem' + map[type]](record, item, index, e) === false)
- ) {
+ (me['onBeforeItem' + map[newType]](record, item, index, e) === false) ||
+ (me.fireEvent('beforeitem' + newType, me, record, item, index, e) === false) ||
+ (me['onItem' + map[newType]](record, item, index, e) === false)
+ ) {
return false;
}
-
- me.fireEvent('item' + type, me, record, item, index, e);
- }
+
+ me.fireEvent('item' + newType, me, record, item, index, e);
+ }
else {
if (
- (me.processContainerEvent(type, e) === false) ||
+ (me.processContainerEvent(e) === false) ||
(me['onBeforeContainer' + map[type]](e) === false) ||
(me.fireEvent('beforecontainer' + type, me, e) === false) ||
(me['onContainer' + map[type]](e) === false)
) {
return false;
}
-
+
me.fireEvent('container' + type, me, e);
}
-
+
return true;
},
-
- isNewItemEvent: function(type, item, e) {
+
+ isNewItemEvent: function (item, e) {
var me = this,
overItem = me.mouseOverItem,
- contains,
- isItem;
-
+ type = e.type;
+
switch (type) {
case 'mouseover':
if (item === overItem) {
}
me.mouseOverItem = item;
return 'mouseenter';
- break;
-
+
case 'mouseout':
- /*
- * Need an extra check here to see if it's the parent element. See the
- * comment re: the browser bug at the start of processUIEvent
- */
- if (overItem && typeof overItem.offsetParent === "object") {
- contains = Ext.fly(me.mouseOverItem).getRegion().contains(e.getPoint());
- isItem = Ext.fly(e.getTarget()).hasCls(me.itemSelector);
- if (contains && isItem) {
- return false;
- }
+ // If the currently mouseovered item contains the mouseover target, it's *NOT* a mouseleave
+ if (me.stillOverItem(e, overItem)) {
+ return false;
}
me.mouseOverItem = null;
return 'mouseleave';
- break;
}
return type;
},
-
+
// private
onItemMouseEnter: function(record, item, index, e) {
if (this.trackOver) {
onBeforeItemDblClick: Ext.emptyFn,
onBeforeItemContextMenu: Ext.emptyFn,
onBeforeItemKeyDown: Ext.emptyFn,
-
+
// @private, template methods
onContainerMouseDown: Ext.emptyFn,
onContainerMouseUp: Ext.emptyFn,
onBeforeContainerDblClick: Ext.emptyFn,
onBeforeContainerContextMenu: Ext.emptyFn,
onBeforeContainerKeyDown: Ext.emptyFn,
-
-<span id='Ext-view.View-method-highlightItem'> /**
+
+<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}
* 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.
Ext.fly(item).addCls(me.overItemCls);
},
-<span id='Ext-view.View-method-clearHighlight'> /**
+<span id='Ext-view-View-method-clearHighlight'> /**
</span> * Un-highlight the currently highlighted item, if any.
*/
clearHighlight: function() {
var me = this,
highlighted = me.highlightedItem;
-
+
if (highlighted) {
Ext.fly(highlighted).removeCls(me.overItemCls);
delete me.highlightedItem;
this.clearHighlight();
this.callParent(arguments);
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff