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.