Sencha Touch Toggle Button - event-handling

Question

How could you run some action when pushing a toggle button like this:
{
xtype: 'togglefield',
name: 'enableSnd',
label: 'Sound',
value : 1
}
?

Answer 1

Here's an example I'm currently using in an app of mine. I use the "beforechange" function to check and validate some data before I perform the real action in "change".
{
xtype: 'togglefield',
name: 'toggleName',
label: 'My Toggle Field',
listeners: {
beforechange: function (slider, thumb, newValue, oldValue) {
if (oldValue == 0 && newValue == 1) {
// Changing from off to on...validate something?
}
},
change: function (slider, thumb, newValue, oldValue) {
if (oldValue == 0 && newValue == 1) {
// Changing from off to on...do something?
}
else if (oldValue == 1 && newValue == 0)
// Changing from on to off...do something?
}
}
}

Answer 2

Have a look at the official documentation in sencha:
http://dev.sencha.com/deploy/touch/docs/
For a simple button:
var playPauseButton = new Ext.Button({
ui: 'small',
text: 'Play',
listeners: {
tap: function() {
Ext.Ajax.request({
url: '/api/pause',
success: updateStatus,
failure: updateStatus });
}
}
});
For a toggle, event seems to be dragend...

Answer 3

I use the the following code to set an initial value to a togglefield
and to react to changes of the togglefield.
I initially disable the togglefield,
and then use the (unexpected) behaviour that
Sencha Touch fires a change event for this togglefield while initializing it to enable the togglefield.
Note this should work for both true and false as initial values.
If you would like to actually disable the togglefield initially,
you would have to remove the else part.
{
xtype: 'togglefield',
title: 'LightSwitch',
label: 'Switch Lights',
value: false, // initial value
listeners: {
change: function(slider, thumb, newValue, oldValue) {
if (this.isDisabled() == false) { // isEnabled
alert('change Togglefield Event triggered'); // do something
}
else {
this.enable(); // enable togglefield
}
}
},
disabled: true,
}