Question

在寻找如何在Sencha Touch中使用鼠标滚轮滚动时，我遇到了this回答。但是，我对Sencha Touch相对较新，并且我保留了使用它的代码库。

答案是把它放在我的应用程序的初始化块中：据我所知，这将是我的app.js文件，由Sencha Cmd生成（其中包含一个launch函数）。但是，在此之后我迷路了。我会在<{em} 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文件的顶部。

＆＃13;

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

＆＃13;

Answer 3

感谢user991710和Scriptable的回答。在我的情况下，我在Ext.onReady事件中添加了整个代码，因为它在app.js中不起作用。

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

中

      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生成的文件）中，我在文件的最顶部添加了以下代码，之前我的Ext.application定义：< / p>

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应用程序中滚动

4 个答案: