在cq5小部件中隐藏和显示基于对话框中的复选框

Question

我有一个实现,其中我的单选按钮组必须显示并隐藏基于复选框.我刚刚包含了一个Cq:面板,其中包含一个复选框和一个单选按钮组(包含两个单选按钮)的小部件.我在我的jsp中获取这些值并相应地进行操作.我的问题是,当作者检查/取消选中复选框时,我可以显示/隐藏此单选按钮组,因为单选按钮组依赖于复选框.当取消勾选复选框时隐藏此组时,这将是令人愉快的.我已经通过api,但我找不到.任何人都可以帮我这个.提前致谢.

Answer 1

是的,您可以通过将侦听器附加到selectionchanged选中复选框时触发的事件来实现此目的.该API提供了将触发对微件公共事件的列表.

为了将侦听器附加到事件,您需要创建一个listeners在所需小部件下调用的类型为nt:unstructured的节点,并将事件名称作为属性添加到节点,其值将是您希望的处理函数执行.

在你的情况下,属性应该是selectionchanged,它的值应该是一个满足你的要求的函数,就像这样

function(comp, val, isChecked) {
    var panel = comp.findParentByType("panel"); //find the parent panel container
    var rdg = panel.getComponent("rdg"); //find the component with itemId rdg

    /*hide or show component based on checked value */
    isChecked ? rdg.hide() : rdg.show(); 
}

面板内对话框的结构是

<dialog jcr:primaryType="cq:Dialog" title="Test Component" xtype="panel">
    <items jcr:primaryType="cq:WidgetCollection">
        <chkbox jcr:primaryType="cq:Widget" fieldLabel="Show radio buttons" name="./show" type="checkbox" xtype="selection">
            <listeners jcr:primaryType="nt:unstructured" selectionchanged="function(comp, val, isChecked) { 
                var panel = comp.findParentByType("panel"); 
                var rdg = panel.getComponent("rdg"); 
                isChecked ? rdg.show() : rdg.hide(); 
            }"/>
        </chkbox>
        <link jcr:primaryType="cq:Widget" fieldLabel="Select one" itemId="rdg" name="./rad" type="radio" xtype="selection">
            <options jcr:primaryType="cq:WidgetCollection">
                <radio1 jcr:primaryType="cq:Widget" text="Yes" value="T"/>
                <radio2 jcr:primaryType="cq:Widget" text="No" value="F"/>
            </options>
        </link>
    </items>
</dialog>