在cq5小部件中，根据对话框中的复选框隐藏和显示 [英] In cq5 widget hide and show based on checkbox in dialog

问题描述

我有一个实现，其中必须基于复选框显示和隐藏我的单选按钮组。我只包含了一个Cq：panel，其中包含一个复选框和一个单选按钮组（其中包含两个单选按钮）的小部件。我在jsp中获取此值并进行相应的操作。我的问题是，当作者选中/取消选中复选框时，我可以显示/隐藏此单选按钮组，因为单选按钮组取决于复选框。当取消选中复选框时隐藏此组时，这会令人愉悦。我已经通过了api，但是找不到。谁能帮我这个忙。

I have a implementation in which my radio button group has to be shown and hide based on checkbox. I just included a Cq:panel in which it contains widgets of one checkbox and one radio button group(which contains two radio buttons) .I am getting this values in my jsp and manipulating accordingly. My question is, can i show/hide this radio button group when author checks/unchecks the checkbox because the radio button group is dependent on check box.It will be pleasing when i hide this group when check box is unchecked. I have gone through the api but i couldn't find. Can anyone please help me on this. Thanks in advance.

推荐答案

是的，您可以通过将侦听器附加到 selectionchanged code>事件，在选中该复选框时触发。 API 提供将为窗口小部件触发的公共事件的列表。

Yes, you can achieve this by attaching a listener to the selectionchanged event that is triggered when the checkbox is selected. The API provides the list of public events that would be triggered for a widget.

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

In order to attach a listener to an event, you need to create a node of type nt:unstructured called listeners under the required widget and add the event name as a property to the node, whose value would be the handler function which you would like to execute.

在您的情况下，属性应进行 selectionchanged 并且其值应为可以满足您要求的函数，例如

In your case the property should be selectionchanged and the value for it should be a function that fulfills your requirement, something like this

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>

这篇关于在cq5小部件中，根据对话框中的复选框隐藏和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！