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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

11 Responses to Displaying a Tree control as a pop up for a Flex PopUpButton control

  1. Gustavo says:

    Hi,

    You mean that we can put anything we want inside a PopUpButton?

    Thanks

  2. peterd says:

    Gustavo,

    As far as I know (but there may be exceptions that I’m not aware of yet).
    For another example, see “Using a DataGrid control as a pop up in the Flex PopUpButton control”.

    Peter

  3. schoty says:

    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.

  4. guillaume.jt says:

    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

  5. Vackar says:

    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?

  6. Vackar says:

    OK, if anyone else has the above problem see: http://tech.groups.yahoo.com/group/flexcoders/message/99105

  7. Scuba says:

    Vackar, thanks for sharing the link.

  8. Ash says:

    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.

  9. dinukx says:

    Great stuff dude….
    hatz off…
    you just save a day…
    cheers …
    hoping to see more

  10. Casey says:

    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

  11. riavietnam says:

    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.