extjs - ExtJS 内容滑动/滚动，如 Sencha Touch (ExtJS Drag Scroll)

Question

如何在移动应用程序或 Sencha Touch 中实现 Ext.panel.Panel/Ext.view.View 或任何其他容器的滑动/滚动内容的效果？

诸如用鼠标拖动滚动（如 PDF 文档）之类的东西。

有人可以给我任何提示，代码片段，或者只是告诉我从哪里开始？

此致

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.