Flex中如何给PopUpButton增加子菜单和无效状态菜单选项的例子

By Minidxer | March 11, 2009

接下来的例子演示了Flex中如何给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:XML id="xmlDP">
  19.         <root>
  20.             <node label="The quick brown fox jumped over the lazy dog." />
  21.             <node label="Lorem ipsum (disabled)." enabled="false" />
  22.             <node type="separator" />
  23.             <node label="parent">
  24.                 <node label="child1" />
  25.             </node>
  26.             <node label="parent (disabled)" enabled="false">
  27.                 <node label="child1" />
  28.                 <node label="child2" />
  29.                 <node label="child3" />
  30.             </node>
  31.             <node type="separator" />
  32.             <node label="type=check" id="ch" type="check" toggled="true" />
  33.             <node label="type=check" id="ch" type="check" toggled="true" enabled="false" />
  34.             <node type="separator" />
  35.             <node label="1) type=radio" type="radio" groupName="radioGroup" toggled="true"  />
  36.             <node label="2) type=radio" type="radio" groupName="radioGroup" />
  37.             <node label="3) type=radio" type="radio" groupName="radioGroup" />
  38.             <node label="4) type=radio" type="radio" groupName="radioGroup" enabled="false" />
  39.         </root>
  40.     </mx:XML>
  41.  
  42.     <mx:Script>
  43.         <![CDATA[
  44.             import mx.controls.Menu;
  45.  
  46.             private var menu:Menu;
  47.  
  48.             private function init():void {
  49.                 menu = new Menu();
  50.                 menu.labelField = "@label";
  51.                 menu.dataProvider = xmlDP;
  52.                 menu.showRoot = false;
  53.                 menu.width = popUpButton.width;
  54.                 popUpButton.popUp = menu;
  55.             }
  56.         ]]>
  57.     </mx:Script>
  58.  
  59.     <mx:PopUpButton id="popUpButton"
  60.             label="Please select an item"
  61.             openAlways="true"
  62.             creationComplete="init();" />
  63.  
  64. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts