Listener in multi field

[patK-ze1xYs]

I am trying to use a listener for a selection inside the multifieldset  , E.g Following code snippet will be wrapped under the multi field. 

<multifieldSet>

              <option

                    jcr:primaryType="cq:Widget"
                    name="option"
                    type="select"
                    xtype="selection">
                    <options jcr:primaryType="cq:WidgetCollection">
                        <image
                            jcr:primaryType="nt:unstructured"
                            text="Image"
                            value="image"/>
                        <video
                            jcr:primaryType="nt:unstructured"
                            text="video"
                            value="video"/>
                    </options>
                     <listeners
                    jcr:primaryType="nt:unstructured"
                    loadcontent="function(box,value){
                                    if (this.getValue() == 'image'){
                                         alert('image');
                                        // hide   Text box  1

                                    }else {

                                        // hide   Text box 2
                                        }
                                    }"

                    selectionchanged="function(box,value){
                                    if (this.getValue() == 'image'){

                                             // hide   Text box  1                                   

                                     }else {

                                        // hide   Text box 2
                                        }
                                    }"/>
                </mediaOption>
                <text1
                    jcr:primaryType="cq:Widget"
                    name="text1"
                     xtype="textfield"/>
                <text2
                    jcr:primaryType="cq:Widget"
                    name="text2"
                     xtype="textfield"/>

<multifieldSet>

Can anybody please tell which API should  be used  and how to use them to handle the logic 

[smacdonald2008 · Accepted solution]

When working with xtypes and listeners - you use the AEM Widget API.  For information, see CQ5 Widgets API Documentation.

To learn how to work with xtypes and listeners -- see this community article:

http://helpx.adobe.com/experience-manager/using/dynamically-updating-aem-custom-xtype.html

In this use case -- an xtype object's listeners are used to update fields. The value selected from a drop down is used to set a text field. However - once you understand this -- you can do a lot using xtype and listeners. 

The listeners property lets you specify an event handler for this control.  

listeners: {
                selectionchanged: {
                    scope:this,
                    fn: this.updateHidden
                }
            },
The only event handler that is defined is selectionchanged that is fired when a selection in the drop-down control is changed. In this situation, a method named updateHidden is invoked. The following code example shows the updateHidden method.  

// called when a selection in the drop-down is made
updateHidden: function() {
    var val1 = this.linkType.getValue();
    this.linkText.setValue(val1);
}

.