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