CODEWITHSUNDEEP
extjswidgetaemlisteners
Tyler Canton
Tyler Canton

Reputation: 641

Toggling the visibility of a group of fields in a dialog

I'm trying to create a simple widget listener for a drop-down, and display different input fields based on the value selected.

One value should display two text fields and if a different value is selected it will display another set of text fields.

Should I create all text fields and give them a property of hidden and then, based off the drop-down, find the node and call a display method? How do I target different nodes with ExtJS?

Upvotes: 2

Views: 8513

Answers (2)

yash ahuja
yash ahuja

Reputation: 480

Two ways:

    • Initially set the "hidden" property of all the text fields to true & assign IDs to each text field.

    • Later add a change event handler function to the drop-down which will give you the selected value of drop-down.

    • In this change event handler function write the code to show/hide based on the selected value.

  2. Get the panel in which you have drop-down, and add items dynamically or remove them in the same change handler mentioned above. However this is little tricky.

API docs for hide/show use setVisible(true/false) in the CQ.Ext.form.TextField. To get hold of a Text field use CQ.Ext.getCmp("ID_OF_TEXTFIELD");

Upvotes: 0

Oleksandr Tarasenko
Oleksandr Tarasenko

Reputation: 1454

Bellow one of possible solutions.

First of all, lets create a function which will show necessary fields and hide another:

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();
        }
    }    
}

Now lets look at our dialog:

<?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>

It's structure is pretty simple. We create necessary widgets and then add listeners 'loadcontent' and 'selectionchanged' where we call the same function but with different params (as per Widgets API).

Hope it will help you. Do not hesitate to ask, if you have any questions.

Upvotes: 4

Related Questions