ExtJs: Draggable element without Region

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);