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

Question

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

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

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

Answer 1

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

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

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”，在其中调用相同的函数但使用不同的参数(根据小部件 API)。

希望对您有帮助。 如果您有任何疑问，请随时询问。