使用鼠标滚轮在桌面上的 Sencha Touch 应用程序中滚动
Posted
技术标签:
【中文标题】使用鼠标滚轮在桌面上的 Sencha Touch 应用程序中滚动【英文标题】：Using mouse wheel to scroll in Sencha Touch application on desktop 【发布时间】：2015-03-05 16:24:16 【问题描述】：在寻找如何在 Sencha Touch 中启用鼠标滚轮滚动时，我遇到了this 答案。然而，我对 Sencha Touch 和我被赋予维护它的代码库相对较新。
答案是把它放在我的应用程序的初始化块中：据我所知，这将是我的 app.js 由 Sencha Cmd 生成的文件（它有一个 @ 987654323@函数）。但是，在此之后我迷路了。我会在launch 块中添加上述答案的第一部分in 吗？在它之外？如何确保在每个页面上自动调用它？
编辑：这是我的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。
【问题讨论】：
我已将您的解决方案移至社区 wiki 答案。 【参考方案1】：另一个答案中提供的代码是纯 javascript 而不是 ExtJs 代码，它在全局范围内运行，因此您可以将其添加到 Ext.application 之上（在 ExtJs 代码之外，所以让它成为您获得的第一个 JS 代码跑）。如果需要，您甚至可以将其包装在 Ext.onReady 调用中，以确保在添加之前 ExtJs 也已完全加载。
这应该可行，但可能值得查看 Sencha 论坛，甚至在这里寻找更优雅和更新的解决方案。
【讨论】：
非常感谢！现在我按照你所描绘的那样考虑它，这很有意义。我会尝试寻找一个更易于维护的解决方案，但现在这应该足够了。【参考方案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);
【讨论】：
【参考方案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 */
,
【讨论】：
【参考方案4】：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 论坛上的用户 m.dostal。如果您遇到此解决方案，请在下方为用户 Scriptable 投票，因为他帮助我找到了正确的解决方案。
【讨论】：
以上是关于使用鼠标滚轮在桌面上的 Sencha Touch 应用程序中滚动的主要内容，如果未能解决你的问题，请参考以下文章