在对话框中切换一组字段的可见性

Posted 2023-02-22

【中文标题】在对话框中切换一组字段的可见性

【英文标题】：Toggling the visibility of a group of fields in a dialog

【发布时间】：2014-05-15 20:39:42

【问题描述】：

我正在尝试为下拉菜单创建一个简单的小部件侦听器，并根据所选值显示不同的输入字段。

一个值应显示两个文本字段，如果选择不同的值，它将显示另一组文本字段。

我是否应该创建所有文本字段并赋予它们隐藏属性，然后根据下拉菜单找到节点并调用显示方法？如何使用 ExtJS 定位不同的节点？

【参考方案1】：

两种方式：

最初将所有文本字段的“隐藏”属性设置为 true，并为每个文本字段分配 ID。

稍后将更改事件处理函数添加到下拉列表中，该函数将为您提供下拉列表的选定值。

在此更改事件处理函数中编写代码以根据所选值显示/隐藏。

获取您在其中具有下拉菜单的面板，并在上述相同的更改处理程序中动态添加或删除它们。不过这有点棘手。

用于隐藏/显示的 API 文档在 CQ.Ext.form.TextField 中使用 setVisible(true/false)。要获取文本字段，请使用 CQ.Ext.getCmp("ID_OF_TEXTFIELD");

【参考方案2】：

下面是一种可能的解决方案。

首先，让我们创建一个函数来显示必要的字段并隐藏另一个：

var Toogle = ;

Toogle.manageFields = function manageFields(field) 

    //Get the panel of the tab our drop down menu on
    var panel = field.findParentByType('panel');

    // Our text fields are stored in widgets of type dialogfieldset
    // and we get their reference 
    var fieldSets = panel.findByType('dialogfieldset');
    var fLength = fieldSets.length;

    // Get value of selected option in out select box
    var fieldValue = field.getValue();
    for (var i = 0; i < fLength ; i++) 
        var fieldSet = fieldSets[i];

        // Values of options in our drop down menu correspond to
        // respective properties in dialogfieldsets we will set next,
        // so if value of selected options matches itemId we show this widget,
        // otherwise - hide.
        if (fieldValue === fieldSet.getItemId())
            fieldSet.show();        
         else 
            fieldSet.hide();
        
        

现在让我们看看我们的对话框：

<?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"
    title="My dynamic dialog"
    
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">           
            <tab2
                jcr:primaryType="cq:Panel"
                title="tab2">
                <items jcr:primaryType="cq:WidgetCollection">
                    <selection
                        jcr:primaryType="cq:Widget"
                        defaultValue="option1"
                        fieldLabel="choose field to show"
                        name="./tf"
                        type="select"
                        xtype="selection">
                        <options jcr:primaryType="cq:WidgetCollection">
                            <option1
                                jcr:primaryType="nt:unstructured"
                                text="field set 1"
                                value="fs1"/>
                            <option2
                                jcr:primaryType="nt:unstructured"
                                text="field set 2"
                                value="fs2"/>
                        </options>
                        <listeners
                            jcr:primaryType="nt:unstructured"
                            loadcontent="function(field, rec, path)Toogle.manageFields(field);"
                            selectionchanged="function(field, value)Toogle.manageFields(field);"/>
                    </selection>
                    <fs1
                        jcr:primaryType="cq:Widget"
                        hidden="Booleantrue"
                        itemId="fs1"
                        xtype="dialogfieldset">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <text1
                                jcr:primaryType="cq:Widget"
                                fieldLabel="TextField1"
                                name="./text1"
                                xtype="textfield"/>
                        </items>
                    </fs1>
                    <fs2
                        jcr:primaryType="cq:Widget"
                        hidden="Booleantrue"
                        itemId="fs2"
                        xtype="dialogfieldset">
                        <items jcr:primaryType="cq:WidgetCollection">
                            <text2
                                jcr:primaryType="cq:Widget"
                                fieldLabel="TextField2"
                                name="./text2"
                                xtype="textfield"/>
                        </items>
                    </fs2>
                </items>
            </tab2>
        </items>
    </items>
</jcr:root>

它的结构非常简单。我们创建必要的小部件，然后添加侦听器“loadcontent”和“selectionchanged”，我们调用相同的函数但具有不同的参数（根据 Widgets API）。

希望对您有所帮助。 如果您有任何问题，请不要犹豫。

【讨论】：

Alex 你太棒了，我正在努力学习更多关于扩展小部件和创建自定义小部件的知识，我可以做些什么来让自己成为一个更好的 CQ5 开发人员？

Alex 我如何在此处扩充此段： if (fieldValue === fieldSet.getItemId()) fieldSet.show(); 其他 fieldSet.hide();我总共需要四个字段和两个来显示值'a'或两个来显示值'b'

对不起，亚历克斯，我想我被摆正了，我没有看到字段集。所以我正在将我的文本节点输入到我的字段集中……天哪，你真是太棒了！

好的，Alex 我需要你 :-( 我的字段集中有 smartimages 现在我需要将它包装在一个多字段组件中。有什么建议...？

@Radleaf，嗨，你的问题仍然是真实的吗？要成为更好的 CQ 开发人员，您需要一些 ExtJS 知识和经验、经验和更多经验）