PopUpAnchor control in Flex 4

本文介绍如何使用 Flex 4 中的 Spark PopUpAnchor 控件来设置弹窗的位置。通过实例展示了如何利用 ButtonBar 和 PopUpPosition 枚举来实现弹窗在不同位置的显示效果。

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_popUpPosition_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="popUpPosition:">
                <s:ButtonBar id="ddl"
                        requireSelection="true"
                        click="ddl_changeHandler(event);"
                        >
                    <s:dataProvider>
                        <s:ArrayList>
                            <s:source>
                                <fx:String>{PopUpPosition.ABOVE}</fx:String>
                                <fx:String>{PopUpPosition.BELOW}</fx:String>
                                <fx:String>{PopUpPosition.CENTER}</fx:String>
                                <fx:String>{PopUpPosition.LEFT}</fx:String>
                                <fx:String>{PopUpPosition.RIGHT}</fx:String>
                                <fx:String>{PopUpPosition.TOP_LEFT}</fx:String>
                            </s:source>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import spark.components.PopUpPosition;
            import spark.events.IndexChangeEvent;
            import spark.events.TitleWindowBoundsEvent;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                popAnc.displayPopUp = true;
            }
 
            protected function ttlWndw_closeHandler(evt:CloseEvent):void {
                popAnc.displayPopUp = false;
            }
 
            protected function ttlWndw_windowMovingHandler(evt:TitleWindowBoundsEvent):void {
                evt.stopImmediatePropagation();
                evt.preventDefault();
            }
 
            protected function ddl_changeHandler(evt:Event):void {
                if (!popAnc.displayPopUp) {
                    popAnc.displayPopUp = true;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:Button id="btn"
                label="Open PopUp"
                chromeColor="haloBlue"
                click="btn_clickHandler(event);" />
        <s:PopUpAnchor id="popAnc"
                popUpPosition="{ddl.selectedItem}"
                width="{btn.width}" height="{btn.height}">
            <s:TitleWindow id="ttlWndw"
                    title="{ddl.selectedItem}"
                    backgroundAlpha="0.3"
                    backgroundColor="black"
                    close="ttlWndw_closeHandler(event);"
                    windowMoving="ttlWndw_windowMovingHandler(event);">
                <mx:Form>
                    <mx:FormItem label="Username:">
                        <s:TextInput />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <s:TextInput displayAsPassword="true" />
                    </mx:FormItem>
                </mx:Form>
            </s:TitleWindow>
        </s:PopUpAnchor>
    </s:Group>
 
</s:Application>


转载:http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值