ExtJs: Draggable element without Region - google-maps

Question

I want to create a GoogleMap like draggable div (as in this example http://tech.pro/tutorial/790/javascr...in-a-container).
But with ExtJs I did not find a way to achieve this without get rid of the Region...
I have a container which fit the screen and I have a huge div inside it (more than 10 000 px) which is centered (called it "area").
When I create an Ext.dd.DD class with this "area" element as a target, and start to drag... the DragDrop fonctionnality doesn't work as the div is stuck in the top-left corner.
Any idea on how to achieve this?
(Obviously, I don't want scoll, but drag and drop scroll).
Thanks in advance,
PsychoKrameur
PS: I'm using ExtJs 5.1

Answer 1

With ExtJS 5.1 you can use the TouchScroller, but be careful the class is private. That means it can change in further releases.
Example: https://fiddle.sencha.com/#fiddle/lmn
document.addEventListener("dragstart", function(e) {
e.preventDefault(); //This for the image otherwise it will dragged in IE
});
var panel = Ext.create("Ext.Panel", {
style: {
cursor: "move"
},
width: 400,
height: 400,
items: [{
xtype: "image",
width: 1019,
height: 1019,
src: "http://tech.pro/_sotc/sites/default/files/202/images/duck.jpg"
}],
renderTo: Ext.getBody()
});
Ext.defer(function() {
var childSize = panel.items.first().getSize();
var size = panel.getSize();
var scroller = Ext.scroll.TouchScroller.create({
element: panel.getOverflowEl()
});
scroller.scrollTo(size.width / 2 - childSize.width / 2, size.height / 2 - childSize.height / 2); //center the image
}, 1);