Calling an event on radiofield check

Question

I am creating a radiofield and I need to create an event when the radio field is checked.

The code that am using is:

items : [ {
            xtype : 'toolbar',
            docked : 'top',
            //id:'popupTitle',
            title : 'Send options',
            height : 30
        }, {
            xtype : 'radiofield',
            //  ui:'plain',
            id : 'r1',
            name : 'sendDoc',
            value : 'Default',
            label : 'Default',
            labelWidth : '50%',
            checked : true,
            //baseCls: 'x-plain',

            listeners : {
                check : function() {
                    var rad = Ext.getCmp('r1');
                    if (rad.isChecked()) {
                    }
                }

            }
        }, 
        {
            xtype : 'radiofield',
            name : 'sendDoc',
            id : 'r2',
            value : 'Source Workstep',
            label : 'Source Workstep',
            labelWidth : '50%',
            listeners : {
                check : function() {
                    var rad2 = Ext.getCmp('r2');
                    if (rad2.isChecked())   {
                        //alert("hi");
                        if (!this.workstepOverlay) {
                        this.workstepOverlay = Ext.Viewport.add({
                            xtype : 'workstepOverlay'
                        });
                        this.workstepOverlay.show();
                    }

                    }

                }

            }
        } ]

But this doesn seem to be working.

I get an error that says " requested keys of a value that is not an object"

What am i doing wrong?

Answer 1

Listen for the check event.

Fires when the checkbox is checked.

...
listeners : { 
   check : function( radioFld, event, obj) {
         console.log(radioFld.isChecked());
   }
}
...