Mousewheel scroll direction in numberfield with spinners.

[sveins12]

Is it possible to set up which direction one should move the mousewheel to increase/decrease values in one or all numberfields?

​The reason I ask is that version 6.7.x and upwards have wrong direction. Scrolling upwards decreases the value, but in version 6.5.x it is correct and scrolling upwards increases the value. Is it possible to fix this somehow without changing version?

[praveensaini23]

Hi sveins12,

I checked the numberfield behavior in ExtJS 6.5.0 & ExtJS 6.7.0 Classic toolkit, there is no difference in spinner up/down button clicks. If I click up button, it increase the value, otherwise decrease the value if I click on down button. You can check demo on below sencha documentation for numberfield.

https://docs.sencha.com/extjs/6.5.0/...ld.Number.html

https://docs.sencha.com/extjs/6.7.0/...ld.Number.html

Although if you still want to change the behavior of up and down buttons click, then you can override onSpinUp() and onSpinDown() functions of Ext.form.field.Number class and define those behavior according to your need.

Cheers!

[sveins12]

Hi sveins12,

I checked the numberfield behavior in ExtJS 6.5.0 & ExtJS 6.7.0 Classic toolkit, there is no difference in spinner up/down button clicks. If I click up button, it increase the value, otherwise decrease the value if I click on down button. You can check demo on below sencha documentation for numberfield.

https://docs.sencha.com/extjs/6.5.0/...ld.Number.html

https://docs.sencha.com/extjs/6.7.0/...ld.Number.html

Although if you still want to change the behavior of up and down buttons click, then you can override onSpinUp() and onSpinDown() functions of Ext.form.field.Number class and define those behavior according to your need.

Cheers!

Please try the mouse wheel on the two examples! You will see it is not the same on both examples.

[praveensaini23]

Hi sveins12,

I tried to debug the behavior and found that you were right. In 6.7.x while doing mouse scroll up, then the value is decreased rather than decreasing.
This is probably a bug for ExtJS 6.7.x forum. The reason behind this behavior is 6.7.x is using deltaX and deltaY in Event object to determine that mouse is scroll up or down while in 6.5.x they were using wheelDeltaX/wheelDeltaY to determine the same(if wheelDeltaX/Y were not exist, then they were looking for deltaX/Y).

So to fix this behavior in your application in 6.7.x version you need to override getWheelDeltas() of Ext.event.Event class to make it same as it was in 6.5.x.
You can check the difference in 2 versions by below link -
https://docs.sencha.com/extjs/6.5.0/...getWheelDeltas
https://docs.sencha.com/extjs/6.7.0/...getWheelDeltas

By the way, I have added override to fix the bug and its working fine in below fiddle -
https://fiddle.sencha.com/#view/editor&fiddle/30dj

Hope that will resolve your problem, cheers !

[sveins12]

Thanks for reply. Meanwhile I solved it by overriding onMouseWheel like this, just swtching me.spinDown and me.spinUp from the original version:

Ext.override(Ext.form.field.Spinner, {
onMouseWheel: function (e) {
var me = this,
delta;
if (me.hasFocus) {
delta = e.getWheelDelta();
if (delta > 0) {
me.spinDown();
} else if (delta < 0) {
me.spinUp();
}
e.stopEvent();
me.onSpinEnd();
}
}
});

[lovelyhibabe]

May be sencha framework developers are using macOS

[mcouillard]

Thank you for the fix! Works for us on 6.7