Question

I need to access the combobox child (textinput and button) without creating a customize component. I know the best practice is to create a custom component but still need to access the combobox child like textinput and listen for their event. Any help ?

Answer 1

You can add an event to the textInput of your comboBox like this :

myComboBox.textInput.addEventListener(TextOperationEvent.CHANGE, myFunction);

because the textInput object is a child of the comboBox object (myComboBox.textInput).

---

Here’s a full working example

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            import spark.events.IndexChangeEvent;
            import spark.events.TextOperationEvent;

            [Bindable]
            private var _dp:ArrayCollection = new ArrayCollection([
                {id : "1", name : "Paul"},
                {id : "2", name : "Andrew"},
                {id : "2", name : "Bob"}
            ]);

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                myComboBox.textInput.addEventListener(TextOperationEvent.CHANGE, showTextInputValue);
                myComboBox.addEventListener(IndexChangeEvent.CHANGE, showComboValue);
            }

            protected function showTextInputValue(event:TextOperationEvent):void
            {
                textFieldValue.text = "myComboBox.textInput : " + event.currentTarget.text;
            }

            protected function showComboValue(event:IndexChangeEvent):void
            {
                if (event.newIndex > -1)
                    comboBoxValue.text = "myComboBox selected item is : " + myComboBox.selectedItem.name;
            }

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:ComboBox id="myComboBox" labelField="name" dataProvider="{_dp}"/>

    <mx:Spacer height="100"/>

    <s:Label id="textFieldValue"/>

    <s:Label id="comboBoxValue"/>

</s:WindowedApplication>