The following example shows how you can detect when the Flex PopUpButton control is opened or closed by listening for the open or close event.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
PopUpButton {
popUpStyleName: myCustomPopUpStyleName;
}
.myCustomPopUpStyleName {
fontWeight: normal;
textAlign: left;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.Menu;
import mx.controls.Alert;
import mx.events.DropdownEvent;
import mx.utils.ObjectUtil;
[Bindable]
private var menu:Menu;
private function init():void {
menu = new Menu();
menu.dataProvider = arr;
}
private function popUpButton_open(evt:DropdownEvent):void {
arrColl.addItem(evt);
}
private function popUpButton_close(evt:DropdownEvent):void {
arrColl.addItem(evt);
}
private function dataGrid_itemClick(evt:ListEvent):void {
var obj:DropdownEvent = evt.currentTarget.selectedItem;
var str:String = "(empty string)";
if (obj.triggerEvent) {
str = obj.triggerEvent.toString();
}
Alert.show(str, "triggerEvent:");
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="Button" />
<mx:Object label="ButtonBar" />
<mx:Object label="ColorPicker" />
<mx:Object label="ComboBox" />
</mx:Array>
<mx:ArrayCollection id="arrColl" />
<mx:ApplicationControlBar dock="true">
<mx:PopUpButton id="popUpButton"
label="Select a control..."
popUp="{menu}"
initialize="init();"
open="popUpButton_open(event);"
close="popUpButton_close(event);" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
variableRowHeight="true"
width="100%"
height="100%"
itemClick="dataGrid_itemClick(event);">
<mx:columns>
<mx:DataGridColumn dataField="type"
width="100" />
<mx:DataGridColumn dataField="triggerEvent"
itemRenderer="mx.controls.Label"
wordWrap="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
