View Full Version : Ext.tree.Panel onDragOver listener doesn't work

3 Apr 2012, 1:33 AM
Does anybody know, where to put the listener for the "onDragOver" event?

3 Apr 2012, 11:29 AM
Are you trying to use the Ext.tree.plugin.TreeViewDragDrop?

4 Apr 2012, 1:51 AM
Yes, I'm using
Ext.tree.plugin.TreeViewDragDrop.. (http://docs.sencha.com/ext-js/4-0/#)ptype: treeviewdragdrop

I know, the docu says, there are only 2 Events:

But playing around, I found out, that there are more Events to listen to like:

Meanwhile I found out the following: Using the following code, I get notified on dragging over an tree-item.

Ext.override(Ext.dd.DragSource, {

* Original Description:
* Abstract method called when this element is hovering over another
* DragDrop obj
* @param {Event} e the mousemove event
* @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
* id this is hovering over. In INTERSECT mode, an array of dd items
* being hovered over.

onDragOver : function( evt , Ext_dd_DragDrop_id )
console.log('Ext.override: onDragOver');


I get only access to two objects:
- the mouse event (param: evt)
- the id of the tree itself (param: Ext_dd_DragDrop_id )

I need to know the data-object (the Ext.data.Model) behind the item I'm over, so I can perform a check like:

if( dragOverTargetItem.isLeaf() )
do something
do something else

Again, thanks for helping me in advance!! :)

4 Apr 2012, 5:10 AM
I've coded a solution.
Maybe it's interesting for some other Ext-users, to avoid the same gray hairs I've got with this problem.

Ext.override(Ext.dd.DragSource, {

* Own Extension to get notified with an event on dragging over an item.
* ---------------------------------------------------------------------
* Original Description:
* @method afterDragOver
* An empty function by default, but provided so that you can perform a custom action
* while the dragged item is over the drop target by providing an implementation.
* @param {Ext.dd.DragDrop} target The drop target
* @param {Event} e The event object
* @param {String} id The id of the dragged element
* ---------------------------------------------------------------------
* @event onDragOverItem
* ** If you are using a TreeView, add listeners inside the viewConfig{} **
* @param object
* {
* {Ext.tree.ViewDropZone} target
* {HTMLTableCellElement} node
* {Object} dragData
* {Ext.data.Model} record
* }
afterDragOver : function(target, e, id)
var me = this;
var v = target.view;
var cell = e.getTarget(v.cellSelector);
var row = v.findItemByChild(cell);
var outputObj = {
target : target,
node : cell,
dragData : this.dragData,
record : v.getRecord(row)
v.fireEvent('onDragOverItem', outputObj);

A very small piece of code, but took me days to find it out.
This leads me to one question: Why isn't an 'onDragOverItem' - event included as standard event at the TreeView??

Now I'm going to try to find out, to change the "dragAllowed" / "dragNotAllowed" on dragging over an specific item ...

Any help is welcome :-)