Flex Examples
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.
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.
Share
Hi,
You mean that we can put anything we want inside a PopUpButton?
Thanks
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
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.
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
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?
OK, if anyone else has the above problem see: http://tech.groups.yahoo.com/group/flexcoders/message/99105
Vackar, thanks for sharing the link.
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.
Great stuff dude….
hatz off…
you just save a day…
cheers …
hoping to see more
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
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.