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

在寻找如何在SenchaTouch中使用鼠标滚轮进行滚动时，我找到了答案。然而，我对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。

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

---

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

上面OP的答案是可行的，但是如果试图滚动到类名上没有indexOf的元素（如SVG元素）上，它会抛出错误。下面是首先检查indexOf是否存在的更新代码

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

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

var mouseweelHandler=函数（e）{
var e=window.event | | e，
el=e.target，
化学机械抛光，
抵消，
卷轴，
德尔泰，
德尔塔克斯，
_结果=[]；
e、 preventDefault（）；//在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（）；
如果（滚动条）{
deltaY=e.细节？e.细节*（-120）：e.拥有所有权（“wheelDeltaY”）？e.wheelDeltaY:e.wheelDelta；
deltaX=e.detail？e.detail*（-120）：e.hasOwnProperty（'wheelDeltaX'）？e.wheelDeltaX:0；
偏移量={x:-deltaX*0.5，y:-deltaY*0.5}；
scroller.firevent（'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）；
打破
}
}
}
_结果推送（el=el.parentNode）；
}
返回结果；
};
if（文件增补列表器）{
//IE9、Chrome、Safari、Opera
document.addEventListener（'mousewheel'，mouseWheelHandler，false）；
//火狐
document.addEventListener（'DOMMouseScroll'，mouseWheelHandler，false）；
}
否则{
//IE 6/7/8
文件。附件（'onmousewheel'，mouseWheelHandler）；
}
}

感谢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 */
    },

解决方案由OP

在我的

app.js

文件（由Sencha Cmd生成的文件）中，我在我的

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论坛上的用户。如果您遇到此解决方案，请向下面可编写脚本的用户投票，因为他帮助我找到了正确的解决方案。

非常感谢！现在我想起来了，就像你描述的那样，这很有道理。我将尝试寻找一个更易于维护的解决方案，但现在这应该足够了。我将您的解决方案移到了一个社区wiki答案。