CQ5 ExtJs 小部件

Question

我是 Adob​​e CQ5 版本 5.6.1 的新手，并试图学习使用 ExtJs 创建小部件，所以我正在做一些示例。我在这里要做的就是在单击按钮时显示一个警报框，但没有得到它。这是代码。

   <?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>

我确信这很容易实现。欣赏输入。

谢谢！

Answer 1

这根本不需要监听器。或者，您可以使用handler 属性来指定单击按钮时需要调用的函数。

<testbutton
    jcr:primaryType="cq:Widget"
    autoWidth="{Boolean}true"
    fieldLabel="test button"
    text="Ok"
    xtype="button"
    handler="function(b, e){alert('Hello!!');}" />

b 和 e 分别是传递给处理程序的按钮和事件对象。如需进一步参考，请查看this Button API。

对于监听器部分，节点名称必须是listeners 而不是监听器。应该可以的。

<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>