Question

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

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

我是否应该创建所有文本字段并为其提供隐藏属性，然后根据下拉列表找到节点并调用显示方法？如何使用ExtJS定位不同的节点？

Answer 1

Bellow其中一个可能的解决方案。

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

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'，我们调用相同的函数但使用不同的params（根据Widgets API）。

希望它会对你有所帮助。如果您有任何问题，请随时询问。

Answer 2

两种方式：

- 最初将所有文本字段的“隐藏”属性设置为true＆amp;为每个文本字段分配ID。
- 稍后在下拉列表中添加一个更改事件处理函数，它将为您提供所选的下拉列表值。
- 在此更改事件处理函数中，根据所选值编写要显示/隐藏的代码。
获取您已下拉的面板，并动态添加项目或在上述相同的更改处理程序中删除它们。然而，这有点棘手。

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

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

2 个答案: