CQ5 ExtJs widgets - extjs

Question

I am new to Adobe CQ5 version 5.6.1 and trying to learn widget creation using ExtJs, so I am doing a few examples. All I am trying to do here is show an alert box on click of a button but not getting it. Here is the code.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
helpPath="en/cq/current/wcm/default_components.html#Title"
title="Title Component"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<webcastAtAGlanceTitle
jcr:primaryType="cq:Widget"
fieldLabel="Title"
maxLength="{Long}25"
name="./webcastAtAGlanceTitle"
xtype="textfield"/>
<selection
jcr:primaryType="cq:Widget"
defaultValue="pageProp"
fieldLabel="Configuration Options"
name="./selection"
type="radio"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<pageProp
jcr:primaryType="nt:unstructured"
text="Page Properties"
value="pageProp"/>
<RTE
jcr:primaryType="nt:unstructured"
text="RTE"
value="RTE"/>
</options>
</selection>
<testbutton
jcr:primaryType="cq:Widget"
autoWidth="{Boolean}true"
fieldLabel="test button"
text="Ok"
xtype="button">
<listener
jcr:primaryType="nt:unstructured"
click="function(){alert("Hello World","All set!!!");}"/>
</testbutton>
</items>
</jcr:root>
I am sure this is pretty simple to implement. Appreciate the inputs.
Thanks !

Answer 1

This doesn't need a listener at all. Alternatively, you can use the handler property to specify the function that needs to be called when the button is clicked.
<testbutton
jcr:primaryType="cq:Widget"
autoWidth="{Boolean}true"
fieldLabel="test button"
text="Ok"
xtype="button"
handler="function(b, e){alert('Hello!!');}" />
The b and e are the button and event objects respectively, that are passed to the handler. For further reference check this Button API.
And for the listener part, the node name has to be listeners instead of listener. That should work.
<testbutton
jcr:primaryType="cq:Widget"
autoWidth="{Boolean}true"
fieldLabel="test button"
text="Ok"
xtype="button">
<listeners
jcr:primaryType="nt:unstructured"
click="function(){alert("Hello World","All set!!!");}"/>
</testbutton>