PDA

View Full Version : Slider - change listener - user input vs. code



raypp2
19 Jan 2011, 9:24 PM
Is there a way to differentiate a user "change" to a slider vs a change called through code?

For example:


{
xtype: 'sliderfield',
name : 'OfficeBrick',
label: 'Office Brick',
listeners : {
change : SendLighting,
afterrender : GetLighting
}
}
Sometimes this slider is changed by human input, other times I run a *.setValue(x) in another function. I need to determine HOW the change was called so I can prevent the SendLighting function from running if the change was not due to user input. Thanks in advance for any help.

raypp2
21 Jan 2011, 12:41 PM
I still need help with this. Can anyone provide guidance? Thanks in advance.

AndreaCammarata
21 Jan 2011, 1:15 PM
Hi raypp2.
A solution could be to configure your slider with the "dragend" listener



{
xtype: 'sliderfield',
name : 'OfficeBrick',
label: 'Office Brick',
listeners : {
change: function(slider, thumb, newValue, oldValue){
SendLighting(newValue, false);
},
dragend: function(slider, thumb, value){
SendLighting(slider.getValue(), true);
}
}
}
then your SendLighting function should be able to accept two params:

- The first one is the value of the slider;
- The second one is to refer to the function if the value is set manually by human input;

In this way you can do what you want inside your function looking at the second param value.
The only problem of this is that when you drag end your slider, the change event is fired too.

Hope this helps.

AndreaCammarata
21 Jan 2011, 1:40 PM
Another way to do this is



...
//Declare a "human input" variable
var dragging = false;
...




{
xtype: 'sliderfield',
name : 'OfficeBrick',
label: 'Office Brick',
listeners : {
change: function(slider, thumb, newValue, oldValue){
SendLighting(newValue, dragging);
},
drag: function(){
dragging = true;
},
dragend: function(slider, thumb, value){
SendLighting(slider.getValue(), dragging);
dragging = false;
}
}
}
and this is how your SendLightining function should be.



function SendLighting(value, manual){

if(manual) console.log('User Input');

}
In this way you can control your function flow even if the change event if fired before the dragend event.
Hope this helps.

raypp2
22 Jan 2011, 12:26 PM
Hi Andrea, totally worked. Thanks!

AndreaCammarata
22 Jan 2011, 12:30 PM
You are welcome raypp2.