使用鼠标滚轮在桌面上的 Sencha Touch 应用程序中滚动

Question

在寻找如何在 Sencha Touch 中启用鼠标滚轮滚动时，我遇到了 this 答案。但是，我对 Sencha Touch 比较陌生，我得到的用于维护的代码库也使用它。

答案是将其放入我的应用程序的 初始化块中 ：据我所知，这将是我的 app.js 文件，由Sencha Cmd（它有一个 launch 函数）。但是，在此之后我迷路了。我会把上面答案的第一部分 添加到 的 launch 块中吗？在外面？我如何确保在每个页面上自动调用它？

编辑：这是我的app.js文件，以防有帮助。

Ext.application({
    name: 'App',

    requires: [
        'Ext.MessageBox',
        'Ext.direct.*'
    ],

    models:[
        "..."
    ],

    controllers: [
        '...',
        '...',
        '...'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    profiles: ['Tablet', 'Phone'],

    launch: function() {

        ...
    }

    ....

});

编辑 2：我正在使用 Sencha Touch 2.3。

Answer 1

另一个答案中提供的代码是纯 Javascript 而不是 ExtJs 代码，它运行在全局范围内所以你可以在上面添加它 Ext.application （在 ExtJs 之外代码，所以让它成为你获得运行的第一个 JS 代码。如果需要，您甚至可以将其包装在 Ext.onReady 调用中，以确保在添加它之前 ExtJs 也已完全加载。

这应该可行，可能值得查看 Sencha 论坛，甚至在这里寻找更优雅和更新的解决方案。

Answer 2

上面的 OP 答案有效，但是如果尝试滚动其 className 上没有 indexOf 的元素（如 SVG 元素），它会抛出错误。这是首先检查 indexOf 是否存在的更新代码。

如果浏览器支持 wheelDeltaX 和 wheelDeltaY，我还扩展了此方法以支持水平鼠标滚动。否则它默认使用更广泛使用的 wheelDelta 并且只在 Y 方向滚动。

请注意，您可以将此代码嵌入到一个函数中，并在您的应用程序启动期间简单地调用它。无需将其放在 app.js 文件的顶部。

        var mouseWheelHandler = function (e) {
            var e = window.event || e,
                el = e.target,
                cmp,
                offset,
                scroller,
                deltaY,
                deltaX,
                _results = [];
            e.preventDefault(); // prevent scrolling when in iframe
            while (el !== document.body) {
                if (el && el.className && el.className.indexOf && el.className.indexOf('x-container') >= 0) {
                    cmp = Ext.getCmp(el.id);
                    if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
                        scroller = cmp.getScrollable().getScroller();

                        if (scroller) {
                            deltaY = e.detail ? e.detail * (-120) : e.hasOwnProperty('wheelDeltaY') ? e.wheelDeltaY : e.wheelDelta;
                            deltaX = e.detail ? e.detail * (-120) : e.hasOwnProperty('wheelDeltaX') ? e.wheelDeltaX : 0; 
                            offset = {x: -deltaX * 0.5, y: -deltaY * 0.5};
                            scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
                            scroller.scrollBy(offset.x, offset.y);
                            scroller.snapToBoundary();
                            scroller.fireEvent('scrollend', scroller, scroller.position.x + offset.x, scroller.position.y - offset.y);
                            break;
                        }
                    }
                }
                _results.push(el = el.parentNode);
            }
            return _results;
        };

        if (document.addEventListener) {
            // IE9, Chrome, Safari, Opera
            document.addEventListener('mousewheel', mouseWheelHandler, false);
            // Firefox
            document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
        }
        else {
            // IE 6/7/8
            document.attachEvent('onmousewheel', mouseWheelHandler);
        }
    }

Answer 3

感谢 user991710 和 Scriptable 的回答。在我的例子中，我在 Ext.onReady 事件中添加了整个代码，因为它在 app.js.

中不起作用

下面是我如何将 Ext.onReady 中的代码合并到 default.js

      onReady: function() {
        if (this.getAutoRender()) {
            this.render();
        }
        if (Ext.browser.name == 'ChromeiOS') {
            this.setHeight('-webkit-calc(100% - ' + ((window.outerHeight - window.innerHeight) / 2) + 'px)');
        }

        /* code ten behoeve van mousescroll in Chrome situatie */
        var mouseWheelHandler = function (e) {
            var e = window.event || e,
el = e.target,
cmp,
offset,
scroller,
delta,
_results = [];
            e.preventDefault(); // prevent scrolling when in iframe
            while (el !== document.body) {
                if (el && el.className && el.className.indexOf('x-container') >= 0) {
                    cmp = Ext.getCmp(el.id);
                    if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
                        scroller = cmp.getScrollable().getScroller();
                        if (scroller) {
                            delta = e.detail ? e.detail * (-120) : e.wheelDelta;
                            offset = { x: 0, y: -delta * 0.5 };
                            scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
                            scroller.scrollBy(offset.x, offset.y);
                            scroller.snapToBoundary();
                            scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y - offset.y);
                            break;
                        }
                    }
                }
                _results.push(el = el.parentNode);
            }
            return _results;
        };

        if (document.addEventListener) {
            // IE9, Chrome, Safari, Opera
            document.addEventListener('mousewheel', mouseWheelHandler, false);
            // Firefox
            document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
        }
        else {
            // IE 6/7/8
            document.attachEvent('onmousewheel', mouseWheelHandler);
        }
        /*einde code ten behoeve van muisscroll in Chrome modus */
    },

Answer 4

OP 的解决方案。

在我的 app.js 文件（由 Sencha Cmd 生成的文件）中，我在文件的最顶部添加了以下代码，before my Ext.application定义：

var mouseWheelHandler = function (e) {
    var e = window.event || e,
        el = e.target,
        cmp,
        offset,
        scroller,
        delta,
        _results = [];
    e.preventDefault(); // prevent scrolling when in iframe
    while (el !== document.body) {
        if (el && el.className && el.className.indexOf('x-container') >= 0) {
            cmp = Ext.getCmp(el.id);
            if (cmp && typeof cmp.getScrollable == 'function' && cmp.getScrollable()) {
                scroller = cmp.getScrollable().getScroller();
                if (scroller) {
                    delta = e.detail ? e.detail*(-120) : e.wheelDelta;
                    offset = { x:0, y: -delta*0.5 };
                    scroller.fireEvent('scrollstart', scroller, scroller.position.x, scroller.position.y, e);
                    scroller.scrollBy(offset.x, offset.y);
                    scroller.snapToBoundary();
                    scroller.fireEvent('scrollend', scroller, scroller.position.x, scroller.position.y-offset.y);
                    break;
                }
            }
        }
    _results.push(el = el.parentNode);
    }
    return _results;
};

if (document.addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.addEventListener('mousewheel', mouseWheelHandler, false);
    // Firefox
    document.addEventListener('DOMMouseScroll', mouseWheelHandler, false);
}

以上代码归功于 Sencha Touch 论坛上的用户 m.dostal。如果您遇到此解决方案，请在下方为用户 Scriptable 投票，因为他帮助我找到了正确的解决方案。

使用鼠标滚轮在桌面上的 Sencha Touch 应用程序中滚动

Using mouse wheel to scroll in Sencha Touch application on desktop

javascript

extjs

sencha-touch

sencha-touch-2