2

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

egerardus
  • 11,316
  • 12
  • 80
  • 123
kkris1983
  • 471
  • 1
  • 7
  • 15

1 Answers1

2

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.

egerardus
  • 11,316
  • 12
  • 80
  • 123
  • thanks, but example You provided works in Sencha Touch, not ExtJS – kkris1983 Jan 25 '12 at 23:12
  • but anyway, that post led me to the following [LINK](http://www.rahulsingla.com/blog/2011/11/extjs-and-iscroll-scrolling-ext-containers-on-touch-devices-ipad-iphone-etc-using-iscro) – kkris1983 Jan 25 '12 at 23:18
  • Ah, I understand what you're going for now, after I wanted to implement the same thing for a grid. DRAG SCROLL (like pdf documents). I fixed the link. Did you have any luck with this iScroll integration? I was going to try overriding my panel with the ExtJS methods otherwise. I'll post what I come up with if I have any luck. – egerardus Jan 27 '12 at 07:46