向Sencha桌面应用程序添加鼠标滚轮 [英] Adding mousewheel to Sencha Desktop App

问题描述

因此，使用Sencha的假设优势是能够为多个平台提供1个代码库。我有一个项目，我需要在iOS，Android，PC和Mac。我发现我可以使用Sencha Touch来构建移动设备，并自动处理手指滑动事件。我遇到的问题是当我建立一个桌面应用程序，然后它没有回应我的鼠标滚轮。

我已经在Sencha论坛上，这个问题没有回答在一个地方，在另一个地方，他们承诺在两年前的支持。我找到的任何第三方解决方案都没有正确记录或不起作用。在其他地方，我被告知Sencha Touch是用于移动开发的，但Extjs是用于桌面的，但是我真的不想再为mousewheel创建另一个代码库。

解决方案

有一个JSfiddle here 其中当您滑鼠时，delta 返回 1 ，当您滚下来时， -1 / p>

  var doScroll = function（e）{
 // cross-browser wheel delta 
e = window.event || Ë; 
 var delta = Math.max（-1，Math.min（1，（e.wheelDelta || -e.detail）））; 
 
 //用`delta` 
 console.log（delta）做一些事情; 
 
 e.preventDefault（）; 
}; 
 
 if（window.addEventListener）{
 window.addEventListener（mousewheel，doScroll，false）; 
 window.addEventListener（DOMMouseScroll，doScroll，false）; 
} else {
 window.attachEvent（onmousewheel，doScroll）; 
} 
  

将此代码放入您的应用程序的初始化块中。现在这个代码将在你的应用程序的任何地方运行，无论哪个元素都有 focus 。我的应用程序幸运的是，我的每个页面只有一个元素需要滚动。

替换 console.log（delta） ; 具有确定哪个元素是活动/哪个元素需要滚动的代码，代码滚动它。

  var scrollMe = Ext.getCmp（componentToScroll）; 
 var currentY = scrollMe.getScrollable（）。getScroller（）。position.y; 
 var pageHeight = document.getElementById（orderList）。clientHeight ;; 
 var containerHeight = 722; // scrollMeContainer的定义高度
 
 var newY = currentY; 
 if（delta === 1）{
 if（currentY> = 30）{
 newY = currentY  -  30; 
} 
 else {
 newY = 0; 
} 
} 
 else if（delta === -1）{
 if（currentY< = containerHeight  -  pageHeight  -  30）{
 newY = 30; 
} 
 else {
 newY = containerHeight  -  pageHeight; 
} 
} 
 scrollMe.getScrollable（）。getScroller（）。scrollTo（0，newY）; 
  

So the supposed advantage to using Sencha is being able to have 1 code base for multiple platforms. I have a project I need to be on iOS, Android, PC, and Mac. I have found that I can use Sencha Touch to build to mobile devices and those handle finger swipe events automatically. The problem I have encountered is when I am building a desktop app then it doesn't respond to my mousewheel.

I have been on the Sencha forums and this question is unanswered in one place, and in another they promised support for this over 2 years ago. Any 3rd part solutions I have found either are not documented properly or won't work. Elsewhere I have been told that Sencha Touch is for mobile development but Extjs is for desktop, but I really don't want to have to build another codebase just for mousewheel.

解决方案

There is a JSfiddle here where delta returns 1 when you mousewheel up, and -1 when you mousewheel down.

var doScroll = function (e) {
    // cross-browser wheel delta
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Do something with `delta`
    console.log(delta);

    e.preventDefault();
};

if (window.addEventListener) {
    window.addEventListener("mousewheel", doScroll, false);
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    window.attachEvent("onmousewheel", doScroll);
}

Put this code into the initialization block for your app. Now this code will get run anywhere in your app no matter which element has focus. I was lucky enough in my app that each of my pages only had 1 element that needed to be scrolled.

replaced console.log(delta); with code that determines which element is active/which element was in need of scrolling, and the code to scroll it.

var scrollMe = Ext.getCmp("componentToScroll");
var currentY = scrollMe.getScrollable().getScroller().position.y;
var pageHeight = document.getElementById("orderList").clientHeight;;
var containerHeight = 722; //the defined height of the scrollMeContainer

var newY = currentY;
if (delta === 1) {
    if (currentY >= 30) {
        newY = currentY - 30;
    }
    else {
        newY = 0;
    }
}
else if (delta === -1) {
    if (currentY <= containerHeight - pageHeight - 30) {
        newY = currentY + 30;
    }
    else {
        newY = containerHeight - pageHeight;
    }
}
scrollMe.getScrollable().getScroller().scrollTo(0, newY);

这篇关于向Sencha桌面应用程序添加鼠标滚轮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！