extjs - Adding mousewheel to Sencha Desktop App -
extjs - Adding mousewheel to Sencha Desktop App -
so supposed advantage using sencha beingness able have 1 code base of operations multiple platforms. have project need on ios, android, pc, , mac. have found can utilize sencha touch build mobile devices , handle finger swipe events automatically. problem have encountered when building desktop app doesn't respond mousewheel.
i have been on sencha forums , question unanswered in 1 place, , in promised back upwards on 2 years ago. 3rd part solutions have found either not documented or won't work. elsewhere have been told sencha touch mobile development extjs desktop, don't want have build codebase mousewheel.
there jsfiddle here delta
returns 1
when mousewheel up, , -1
when 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))); // `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 code initialization block app. code run anywhere in app no matter element has focus
. lucky plenty in app each of pages had 1 element needed scrolled.
replaced console.log(delta);
code determines element active/which element in need of scrolling, , code 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 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);
extjs sencha-touch sencha-touch-2
Comments
Post a Comment