event-handling - 煎茶触摸切换按钮

Question

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

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

?

Answer 1

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

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