[Flex] PopUpButton系列 —— 判断下拉列表是否选中

<?xml version="1.0" encoding="utf-8"?>
<!--Flex中如何利用dataDescriptor属性和isToggled()函数判断PopUpButton的下拉选项是否选中的例子PopUpButtonSelectableOptions.mxml-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Menu;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;
            private var _menu:Menu;
            
            protected function popUpButton_initializeHandler(event:FlexEvent):void
            {
                _menu = new Menu();
                _menu.variableRowHeight = true;
                _menu.dataProvider = arr;
                _menu.addEventListener(MenuEvent.CHANGE,onMenuChange);
                popUpButton.popUp = _menu;
            }
            
            
            protected function onMenuChange(event:MenuEvent):void
            {
                switch(_menu.dataDescriptor.getType(event.item)){
                    case "check":
                        if(_menu.dataDescriptor.isToggled(event.item)){
                            this.styleName = "redModal";
                            Alert.show("\""+event.item.label+"\"was checked");
                        }else{
                            Alert.show("\""+event.item.label+"\"was not checked");
                            this.styleName = "greenModal";
                        }
                        break;
                }
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素(例如服务、值对象)放在此处 -->
        <fx:Array id="arr">
            <fx:Object label="Option 1" type="check" toggled="true" />
            <fx:Object label="Option 2" type="check" toggled="true" />
        </fx:Array>
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|PopUpButton {
            popUpStyleName: MyCustomPopUpStyleName;
        }
        
        .MyCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }
        
        .redModal {
            modalTransparencyColor: red;
            modalTransparency: 0.8;
        }
        
        .greenModal {
            modalTransparencyColor: haloGreen;
            modalTransparency: 0.8;
        }

    </fx:Style>
    <mx:PopUpButton id="popUpButton" label="Click to open..." openAlways="true" initialize="popUpButton_initializeHandler(event)" />
</s:Application>

 

posted on 2016-02-17 15:17  晏过留痕  阅读(285)  评论(0编辑  收藏  举报