The following example shows you how you can add items to a pop up menu in a PopUpButton control in Flex by specifying the iconField
property in the PopUpButton control’s nested Menu control.
Full code after the jump.
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Menu; [Bindable] private var menu:Menu; private function initMenu():void { menu = new Menu(); menu.dataProvider = arr; } ]]> </mx:Script> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: normal; textAlign: left; } </mx:Style> <mx:Array id="arr"> <mx:Object label="Alert" /> <mx:Object label="Button" icon="@Embed('assets/Button.png')" /> <mx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" /> <mx:Object label="CheckBox" icon="@Embed('assets/CheckBox.png')" /> <mx:Object label="ColorPicker" icon="@Embed('assets/ColorPicker.png')" /> </mx:Array> <mx:PopUpButton id="popUpButton" label="Select a control..." popUp="{menu}" preinitialize="initMenu();" creationComplete="popUpButton.open();" /> </mx:Application>
View source is enabled in the following example.
If your data provider didn’t have an “icon” field, you could set the iconField
property on the Menu instance to the field with the icon you want to display, as shown in the following snippet:
<mx:Array id="arr"> <mx:Object label="Alert" /> <mx:Object label="Button" img="@Embed('assets/Button.png')" /> <mx:Object label="ButtonBar" img="@Embed('assets/ButtonBar.png')" /> <mx:Object label="CheckBox" img="@Embed('assets/CheckBox.png')" /> <mx:Object label="ColorPicker" img="@Embed('assets/ColorPicker.png')" /> </mx:Array> <mx:Script> <![CDATA[ import mx.controls.Menu; [Bindable] private var menu:Menu; private function initMenu():void { menu = new Menu(); menu.iconField = "img"; menu.dataProvider = arr; } ]]> </mx:Script>
i am new @ Flex and i am wondering if there is a way to use a dataprovider with Image-objects for the icon. How do I convert an Image-object to an icon?
Greetz, Tobias Hoffmann
Perhaps you could provide a similar example of an icon on a MenuItem under a MenuBar where the MenuItems are specified in an XMLList. : ) I cannot figure out how to get the icon field to consume the string that is placed there.
@Chad,
I’ll take a look tonight and post what I find out tomorrow.
Peter
Done; “Displaying icons in an MX MenuBar control in Flex”
Peter
But if you’re using XML and attributes, you may have to set your
iconField
property to something like @icon.Peter