在Sencha Touch中處理單選按鈕上的事件

Question

我試圖添加一些代碼，只要用戶單擊Sencha touch面板中的單選按鈕選項之一，就會調用這些代碼。 我通過在面板的主體中添加一個單擊偵聽器並僅檢查目標並確保它是一個單選按鈕（具有一個值）來進行工作。

我確定有更好的方法綁定此處理程序。 我看了一些關於偵聽器的教程，據我了解，“我做錯了”。 但是在哪里可以找到有關正確執行操作的信息？ 這是我正在做的精簡版，可以使用Sencha Touch 1.1.0（這是應用javascript文件）運行：

Ext.setup({
    onReady: function() {
        panel = new Ext.Panel({
            fullscreen: true,
            title: 'Test',
            scroll: 'vertical',
            items: [{
                xtype: 'fieldset',
                defaults: {
                    xtype: 'radiofield',
                    labelWidth: '80%',
                    name: 'opt',
                },
                items: [{label: 'first', value: 1}, {label: 'second', value: 2}]
            }],
        });

        panel.addListener({
            body: {
                click: function(ctl) {
                    if (ctl && ctl.target && ctl.target.value) {
                        console.log('checked control ' + ctl.target.value);
                    }
                }
            }
        });
    }
});

我假設我應該做的是綁定到字段集而不是正文，並且可能正在偵聽change事件而不是click事件。 但是除此以外，我嘗試過的所有形式似乎都行不通。

Answer 1

我已經制定了一個看起來像這樣的版本：

panel = new Ext.Panel({
    fullscreen: true,
    title: 'Test',
    scroll: 'vertical',
    items: [{
        xtype: 'fieldset',
        defaults: {
            xtype: 'radiofield',
            labelWidth: '80%',
            name: 'opt',
        },
        items: [{label: 'first', value: 1}, {label: 'second', value: 2}]
    }],
    listeners: {
        el: {
            tap: function(ctl) {console.log("Checked " + ctl.target.value);},
            delegate: "input",
        }
    },
});

我懷疑有一種方法可以將其附加到fieldset元素而不是面板上，但這比我的替代方法好得多。 我不再需要檢查傳遞給click事件處理程序的目標項目，看看它是否是單選按鈕，委托設置就可以解決這一問題。 現在，當我將項目動態添加到字段集中時，處理程序將正常工作。

Answer 2

您可以嘗試將偵聽器添加到您的無線電場項目中，或者像您說的那樣添加到字段集。 這應該適用於無線電場項目：

items: [{
    label: 'first',
    value: 1,
    listeners: {
        check: function(button) {
            console.log('...');
        }
    }
}, {
    label: 'second',
    value: 2,
    listeners: {
        check: function(button) {
            console.log('...');
        }
    }
}]

Answer 3

您可以將偵聽器添加到原始腳本的默認部分，如下所示：

xtype: 'radiofield',  
        listeners: {  
            check: function() {   
            alert(this.value);  
            }  
        },