Flex中如何创建一个可以弹出DataGrid作为菜单的PopUpButton的例子

By Minidxer | March 18, 2009

接下来的例子演示了Flex中如何创建一个可以弹出DataGrid作为菜单的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="top"
  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:Array id="arr">
  19.         <mx:Object label="Alert" packageName="mx.controls" />
  20.         <mx:Object label="Button" packageName="mx.controls" />
  21.         <mx:Object label="ButtonBar" packageName="mx.controls" />
  22.         <mx:Object label="CheckBox" packageName="mx.controls" />
  23.         <mx:Object label="ColorPicker" packageName="mx.controls" />
  24.     </mx:Array>
  25.  
  26.     <mx:PopUpButton id="popUpButton"
  27.             label="Click to open..."
  28.             openAlways="true">
  29.         <mx:popUp>
  30.             <mx:DataGrid dataProvider="{arr}"
  31.                     draggableColumns="false"
  32.                     rowCount="4"
  33.                     width="300">
  34.                 <mx:columns>
  35.                     <mx:DataGridColumn dataField="label"
  36.                             headerText="Label:" />
  37.                     <mx:DataGridColumn dataField="packageName"
  38.                             headerText="Package name:" />
  39.                 </mx:columns>
  40.             </mx:DataGrid>
  41.         </mx:popUp>
  42.     </mx:PopUpButton>
  43.  
  44. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: PopUpButton | No Comments » | 1,159 views Tags: , ,

Search Posts