Sencha Touch Toggle Button

Question

How could you run some action when pushing a toggle button like this:

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

?

Kailakaile

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?
        }
    }
}

Divinize

Hi robert, thanks for the answer, I was just wandering why you where testung both old and new values in the change ? – Premonish

@JasonRogers Just because I'm paranoid and want to make sure the value is changing what I'm assuming it's doing. :) – Divinize

for some reason my function is receiving the parameters in a different order change: function (slider, newValue, oldValue, thumb) { – Syncopate

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

Jumble

hm, still not working. tried enable, disable, dregend... the only listener who really listens is "change". but this one also fires when initialised. hm... – Kailakaile

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,                                           
}

Moldy