Sencha Touch Checkbox select on label click

I have some checkboxes in my app:

http://img846.imageshack.us/img846/7397/628b开发者_StackOverflow社区c474d4904ff2993df81.png

Now I want to trigger/toggle selection when the labels are clicked.

Any ideas?

If you want to achieve the same in Sencha Touch 2, you can use the following for radiofields or checkboxes:

defaults: {
    xtype: 'radiofield',
    name: 'fieldname',
    listeners: {
        // Adding listener for tap event on label element,
        // this should toggle the checkbox.
        "tap": {
            element: "label",
            fn: function () {
                var me = this;
                me.setChecked(!me.isChecked());
            },
        }
    }
}

EDIT: Apparently, the "click" event should be "tap", according to @jayteejee. Changed the original "click" listener to a "tap" listener accordingly.

Use this to add tap listener to the label element.

{
    id: 'username',
    xtype: 'checkboxfield',
    name : 'username',
    label: 'User Name',
    listeners:{
        labelEl:{
           tap:function(){
              var obj = Ext.getCmp('username');
             if(obj.isChecked()){
                    obj.uncheck();
              }else{
                    obj.check();
              }
           }
        }
    }
}

Thijs' answer worked well with a minor adjustment to get it working on Android and iOS with Sencha Touch 2. Just change "click" to tap:

{
    xtype: 'checkboxfield',
    name: 'fieldname',
    label: 'Label',
    listeners: {
        tap: {
            element: "label",
            fn: function () {
                this.setChecked(!this.isChecked());
            }
        }
    }
}