CQ5 ExtJs widgets

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(&quot;Hello World&quot;,&quot;All set!!!&quot;);}"/>
    </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(&quot;Hello World&quot;,&quot;All set!!!&quot;);}"/>
</testbutton>