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

Question

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

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

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

Answer 1

两种方式：

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

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

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

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

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

Answer 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"
    width="1000"
    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="{Boolean}true"
                        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="{Boolean}true"
                        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）。

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