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

[geektantra]

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:

....
          {
            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'.

[Jamie Avins]

Thank you for the report.

[haddow777]

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:

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:

onSliderChange: function(me, thumb, newValue, oldValue) {        
        this.fireEvent('change', this, thumb, newValue, oldValue);
    },

Add this immediately after it.

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.

[Jamie Avins]

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.