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

Feb

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

By peterd

Categories: PopUpButton and Tree Tags: popUp, PopUpButton, Tree.

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.

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

8 Responses to “Displaying a Tree control as a pop up for a Flex PopUpButton control”

Feed for this Entry View blog reactions

1 Gustavo Feb 26th, 2008 at 1:14 pm

Hi,

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

Thanks
2 peterd Feb 26th, 2008 at 1:41 pm

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 Mar 5th, 2008 at 2:36 pm

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 Mar 11th, 2008 at 2:49 pm

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 Apr 25th, 2008 at 5:55 am

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 Apr 25th, 2008 at 7:21 am

OK, if anyone else has the above problem see: http://tech.groups.yahoo.com/group/flexcoders/message/99105
7 Scuba Jul 25th, 2008 at 8:17 am

Vackar, thanks for sharing the link.
8 Ash Jul 29th, 2008 at 9:33 am

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.