"this" in function onclick for checkboxfield

Code:

---

       
xtype: 'checkboxfield',                   
name: 'exampleName',
id: 'exampleId',
value: 'exampleValue',
label: 'exampleLabel',
 listeners: {
      click: {
              element: 'el',
                fn: function() {
                      alert("clicked:"+this.name+". checked:"+this.checked+".")
                }
          }
 }

---

I want to get "clicked:exampleName. checked:true/false."... but i'm getting "clicked:undefined. checked:undefined", how can get the information that i want?

made a breakpoint with chrome developer tools and went through the var... ended up with this..

alert("clicked:"+this.dom.id+". checked:"+this.dom.lastElementChild.checked+".")

which works... but is this how it should be done?