PopUpMenuButton控件
时间：2010-08-24 来源：luochaoboy
1 PopUpMenuButton控件
PopUpMenuButton 控件可创建一个 PopUpButton 控件，带有一个主子按钮和一个辅助子按钮。单击辅助（右）子按钮会下拉一个菜单。
UIComponent->Button->PopUpButton 弹出一个菜单
UIComponent->Button->PopUpButton->PopUpMenuButton 数据源自动转成一个菜单
此控件目前只存在于mx命名空间中
与 Menu 和 MenuBar 控件不同，PopUpMenuButton 控件仅支持单级菜单。这就意味着此菜单不能包含子菜单
参考文献：[1].Adobe官方文档 http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/PopUpMenuButton.html
2 PopUpMenuButton控件常用属性和方法
|
名称 |
分类 |
说明 |
|
dataProvider |
属性 |
popUpMenu 的数据源。（示例3.1） |
|
iconField:String |
属性 |
dataProvider Array 中的字段名称，该字段中包含要为每个菜单项显示的图标。（示例3.2） |
|
labelField:String |
属性 |
dataProvider Array 中的字段名称，该字段包含要为每个菜单项显示的文本。labelFunction 属性（如果已设置）将覆盖此属性。如果数据提供程序是一个字符串 Array，则 Flex 会将每个 String 值用作标签。（示例3.1） |
|
labelFunction：function |
属性 |
一个用于确定要为每个菜单项显示文本的函数。如果省略此属性，则 Flex 将使用由 labelField 属性确定的字段内容或属性。如果指定了此属性，则 Flex 将忽略任何 labelField 属性值。（示例3.3） |
|
iconFunction:function |
属性 |
一个用于确定要为每个菜单项显示图标的函数。如果省略此属性，则 Flex 将使用由 iconField 属性确定的字段内容或属性。如果指定了此属性，则 Flex 将忽略任何 iconField 属性值。 默认情况下，该菜单不会尝试将图标与行中的文本一起显示。但是，可以通过指定图标函数来为图形指定一个类，将其作为图标创建并显示在行中。 iconFunction 仅采用数据提供程序中的某个项目作为唯一参数，并返回一个类，默认为Null（待研究） |
|
ShowRoot |
属性 |
指定是显示数据提供程序的一个还是多个顶级节点。如果此属性设置为 false，则该控件将只显示第一个顶级节点的子级节点。其他任何顶级节点都将被忽略。通常，对于顶级节点是文档对象的 E4X 格式的 XML 数据提供程序，需要将此属性设置为 false。 默认值为 true。（多用于使用xml做数据源时） |
|
itemClick |
事件 |
当用户从弹出菜单中选择项目时分派。（示例3.5） |
3 PopUpMenuButton常见属性与事件的用法
3.1 dataProvider属性的用法
功能：当用户点击PopUpMenuButton控件上的子按钮时，下拉菜单显示LableField属性的值
数据源代码：
import mx.collections.ArrayCollection;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection(
[ {product:"Flex", price:100},
{product:"Air", price:200},
{product:"Catalyst", price:300},
{product:"FlashBuilder", price:400} ]);
主程序代码：
<mx:PopUpMenuButton x="187" y="128" label="dataProvider示例" id="pm" dataProvider="{myDP}" labelField="product"/>
代码详见dataProvider.mxml
3.2 iconField属性的用法
说明：iconField是dataProvider Array 中的字段名称，该字段中包含要为每个菜单项显示的图标。
主程序代码：
<mx:PopUpMenuButton x="240" y="151" dataProvider="{myDP}" iconField="icon" labelField="book" />
在使用iconField属性时要注意图片数据的绑定方法
代码：
import mx.collections.ArrayCollection;
[Bindable]
[Embed(source="res/16.png")]
public var c1:Class;
[Bindable]
[Embed(source="res/17.png")]
public var c2:Class;
[Bindable]
[Embed(source="res/18.png")]
public var c3:Class;
[Bindable]
[Embed(source="res/19.png")]
public var c4:Class;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection(
[ {book:"A",icon:"c1"},
{book:"B",icon:"c2"},
{book:"C",icon:"c3"},
{book:"D",icon:"c4"} ]);
用[Embed]元数据（Metadata）标签嵌入一个图片到一个变量中。这样做的好处是可以多次引用已经嵌入的图片。
代码详见 iconField.mxml
3.3 lableField属性的用法
说明：一个用于确定要为每个菜单项显示文本的函数。如果省略此属性，则 Flex 将使用由 labelField 属性确定的字段内容或属性。如果指定了此属性，则 Flex 将忽略任何 labelField 属性值。 如果指定此属性，则标签函数必须查找一个或多个合适的字段并返回可显示的字符串。labelFunction 属性非常适用于处理格式设置和本地化。标签函数必须使用 dataProvider 中的项目作为唯一的自变量，并返回一个字符串，如以下示例所示：
labelFunction(item:Object):String
代码： import mx.collections.ArrayCollection;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection(
[ {product:"Flex", price:100},
{product:"Air", price:200},
{product:"Catalyst", price:300},
{product:"FlashBuilder", price:400} ]);
private function dp(data:Object):String
{
return "数组长度是"+myDP.length.toString();
}
代码详见 labelFunction.mxml
3.4 itemClick事件
功能：使用itemClick事件在弹出窗口中显示用户选择的数据项
As3.0代码：
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.MenuEvent;
public function itemClickHandler(evt:MenuEvent):void {
Alert.show("书名是: " + evt.label);
}
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection(
[ {product:"Flex", price:100},
{product:"Air", price:200},
{product:"Catalyst", price:300},
{product:"FlashBuilder", price:400} ]);
Mxmxl代码：
<mx:PopUpMenuButton id="p2" dataProvider="{myDP}" labelField="product"
itemClick="itemClickHandler(event);"/>
|
代码详见 itemClick.mxml
相关阅读 更多 +
