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

发布于 2024-11-03 06:18:54 字数 1146 浏览 1 评论 0原文

我正在尝试添加一些代码,每当用户单击 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);
                    }
                }
            }
        });
    }
});

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

I'm trying to add a bit of code that gets called whenever the user clicks on one of the radio button options in a panel in Sencha touch. I have it working by adding a click listener to the body of the panel and just checking the target and making sure it's a radio button (has a value).

I'm sure there's a better way to bind this handler. I've watched some of the tutorials about listeners, and from what I understand "I'm doing it wrong". But where can I find the info about doing it right? Here's a stripped down version of what I'm doing, which works using Sencha Touch 1.1.0 (this is the app javascript file):

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

I'm assuming what I should be doing is binding to the fieldset instead of the body, and probably listening for a change event instead of a click event. But all the forms I've tried besides this one don't seem to work.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

各空 2024-11-10 06:18:54

我已经制定了一个如下所示的版本:

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 元素而不是面板,但这比我的替代方案要好得多。我不再需要检查传递到单击事件处理程序的目标项来查看它是否是单选按钮,委托设置会处理这一点。现在,当我动态地将项目添加到字段集中时,处理程序可以正常工作。

I've worked down a version that looks like this:

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

I suspect there's a way to attach that to the fieldset element instead of the panel, but this is a lot better than the alternatives I had. I no longer have to inspect the target item passed into the click event handler to see if it was a radio button, the delegate setting takes care of that. And now the handler works appropriately when I dynamically add items to the fieldset.

深海少女心 2024-11-10 06:18:54

您可以尝试将侦听器添加到无线电场项目,或者像您所说的那样,添加到字段集。这应该适用于无线电场项目:

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

You can try adding listeners to your radiofield items, or like you said, to the fieldset instead. This should work for radiofield items:

items: [{
    label: 'first',
    value: 1,
    listeners: {
        check: function(button) {
            console.log('...');
        }
    }
}, {
    label: 'second',
    value: 2,
    listeners: {
        check: function(button) {
            console.log('...');
        }
    }
}]
徒留西风 2024-11-10 06:18:54

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

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

You can add the listener(s) to the default section of the original script, like so:

xtype: 'radiofield',  
        listeners: {  
            check: function() {   
            alert(this.value);  
            }  
        },  
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文