在 Sencha Touch 中处理单选按钮上的事件

Posted 2023-02-26

【中文标题】在 Sencha Touch 中处理单选按钮上的事件

【英文标题】：Handling events on radio buttons in Sencha Touch

【发布时间】：2011-04-27 00:56:29

【问题描述】：

我正在尝试添加一些代码，只要用户单击 Sencha 触摸面板中的一个单选按钮选项，就会调用该代码。我通过向面板主体添加一个单击侦听器并检查目标并确保它是一个单选按钮（具有值）来使其工作。

我确信有更好的方法来绑定这个处理程序。我看过一些关于听众的教程，据我所知“我做错了”。但是我在哪里可以找到有关正确操作的信息？这是我正在做的一个精简版本，它使用 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);
                    
                
            
        );
    
);

我假设我应该做的是绑定到字段集而不是正文，并且可能侦听更改事件而不是单击事件。但除此之外我尝试过的所有形式似乎都不起作用。

【参考方案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 事件处理程序的目标项以查看它是否是单选按钮，委托设置会处理这一点。现在，当我将项目动态添加到字段集时，处理程序可以正常工作。

【参考方案2】：

您可以尝试将侦听器添加到您的 radiofield 项目中，或者像您所说的那样，添加到 fieldset 中。这应该适用于无线电场项目：

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

【讨论】：

感谢@nicodemuz，但我只能在直接添加到无线电控件时才能使其正常工作。当我将侦听器添加到整个字段集或面板时，它不会触发。我认为侦听器系统的全部目的是在不同的级别绑定，以便新添加的控件自动获取现有的处理程序。那些未处理的事件会冒泡，直到它们确实遇到了处理程序。然而，情况似乎并非如此。有其他方法可以尝试吗？我不确定如何调试这样的事件。

【参考方案3】：

您可以将侦听器添加到原始脚本的默认部分，如下所示：

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