Sencha toggle touch button

Question

How could you do any action when you click on the toggle button like this:

{ xtype: 'togglefield', name: 'enableSnd', label: 'Sound', value : 1 } 

?

Answer 1

Here is an example that I am currently using in my application. I use the "beforechange" function to validate and verify some data before performing the actual action in the "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

Take 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 }); } } }); 

To switch, the event seems dragend ...

Answer 3

I use the following code to set the initial value in the togglefield field and respond to changes in the togglefield field.

I initially disabled togglefield, and then use the (unexpected) behavior that Sencha Touch fires a change event for this togglefield field when it is initialized to enable togglefield.

Note that this should work for both true and false as initial values. If you want to actually disable togglefield initially, you will 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, }