The following example shows you how you can align the labels in a PopUpButton control’s pop up menu in Flex by setting the
popUpStyleName
and
textAlign
styles
<?
xml version="1.0"
?>
<!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.controls.Menu;
import mx.events.MenuEvent;
[Bindable]
private var menu:Menu;
private function initMenu():void {
menu = new Menu();
menu.dataProvider = arr;
}
]]>
</ mx:Script >
< mx:Array id ="arr" >
< mx:Object label ="Button" />
< mx:Object label ="ButtonBar" />
< mx:Object label ="ColorPicker" />
< mx:Object label ="ComboBox" />
</ mx:Array >
< mx:Style >
.myCustomPopUpStyleName {
textAlign: left;
}
</ mx:Style >
< mx:ApplicationControlBar dock ="true" >
< mx:PopUpButton id ="popUpButton"
label ="Select a control…"
popUp ="{menu}"
popUpStyleName ="myCustomPopUpStyleName"
preinitialize ="initMenu();" />
</ mx:ApplicationControlBar >
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.controls.Menu;
import mx.events.MenuEvent;
[Bindable]
private var menu:Menu;
private function initMenu():void {
menu = new Menu();
menu.dataProvider = arr;
}
]]>
</ mx:Script >
< mx:Array id ="arr" >
< mx:Object label ="Button" />
< mx:Object label ="ButtonBar" />
< mx:Object label ="ColorPicker" />
< mx:Object label ="ComboBox" />
</ mx:Array >
< mx:Style >
.myCustomPopUpStyleName {
textAlign: left;
}
</ mx:Style >
< mx:ApplicationControlBar dock ="true" >
< mx:PopUpButton id ="popUpButton"
label ="Select a control…"
popUp ="{menu}"
popUpStyleName ="myCustomPopUpStyleName"
preinitialize ="initMenu();" />
</ mx:ApplicationControlBar >
</ mx:Application >
Or, if a dynamic example is a bit more your style…
<?
xml version="1.0"
?>
<!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.events.ItemClickEvent;
import mx.controls.Menu;
import mx.events.MenuEvent;
[Bindable]
private var menu:Menu;
private function initMenu():void {
menu = new Menu();
menu.dataProvider = arr;
}
private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
var obj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomPopUpStyleName");
obj.setStyle("textAlign", evt.label);
popUpButton.open();
}
]]>
</ mx:Script >
< mx:Array id ="arr" >
< mx:Object label ="Button" />
< mx:Object label ="ButtonBar" />
< mx:Object label ="ColorPicker" />
< mx:Object label ="ComboBox" />
</ mx:Array >
< mx:Style >
.myCustomPopUpStyleName {
textAlign: left;
}
</ mx:Style >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="textAlign:" >
< mx:ToggleButtonBar id ="toggleButtonBar"
selectedIndex ="0"
itemClick ="toggleButtonBar_itemClick(event);" >
< mx:dataProvider >
< mx:Array >
< mx:Object label ="left" />
< mx:Object label ="center" />
< mx:Object label ="right" />
</ mx:Array >
</ mx:dataProvider >
</ mx:ToggleButtonBar >
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:PopUpButton id ="popUpButton"
label ="Select a control"
popUp ="{menu}"
popUpStyleName ="myCustomPopUpStyleName"
preinitialize ="initMenu();" />
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="top"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.events.ItemClickEvent;
import mx.controls.Menu;
import mx.events.MenuEvent;
[Bindable]
private var menu:Menu;
private function initMenu():void {
menu = new Menu();
menu.dataProvider = arr;
}
private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
var obj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomPopUpStyleName");
obj.setStyle("textAlign", evt.label);
popUpButton.open();
}
]]>
</ mx:Script >
< mx:Array id ="arr" >
< mx:Object label ="Button" />
< mx:Object label ="ButtonBar" />
< mx:Object label ="ColorPicker" />
< mx:Object label ="ComboBox" />
</ mx:Array >
< mx:Style >
.myCustomPopUpStyleName {
textAlign: left;
}
</ mx:Style >
< mx:ApplicationControlBar dock ="true" >
< mx:Form styleName ="plain" >
< mx:FormItem label ="textAlign:" >
< mx:ToggleButtonBar id ="toggleButtonBar"
selectedIndex ="0"
itemClick ="toggleButtonBar_itemClick(event);" >
< mx:dataProvider >
< mx:Array >
< mx:Object label ="left" />
< mx:Object label ="center" />
< mx:Object label ="right" />
</ mx:Array >
</ mx:dataProvider >
</ mx:ToggleButtonBar >
</ mx:FormItem >
</ mx:Form >
</ mx:ApplicationControlBar >
< mx:PopUpButton id ="popUpButton"
label ="Select a control"
popUp ="{menu}"
popUpStyleName ="myCustomPopUpStyleName"
preinitialize ="initMenu();" />
</ mx:Application >
本文转自 OldHawk 博客园博客,原文链接:http://www.cnblogs.com/taobataoma/archive/2008/01/20/1045917.html,如需转载请自行联系原作者