ExtJS Content sliding/scrolling like Sencha Touch (ExtJS Drag Scroll)

Question

How can I achieve effect of sliding/scrolling content of Ext.panel.Panel/Ext.view.View or any other container like in mobile applications or Sencha Touch?

Something like drag scroll with a mouse (like PDF documents).

Can someone give me any hint, code snippet, or just tell me where to start?

Best regards

Answer 1

RahulSingla integrated iScroll with extjs to achieve this functionality here. It's with extjs3 however. As of today, I need this same thing in extjs4 for a grid panel. So I will try something along these lines but with extjs scroll methods instead of iScroll. I'll update if I get anything working.

UPDATE:

Done. (for what I needed) It turns out to be pretty straightforward to add drag scrolling from a listener on the grid panel, wasn't much coding needed:

listeners: {
    'itemmousedown': function(view, rec, item, idx, event) {

        var startX = event.getX();
        var startY = event.getY();

        var grid = view.up('gridpanel');
        var div = grid.getEl();
        var body = Ext.getBody();

        body.setStyle('cursor','-moz-grabbing'); //doesn't work in 4.0.7+

        div.on('mousemove', function(e) {
            x = e.getX(), y = e.getY()
            grid.scrollByDeltaX(startX - x);
            grid.scrollByDeltaY(startY - y);
            startX = x
            startY = y
        });

        body.on('mouseup', function(e){
            body.setStyle('cursor','default'); //doesn't work in 4.0.7+
            div.removeAllListeners();
            body.removeAllListeners();
        });

        body.on('mouseleave', function(e, tgt){
            body.setStyle('cursor','default'); //doesn't work in 4.0.7+
            div.removeAllListeners();
            body.removeAllListeners();
        });
    }
}

I've only tested this on FF because that is all we use on our intranet. I'm not sure if IE has the mousemove event .getX() or .getY() functions so that might need to be tweaked.

For other panels (something other than a grid panel) you could probably just replace the itemmousedown listener with just a mousedown listener to have the same functionality.