Results 1 to 7 of 7

Thread: Mousewheel scroll direction in numberfield with spinners.

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    4

    Default Mousewheel scroll direction in numberfield with spinners.

    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?
    Last edited by sveins12; 21 Oct 2019 at 8:33 AM. Reason: Additional info.

  2. #2
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    56
    Answers
    10

    Default

    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!

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    4

    Default

    Quote Originally Posted by praveensaini23 View Post
    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.

  4. #4
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    56
    Answers
    10

    Default

    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 !

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    4

    Default

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

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    143
    Answers
    5

    Default

    May be sencha framework developers are using macOS

  7. #7
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    118

    Default

    Thank you for the fix! Works for us on 6.7

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •