PDA

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



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

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

timTaylor
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:
beforedrop
drop

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

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');
console.log(evt);
console.log(Ext_dd_DragDrop_id);
}

});


BUT:
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
}
else
{
do something else
}


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

timTaylor
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);
if(cell)
{
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 :-)