PDA

View Full Version : [OPEN-696][3.x] Behavior of getRepairXY in DragZone



turbovegas
9 Mar 2010, 7:37 AM
Ext version tested:


Ext 3.1



Adapter used:


ext



css used:


only default ext-all.css



Browser versions tested against:


IE8
FF3 (firebug 1.5.2 installed)



Operating System:


Windows 7



Description:


The method getRepairXY() in Ext.dd.DragZone does not correctly account for scrollable containers. I created a large TreePanel that was scrollable. When I would drag an element from the top of the tree to the bottom of the tree, scrolling worked correctly. However, when I let the dragged element go, the getRepairXY method would return the position of the original dragged element, which is now very "high" on the page and the Y value returned was a large negative number, so the element appears to fly up to the top of the page. This becomes even more apparent when you drag an element from the bottom of the TreeGrid to the top and then let it go. The getRepairXY method returns a Y value that is now very far down the page. A scroll bar appears on the body of the page as the element is "returned" to its original position, now a very large positive number.



Test Case:

Any Panel that allows it's elements to be dragged. Note: I only tested the solution with a TreeDragZone, so I'm not positive the solution for Ext.dd.DragZone will work.

Possible fix:


To fix this, instead of returning the element to its original position, getRepairXY should account for its containing element also. If the original element's position is outside the containing element, then use the elements top/bottom Y as the return position:
For Ext.tree.TreeDragZone:


Ext.override(Ext.tree.TreeDragZone, {
getRepairXY: function(e) {
var xy = Ext.Element.fly(this.dragData.ddel).getXY();

var innerBody = this.tree.innerBody,
y = innerBody.getY(),
h = innerBody.getHeight(),
total = y + h;
return [xy[0], Math.max(Math.min(total, xy[1]), y)];
}
});
Possible solution for Ext.dd.DragZone:


Ext.override(Ext.dd.DragZone, {
getRepairXY: function(e) {
var xy = Ext.Element.fly(this.dragData.ddel).getXY();

var y = this.el.getY(),
h = this.el.getHeight(),
total = y + h;
return [xy[0], Math.max(Math.min(total, xy[1]), y)];
}
});
getRepairXY is not implemented in GridDragZone, but a similiar method could be used.