Jun 27

Flex中利用labelPlacementChanged事件检测按钮(Buttoon)中标签(Label)位置是否改变的例子

FlexAdd comments

在前面的Flex中利用labelPlacement属性在按钮控件(Button)中设置一个图标(icon)在按钮中的位置的例子中，我们了解了如何利用labelPlacement属性在按钮控件中设置标签的位置，接下来的例子则演示了Flex中利用labelPlacementChanged事件，检测按钮(Buttoon)中标签(Label)位置是否改变。

让我们先来看一下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.         initialize="init();" viewSourceURL="srcview/index.html">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Alert;
  11.             import mx.events.ListEvent;
  12.  
  13.             [Bindable]
  14.             [Embed("assets/flex_logo.jpg")]
  15.             private var flex_icon:Class;
  16.  
  17.             private function init():void {
  18.                 btn.addEventListener("labelPlacementChanged", btn_labelPlacementChanged);
  19.             }
  20.  
  21.             private function comboBox_change(evt:ListEvent):void {
  22.                 var obj:Object = ComboBox(evt.currentTarget).selectedItem;
  23.                 btn.labelPlacement = obj.label;
  24.             }
  25.  
  26.             private function btn_labelPlacementChanged(evt:Event):void {
  27.                 Alert.show(evt.toString(), evt.type);
  28.             }
  29.         ]]>
  30.     </mx:Script>
  31.  
  32.     <mx:ApplicationControlBar dock="true">
  33.         <mx:Form styleName="plain">
  34.             <mx:FormItem label="labelPlacement:">
  35.                 <mx:ComboBox id="comboBox"
  36.                         selectedIndex="1"
  37.                         change="comboBox_change(event);">
  38.                     <mx:dataProvider>
  39.                         <mx:Array>
  40.                             <mx:Object label="left" />
  41.                             <mx:Object label="right" />
  42.                             <mx:Object label="top" />
  43.                             <mx:Object label="bottom" />
  44.                         </mx:Array>
  45.                     </mx:dataProvider>
  46.                 </mx:ComboBox>
  47.             </mx:FormItem>
  48.         </mx:Form>
  49.     </mx:ApplicationControlBar>
  50.  
  51.     <mx:Button id="btn"
  52.             label="Button"
  53.             icon="{flex_icon}"
  54.             width="200"
  55.             height="100" />
  56.  
  57. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex中利用labelPlacementChanged事件检测按钮(Buttoon)中标签(Label)位置是否改变的例子”

Trackbacks

Leave a Reply