event-handling - Sencha Touch トグルボタン

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