PDA

View Full Version : [OPEN-1318] Ext.EventObject reports wrong e.button code (allways=0)



johnrembo
8 Oct 2010, 3:08 AM
Modified "Reored TreePanel" to ilustrate a bug:



Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

//Correct e.button identification
var Event=Ext.EventManager;
var Dom=Ext.lib.Dom;
Ext.ns('mouseEvents');
mouseEvents.leftClick=false;

Event.on(document, "mousedown", function(e){
mouseEvents.leftClick=( (!Ext.isIE && e.button == 0) || (Ext.isIE && e.button == 1) ) ? true : false;
//console.log([e,"leftClick:"+mouseEvents.leftClick]);
});

var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'get-nodes.php',

root: {
nodeType: 'async',
text: 'Ext JS',
draggable: false,
id: 'src'
},
dropConfig: {
appendOnly: true,
onNodeOver : function(dst, dd, e, src){//e(event) object allways contains e.button=0
console.log('onNodOver: local e.button.leftClick='+(e.button==0)+', global e.button.leftClick='+mouseEvents.leftClick);
return Ext.tree.TreeDropZone.prototype.onNodeOver.call(this,dst,dd,e,src);
}
},
listeners:{
load:function(){
this.dragZone.primaryButtonOnly=false;
}
}
});

// render the tree
tree.render('tree-div');
tree.getRootNode().expand();
});


and console output while dragging tree node with left mouse button pressed:
"onNodOver: local e.button.leftClick=true, global e.button.leftClick=false"

Ext 3.2.0
FF 3.6.10@WinXP

semiaddict
15 Dec 2010, 11:00 AM
johnrembo,

Do you know of any workarounds ?

I'm trying to trigger a context menu when a node in a tree panel is drag'n'dropped using the right mouse button.

I managed to get the drag'n'drop with the right button, but I can't figure out how to check if the right or left button was used to drag the node; The button attribute of the dropEvent is always set to 0.

Thank you

semiaddict
16 Dec 2010, 2:05 AM
I'm not sure if this has anything to do with the bug, but while trying to figure out where it comes from, I noticed that the function "onInitDrag" in Ext.tree.TreeDragZone takes "e" as an argument, when it should be taking "x" and "y" as arguments since it overrides Ext.dd.DragZone.onInitDrag, which takes "x" and "y" as arguments.

When I log the value of "e" in the onInitDrag of Ext.tree.TreeDragZone, I get a digit, which I guess is the "x".

Anyway, I'm still trying to figure out how to fix the initial bug reported by johnrembo. Any help is greatly appreciated.

semiaddict
16 Dec 2010, 3:14 AM
Ok, I found a hack, but I think this needs to be dug to find the actual source of the bug.

Here's my hack:


Ext.onReady(function(){

var notifyDrop = Ext.dd.DropZone.prototype.notifyDrop;

Ext.override(Ext.dd.DropZone, {

notifyDrop: function(dd, e, data) {
var event = Ext.apply({}, e); // clone the e variable to prevent changes from "the outside"
if(this.lastOverNode){
this.onNodeOut(this.lastOverNode, dd, event, data);
this.lastOverNode = null;
}
var n = this.getTargetFromEvent(event);
return n ?
this.onNodeDrop(n, dd, event, data) :
this.onContainerDrop(dd, event, data);

}

});

});I basically noticed (with the great help of Firebug) that the mouse event was being changed during the drag event. I'm not sure what does this, but to get around it, I simply duplicated the event object from "e" to "event" in the notifyDrop funtion of Ext.dd.DropZone before sending it to the other functions. See the line: var event = Ext.apply({}, e);

As you can see, I'm overriding the function, which is probably not the best way to do it, but I hope this helps get a bit closer to an actual fix.

johnrembo
17 Dec 2010, 4:53 AM
well, my workaround is presented in my example - don't look for wrong event object ("e") content within you listeners, but refer to mouseEvents.leftClick instead