PDA

View Full Version : using jquery, cannot drag or autoscroll from a scrolled tree


wizzud
04-24-2007, 08:30 PM
Using jQuery as the engine, I have a layout similar to the Ext Dependency Builder example, ie a tree panel that is set to fit to frame, autoscroll, and resize to element.
I have noticed a problem when trying to drag any node that is below the initial display area. In other words, if you scroll down slightly and try to drag the bottom-most node it will not let you.
I tried it on the Ext Dependency Builder and the same problem can be seen (if you select jQuery).
Another problem is with autoscrolling when dragging a node from the bottom to the top of the list (or vice versa) - it doesn't, and both Firefox error out when you drag the node up to the border you are trying to get to scroll.

I have spent a while tracking it down and I have a fix that works for me (but I have no idea whether it will screw something else up elsewhere!).

(code below is lifted from the minimised code!)

In the ext-jquery-adaptor.js code, Ext.lib.Dom contains a getXY function as
getXY:function(el){
var o=jQuery(el).offset();
return [o.left,o.top];
}

and I found I needed to set the scroll to off so that the jquery dimensions plugin would NOT calculate top/left offsets taking scroll into account...
getXY:function(el){
var o=jQuery(el).offset({scroll:false});
return [o.left,o.top];
}
...which seemed to solve the problem of nodes below the initially viewable area not being draggable.

To get the autoscroll when dragging a node to work without error, also in the ext-jquery-adaptor.js code, Ext.lib.Anim returns an object, the first method of which is scroll, defined as...
scroll:function(el,_43,_44,_45,cb,_47){
var _48=_3d(cb,_47);
el=Ext.getDom(el);
el.scrollLeft=_43.to[0];
el.scrollTop=_43.to[1];
_48.proxyCallback();
return _48;
}
and it needed some missing scroll methods inserting as follows...
scroll:function(el,_43,_44,_45,cb,_47){
var _48=_3d(cb,_47);
el=Ext.getDom(el);
el.scrollLeft=_43.scroll.to[0];
el.scrollTop=_43.scroll.to[1];
_48.proxyCallback();
return _48;
}

I hope this helps.

jack.slocum
04-24-2007, 09:24 PM
Thank you for sharing. I have added these changes to the codebase.