Displaying a Tree control as a pop up for a Flex PopUpButton control

The following example shows how you can use a Tree control as a PopUpButton control’s pop up in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Tree {
            textAlign: left;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:XML id="mlb" source="mlb.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton label="Please select a team...">
            <mx:popUp>
                <mx:Tree id="tree"
                        dataProvider="{mlb}"
                        labelField="@label"
                        showRoot="false"
                        width="200"
                        rowCount="8" />
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

11 thoughts on “Displaying a Tree control as a pop up for a Flex PopUpButton control

  1. Is there a way to stop the popup button’s default behavior when selecting a branch in the tree?

    For example:

    I want to click on the name of a branch item and have it open the branch but NOT close the popup. Currently any time you select an item from the tree view it closes the popup.

    I have tired stopping the default behavior for various events but can’t seem to stop it from closing.

  2. hi !
    Very good, so how can we stop the event for no close the layer when we clik or select an item in datagrid or list in the layer and close layer with an RollOut or Click_Over layer ???
    thank’s

    Guillaume

  3. Hi,

    First of all thanks for the example, it’s great.

    Got a quick question for you. I have an app with some states (x,y), and the control is rendered in stateY. It works when I change from state X to state Y the first time, but when I switch from state X to state Y after that the popup doesn’t work.

    Any idea why?

  4. To answer schoty and guillaume.jt question about stopping the default close action of the popup you must listen for the ITEM_CLICK event of your popup List or Tree and call event.stopImmediatePropagation() in your event handler.

  5. I am getting an error message on the <mx:popUp> component. It says “could not resolve <mx:popUp> to a component implemenation. I am using Flex Builder 3 and sdk 3.5. Any ideas?

    Casey

  6. Hi all, when I apply this as an AIR application, the process is still working but the effect is lost. I mean the effect at opening/closing popupbutton or selecting a item in the tree.

    I do not know why there is a difference between Web application with AIR WindowedApplication

    Thanks.

Comments are closed.