Question

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

像用鼠标拖动滚动（如PDF文档）。

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

祝你好运

Answer 1

RahulSingla将iScroll与extjs集成以实现此功能here。然而，这是与extjs3。截至今天，我需要在extjs4中为网格面板做同样的事情。所以我会沿着这些方向尝试一些东西但是使用extjs滚动方法而不是iScroll。如果我得到任何工作，我会更新。

<强>更新

完成。（对于我需要的东西）事实证明，从网格面板上的监听器添加拖动滚动非常简单，所需的代码不多：

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

我只在FF上测试了这个，因为这是我们在内联网上使用的全部内容。我不确定IE是否具有mousemove事件.getX()或.getY()功能，因此可能需要进行调整。

对于其他面板（网格面板以外的其他面板），您可能只需用itemmousedown侦听器替换mousedown侦听器即可拥有相同的功能。

ExtJS内容滑动/滚动像Sencha Touch（ExtJS Drag Scroll）

1 个答案: