Adding mousewheel to Sencha Desktop App

Question

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.

Answer 1

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