Sencha 触摸切换按钮

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

对于切换，事件似乎是 dragend...

Answer 3

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

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

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

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