how to hide and show dialog field based on selection for a multifield component

[shridhar_sahu]

Hello All,

I have a working scenario in which if a author selects radiodefault as a radiotype(Note: radiotype is a component with xtype selection and radiodefault of type nt:unstructured)  then it should hide a field named optionimagepath(Note: optionimagepath has xtype cq:widget) in multifield component named optionlist(Note: optionlist has xtype multifield)

i have written a selectionchanged listener :

function(comp, val, isChecked) {

          var panel = comp.findParentByType('panel');

          var link = panel.getComponent('optionlist').getComponent('fieldConfig');

           if(val === 'radiodefault'){

          link.getComponent('option-imagepath').hide();                   //please help over here as these listener is not working

          }else{

          link.getComponent('option-imagepath').show();

          }

}

BELOW IS THE XML CODE

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:cq="/external-link.jspr%2Fcq%2F1.0" xmlns:jcr="http://www.jcp.org//1.0" xmlns:nt="http://www.jcp.org/jcr0"

    jcr:primaryType="cq:Dialog"

    title="Dialog"

    xtype="dialog">

    <items

        jcr:primaryType="cq:Widget"

        xtype="tabpanel">

        <items jcr:primaryType="cq:WidgetCollection">

            <tab1

                jcr:primaryType="cq:Panel"

                title="Add/Edit Radio Component">

                <items jcr:primaryType="cq:WidgetCollection">        

                        <radiotype

                        jcr:primaryType="cq:Widget"

                        fieldLabel="Radio Type"

                        name="./type"

                        type="select"

                        xtype="selection">

                        <options jcr:primaryType="cq:WidgetCollection">

                            <radio-default

                                jcr:primaryType="nt:unstructured"

                                text="Radio Default"

                                value="radiodefault"/>

                            <radio-image

                                jcr:primaryType="nt:unstructured"

                                 text="Radio Image"

                                value="radioimage"/>

                        </options>

                        <listeners

                            jcr:primaryType="nt:unstructured"

                            selectionchanged="

                              function(comp, val, isChecked) {

                              var panel = comp.findParentByType('panel');

                                var link = panel.getComponent('optionlist').getComponent('fieldConfig');

                              if(val === 'radiodefault'){

                              link.getComponent('option-imagepath').hide();

                              }else{

                              link.getComponent('option-imagepath').show();

                              }

                            }

                        "/>

                    </radiotype>

                    <optionlist

                        jcr:primaryType="cq:Widget"

                        fieldLabel="Option List"

                        name="./optionlist"

                        title="Add/Edit Options"

                        xtype="multifield">

                        <fieldConfig

                            jcr:primaryType="cq:Widget"

                            border="true"

                            hideLabel="true"

                            layout="form"

                            padding="10px"

                            width="1000"

                            xtype="multi-field-panel">

                            <items jcr:primaryType="cq:WidgetCollection">

                                <optioncontent

                                    jcr:primaryType="cq:Widget"

                                    dName="optioncontent"

                                    fieldLabel="Option Content"

                                    width="250"

                                    xtype="textfield"/>

                                <optionimagepath

                                    jcr:primaryType="cq:Widget"

                                    dName="optionimagepath"

                                    fieldLabel="Option Image"

                                     width="250"

                                    xtype="pathfield"/>

                            </items>

                        </fieldConfig>

                    </optionlist>

                </items>

            </tab1>

        </items>

    </items>

</jcr:root>

[edubey]

Before you execute listener, can you verify if you are getting proper reference to the field by using

link.getComponent('option-imagepath').

[shridhar_sahu]

hello Sir,

When i'm using link.getComponent('option-imagepath') i'm not getting proper reference to the field. So can you please let me know how will i refer to option-imagepath field.

function(comp, val, isChecked) {

var panel = comp.findParentByType('panel');

                                var link = panel.getComponent('optionlist').getComponent('fieldConfig');

alert("radio in");

if(val === 'radiodefault'){

link.getComponent('option-imagepath').hide();

alert("option in");

}else{

link.getComponent('option-imagepath').show();

}

                            }

Thanks