Flex中如何通过监听open和close事件监测PopUpButton下拉菜单打开/关闭状态的例子

By Minidxer | April 8, 2009

接下来的例子演示了Flex中如何通过监听open和close事件，监测PopUpButton下拉菜单打开/关闭状态。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         PopUpButton {
  9.             popUpStyleName: myCustomPopUpStyleName;
  10.         }
  11.  
  12.         .myCustomPopUpStyleName {
  13.            fontWeight: normal;
  14.            textAlign: left;
  15.         }
  16.     </mx:Style>
  17.  
  18.     <mx:Script>
  19.         <![CDATA[
  20.             import mx.events.ListEvent;
  21.             import mx.controls.Menu;
  22.             import mx.controls.Alert;
  23.             import mx.events.DropdownEvent;
  24.             import mx.utils.ObjectUtil;
  25.  
  26.             [Bindable]
  27.             private var menu:Menu;
  28.  
  29.             private function init():void {
  30.                 menu = new Menu();
  31.                 menu.dataProvider = arr;
  32.             }
  33.  
  34.             private function popUpButton_open(evt:DropdownEvent):void {
  35.                 arrColl.addItem(evt);
  36.             }
  37.  
  38.             private function popUpButton_close(evt:DropdownEvent):void {
  39.                 arrColl.addItem(evt);
  40.             }
  41.  
  42.             private function dataGrid_itemClick(evt:ListEvent):void {
  43.                 var obj:DropdownEvent = evt.currentTarget.selectedItem;
  44.                 var str:String = "(empty string)";
  45.                 if (obj.triggerEvent) {
  46.                     str = obj.triggerEvent.toString();
  47.                 }
  48.                 Alert.show(str, "triggerEvent:");
  49.             }
  50.         ]]>
  51.     </mx:Script>
  52.  
  53.     <mx:Array id="arr">
  54.         <mx:Object label="Button" />
  55.         <mx:Object label="ButtonBar" />
  56.         <mx:Object label="ColorPicker" />
  57.         <mx:Object label="ComboBox" />
  58.     </mx:Array>
  59.  
  60.     <mx:ArrayCollection id="arrColl" />
  61.  
  62.     <mx:ApplicationControlBar dock="true">
  63.         <mx:PopUpButton id="popUpButton"
  64.                 label="Select a control..."
  65.                 popUp="{menu}"
  66.                 initialize="init();"
  67.                 open="popUpButton_open(event);"
  68.                 close="popUpButton_close(event);" />
  69.     </mx:ApplicationControlBar>
  70.  
  71.     <mx:DataGrid id="dataGrid"
  72.             dataProvider="{arrColl}"
  73.             variableRowHeight="true"
  74.             width="100%"
  75.             height="100%"
  76.             itemClick="dataGrid_itemClick(event);">
  77.         <mx:columns>
  78.             <mx:DataGridColumn dataField="type"
  79.                     width="100" />
  80.             <mx:DataGridColumn dataField="triggerEvent"
  81.                     itemRenderer="mx.controls.Label"
  82.                     wordWrap="true" />
  83.         </mx:columns>
  84.     </mx:DataGrid>
  85.  
  86. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: PopUpButton | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll