云飞扬的ITblog

flex 3 PopUpButton按钮的使用
这个按钮组成：左边一个按钮+右边一个下拉三角形，相当于c#dropdownlist，
不同是，当选择好下拉项后，还要点击左边的按钮才能执行相应的事件
初始化定义如下：
 private function initPopupMenu():void
            {
                popupMenu = new Menu();//定义一个popupMenu菜单
                var dp:Object = [{label: "Reverse"},
                  {label: "To Upper Case"},
                  {label: "To Lower Case"}];
                popupMenu.dataProvider = dp;//绑定数据源
                popupMenu.selectedIndex = 0;//选第一个数      
                popupMenu.addEventListener("itemClick",
                  itemClickHandler);//增加改变项时事件
                stringOpBtn.popUp = popupMenu;//把定义的菜单赋给PopUpButton
                stringOpBtn.label
                  = popupMenu.dataProvider[popupMenu.selectedIndex].label;//PopUpButton值赋值
            }
           

完整的例子：
<?xml version="1.0" encoding="utf-8"?>

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL=""
    horizontalAlign="center" verticalAlign="middle"
    width="100%" height="100%"
>

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;
            import mx.events.MenuEvent;

            private var popupMenu:Menu;
            private var currentClkItem:int;

            private function initPopupMenu():void
            {
                popupMenu = new Menu();//定义一个popupMenu菜单
                var dp:Object = [{label: "Reverse"},
                  {label: "To Upper Case"},
                  {label: "To Lower Case"}];
                popupMenu.dataProvider = dp;//绑定数据源
                popupMenu.selectedIndex = 0;//选第一个数      
                popupMenu.addEventListener("itemClick",
                  itemClickHandler);//增加改变项时事件
                stringOpBtn.popUp = popupMenu;//把定义的菜单赋给PopUpButton
                stringOpBtn.label
                  = popupMenu.dataProvider[popupMenu.selectedIndex].label;//PopUpButton值赋值
            }
           
            private function itemClickHandler(event:MenuEvent):void
            {
                var label:String = event.item.label;
                stringOpBtn.label = label;
                stringOpBtn.close();
                currentClkItem = event.index;
            }
           
            private function reverseStrVal(str:String):String
            {
                var strLen:int = str.length;
                strLen -= 1;
                var i:int = strLen;
                var retStrVal:String = "";
                for (; i>= 0; i--)
                {
                    retStrVal = retStrVal.concat(str.charAt(i));
                }
                return retStrVal;
            }
           
            private function doStringOperation():void
            {
                var tempStr:String = origStrVal.text;
                if (tempStr == null || tempStr.length == 0)
                {
                    return;
                }
               
                switch(currentClkItem)
                {
                case 0:
                    newStrVal.text = reverseStrVal(tempStr);
                    break
                case 1:
                    newStrVal.text = tempStr.toUpperCase();
                    break
                case 2:
                    newStrVal.text = tempStr.toLowerCase();
                    break
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel title="String Operations"
        height="75%" width="75%"
        paddingTop="10"
        paddingLeft="10"
        paddingRight="10"
        paddingBottom="10"
    >
        <mx:VBox width="100%" height= "80%">
            <mx:Label text="Input Original Value"/>
            <mx:TextInput width="100%"
              id="origStrVal"/>
            <mx:Label text="Display Transformed Value"/>
            <mx:TextInput width="100%"
              id="newStrVal"/>
        </mx:VBox>
       
        <mx:HBox width="100%" height= "20%">
            <mx:PopUpButton id="stringOpBtn"
              label="Do String Operation"
              creationComplete="initPopupMenu();" width="135"
              click="doStringOperation();" />
        </mx:HBox>
    </mx:Panel>

</mx:Application>

原创文章转载请注明出处：云飞扬IT的blog

本文链接: http://www.ajaxcn.net/archives/194