Handling events on radio buttons in Sencha Touch

Question

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.

Answer 1

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.

Answer 2

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('...');
        }
    }
}]

Answer 3

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

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