Сенсорная кнопка переключения Сенча

Question

Как вы могли бы выполнить какое-либо действие, нажимая кнопку переключения, как это:

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

?

Answer 1

Вот пример, который я сейчас использую в своем приложении.Я использую функцию «beforechange» для проверки и проверки некоторых данных перед тем, как выполнить реальное действие в «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?
        }
    }
}

Answer 2

Посмотрите официальную документацию в сенче:

• 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 в качестве начальных значений. Если вы хотите на самом деле отключить поле переключения изначально, вам придется удалить остальную часть.

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