View Full Version : How to slow the rate of mouse drag?

6 Jan 2013, 4:47 PM

I am writing an app for medical purposes that requires a person to move their whole arm to resize an image rather than just moving their fingers a bit. The effect I need is similar to what would happen if you changed the mouse pointer settings in the OS so that the mouse pointer moves only a small amount even though the mouse has moved a long way.

So, I have an image in a panel like the following which uses the Ext.resizer.Resizer with a handle on the bottom of the image. That works correctly to resize the image. What I cant work out is how to hook into the mouse drag so that the mouse has to move a long way before the drag responds. And, it must only apply to the resizable element in question - not all mouse moves in the app.

xtype: 'component',
autoEl: {
tag: 'img',
src: 'app/images/faces/person.jpg'
resizable: {
pinned: true,
minHeight: 5,
maxHeight: 600,
preserveRatio: true,
transparent: false
resizeHandles: 's'

Any ideas?


7 Jan 2013, 10:17 AM
What if you were to set a large heightIncrement/widthIncrement?


7 Jan 2013, 11:38 AM
Thanks for your response. I can still do the resize without moving my whole arm. What I need is for the mouse to have to move a long way in relation to the amount of resizing, with the result that the whole arm is engaged resizing the image up to it's maximum size (almost full screen).

7 Jan 2013, 12:09 PM
Maybe set the resizeTracker tolerance to a sufficiently large number?


7 Jan 2013, 1:49 PM
Thanks again. Yes, I tried that too. Still not the effect I need. I need to hook into the mouse drag event somehow.

7 Jan 2013, 1:53 PM
Gotcha. Guessing you'll have to do some surgery in an override on resizeTracker's updateDimensions method to adjust what the dragtracker in there is doing on drag (mousemove).

Good luck!