Problem
Event listener on event with bubbling from ComboBox item renderer do not work.
Solution
Common way to listen events with bubbling from itemRenderer of som UI component is not works for the ComboBox. Because of ComboBox is complex UI component, it consist of TextField and DropDown. So all events from itemRenderer must be handled on ComboBox dropDown.
Detailed explanation
Here is the source code with sample listeners:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.DropdownEvent;
[Bindable]
private var _days : Array = [ "Monday", "Thuesday", "Wednesday" ];
private function init () : void
{
// Regular way to handle event bubbling from item renderer
cmbDays.addEventListener( "switchToDay", regularListener );
// Way to handle event bubbling from item renderer for Combo Box
cmbDays.addEventListener( DropdownEvent.OPEN, onDropDownOpen, false, 0, true );
cmbDays.addEventListener( DropdownEvent.CLOSE, onDropDownClose, false, 0, true );
}
private function onDropDownOpen ( event:DropdownEvent ) : void
{
cmbDays.dropdown.addEventListener( "switchToDay", workingHandler, false, 0, true );
}
private function onDropDownClose ( event:DropdownEvent ) : void
{
event.currentTarget.dropdown.removeEventListener( "switchToDay", workingHandler );
}
// This handler will never work
private function regularListener ( event:Event ) : void
{
trace( "I'm the regular listener" );
}
// This handler will work
private function workingHandler ( event:Event ) : void
{
trace( "I'm the working handler here :) " );
}
]]>
</mx:Script>
<mx:ComboBox id="cmbDays" dataProvider="{ _days }" dropdownWidth="180">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data}" width="60" />
<mx:Button label="Switch to" click="dispatchEvent( new Event( 'switchToDay', true ) );" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:ComboBox>
</mx:Application>
