Adding mousewheel to Sencha Desktop App - extjs

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