Detecting when the Flex PopUpButton control is opened or closed

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.

View MXML

<?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.

3 thoughts on “Detecting when the Flex PopUpButton control is opened or closed

  1. hai… am learning flex for the past one month… i have a problem regarding popup button…. consider i want a popupbutton all thru my columns… iam able to create them…. i used an item renderer which creates popupbutton and included it in advanceddatagridcolumn. but the problem is, when i scroll the window[inside advanceddatagrid] up and down to view all the columns, the popup value selected by me is getting resetted. can anyone please help me??

  2. Hi Peter –
    Is there anyway to tell an open popUp Button to close (besides clicking outside of it or selecting an item)?

    I have a button within the dropdown that when clicked should roll up (close) the popUp button automatically. Can’t seem to figure it out.

    Thanks.

    1. @Hatch,

      You could try the open() and close() methods, as seen in the following snippet:

      <mx:Button mouseOver="popUpButton.open();" mouseOut="popUpButton.close();" />
      

      Peter

Comments are closed.