Sencha Touch Toggle Button

Question

按下这样的切换按钮时，你怎么能运行一些动作：

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

Answer 1

这是我目前在我的应用程序中使用的示例。在“更改”中执行实际操作之前，我使用“beforechange”函数来检查和验证某些数据。

{
    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

查看sencha中的官方文档：

• http://dev.sencha.com/deploy/touch/docs/

对于一个简单的按钮：

    var playPauseButton = new Ext.Button({
    ui: 'small',
    text: 'Play',
    listeners: {
      tap: function() {
      Ext.Ajax.request({
        url: '/api/pause',
        success: updateStatus,
        failure: updateStatus });
      }
    }
    });

对于切换，event seems to be dragend ...

Answer 3

我使用以下代码为切换字段设置初始值 并对切换场的变化作出反应。

我最初禁用了切换字段， 然后使用（意外）行为 Sencha Touch会在启动切换字段时触发此切换字段的更改事件。

请注意，这应该适用于true和false作为初始值。 如果您想最初实际禁用切换字段， 你必须删除其他部分。

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