Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2504 in a recent build.
  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Bhubaneswar, India
    Posts
    5
    Vote Rating
    0
    geektantra is on a distinguished road

      0  

    Exclamation Missing DragStart, Drag and DragEnd Events for Ext.field.Slider

    Missing DragStart, Drag and DragEnd Events for Ext.field.Slider


    On a Sencha Touch 2 app, I tried to use the drag event for a field with xtype 'sliderfield', but it did not work. But DragStart, Drag and DragEnd works perfectly fine for xtype 'slider'.

    Sample Code:
    Code:
    ....
              {
                xtype: 'sliderfield',
                name: 'interest_rate',
                labelText: 'Interest Rate',
                label: 'Interest Rate',
                valueUnit: '%',
                valueDisplayExpression: '{v}{u}',
                value: 9,
                minValue: 0,
                maxValue: 100,
                listeners: {
                   dragstart: function(field, thumb, value) {
                       console.log("Drag Start Test"); //// Does not work
                   },
                   drag: function(field, thumb, value) {
                       console.log("Drag Test"); //// Does not work
                   },
                   dragend: function(field, thumb, value) {
                       console.log("Drag End Test"); //// Does not work
                   },
                   change: function(field, thumb, value) {
                      console.log("Change Test"); //// Works
                   }
               }
              },
    ....
    The reason seems to be the following:
    The 'Ext.field.Slider' class is missing DragStart, Drag and DragEnd. (http://docs.sencha.com/touch/2-0/sou...t-field-Slider lines 136~139). Seems this class does not inherit the events from its 'Ext.slider.Slider'.

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    0
    haddow777 is on a distinguished road

      0  

    Default A temp fix until the main branch is fixed.

    A temp fix until the main branch is fixed.


    Hey there. I was having the same issue. After pounding my head against a wall and searching the forum, I decided to correct it myself in the library. This is a real fix, just a temp one, as any update will wipe out your changes. Of course, I should also mention that you will need to know how to make your own production build for a production system.

    If you are making your own build, find the Slider.js file. I am still in development, so I just searched for "Ext.define('Ext.field.Slider', {" in the sencha-touch-all-debug.js build file that my app uses. There you can scroll down a bit and find this part:

    Code:
    initialize: function() {        this.callParent();
    
    
            this.getComponent().on({
                scope: this,
                change: 'onSliderChange',
                drag: 'onSliderDrag'     <-- Add this to your code
            });
        },
    Notice that when you find this section, the line with "drag:" is missing. Add this line. Okay, now just below this section you will find the following:

    Code:
    onSliderChange: function(me, thumb, newValue, oldValue) {        
            this.fireEvent('change', this, thumb, newValue, oldValue);
        },
    Add this immediately after it.

    Code:
    onSliderDrag: function(me, thumb, eventObject) {
            this.fireEvent('drag', this, thumb, this.getValue());
        },
    Now you can listen for the drag event in you sliderfield. I didn't need the dragstart or the dragend events, but if you need them you can add them the same way. Just make sure that the parameters passed are correct for what is passed by the actual events in the Ext.slider.Slider object.

    Now remember, this is just a plain old school hack. Hopefully this will be corrected in the main release soon as a slider that can't provide real time feedback is basically useless, at least in my opinion.

    Oh, and don't forget that if you are updating the Slider.js file that nothing will happen unless you make a new build that includes the change. If you are using the debug version, just edit the build file provided. It's easier.

    Thanks.

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    There's a few issues here we need to address.

    One is the events aren't being relayed and I've added the three missing events so they should now be relayed properly.

    Another issue is that the current change event isn't passing the slider itself, only the field. So that needs to be fixed as well.

    The last issue is very minor, the documentation in Ext.slider.Slider is referencing the wrong object.

    These will be fixed for the next release.

    Sencha Inc

    Jamie Avins

    @jamieavins