如何保证popUp始终显示在PopUpButton之上?带有测试用例和截图 [英] How to ensure that the popUp always displays above the PopUpButton? With test case and screenshot

问题描述

我的 Flex 4.6 Web 应用程序的少数用户抱怨说，它右下角的 mx.controls.PopUpButton 有时会打开它下面的一个列表，因此无法使用(我不能自己重现 - 可能是他们的 Flash 播放器和/或字体大小设置的不幸组合?)

Few users of my Flex 4.6 web application are complaining, that the mx.controls.PopUpButton at the right bottom corner of it sometimes opens a List underneath it and is thus unusable (I can't reproduce that myself - probably an unlucky combination of their Flash player and/or font size setting?)

我如何确保 popUp 组件(在我的例子中是 spark.components.List)总是在 PopUpButton 的上方打开?

How could I ensure, that the popUp component (in my case it is a spark.components.List) always opens above the PopUpButton?

我怀疑，我应该基于 mx.skins.halo.PopUpButtonSkin 创建一个皮肤并将其分配给我的 PopUpButton?我可能应该将 PopUpPosition.ABOVE 常量与 PopUpAnchor 一起使用?

I suspect, that I should create a skin based on mx.skins.halo.PopUpButtonSkin and assign it to my PopUpButton? And I probably should use the PopUpPosition.ABOVE constant together with the PopUpAnchor?

但我不知道如何把它放在一起 - 任何人都可以分享一些说明吗?

But I'm not sure how to put it together - can anybody please share some instructions?

我准备了一个屏幕截图和一个简单的 Text.mxml:

I have prepared a screenshot and a simple Text.mxml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    creationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.collections.ArrayCollection;
            import spark.components.List;

            [Bindable]
            private var _data:ArrayCollection = new ArrayCollection();

            [Bindable]
            private var _list:List = new List();

            public function init():void {
                _data.addItem({label: "One"});
                _data.addItem({label: "Tow"});
                _data.addItem({label: "Three"});
                _data.addItem({label: "Four"});
                _data.addItem({label: "Five"});

                _list.dataProvider = _data;
                _list.setStyle('fontSize', 36);
            }
        ]]>
    </fx:Script>

    <mx:PopUpButton right="10" bottom="10" fontSize="24" popUp="{_list}"/>
</s:Application>

更新:

我找到了 Simon Bailey 的解决方案 MX ComboBox 打开方向错误 - 替代解决方案 并且它有点工作，但不幸的是阻止我在单击主(而不是箭头)按钮时调度我的自定义事件.

I've found a solution by Simon Bailey MX ComboBox Open Direction Bug - Alternative Solution and it kind of works, but unfortunately prevents me from dispatching my custom event when the main (not the arrow) button is clicked.

我也看过PopUpButton.as 源代码 并想知道在那里检查 List 的高度是否为 0:

Also I've looked at the PopUpButton.as source code and wonder if maybe the height of the List is 0 while it is being checked there:

private function displayPopUp(show:Boolean):void
{
    ......
    // XXX I suspect the _popUp.height below is 0
    // XXX for the users having the trouble

    if (show)
    {          
       if (point.y + _popUp.height > screen.bottom && 
            point.y > (screen.top + height + _popUp.height))
        { 
            // PopUp will go below the bottom of the stage
            // and be clipped. Instead, have it grow up.
            point.y -= (unscaledHeight + _popUp.height + 2*popUpGap);
            initY = -_popUp.height;
        }

我仍然无法自己重现错误，我的用户不是很有帮助(主要是老年人，玩 我的纸牌游戏).我在 Adob​​e JIRA 中搜索了 ，但找不到这样的错误.

I still can't reproduce the bug myself, my users aren't very helpful (mostly older folks, playing my card game). I've searched in Adobe JIRA, but couldn't find such a bug.

我想知道是否有一种方法可以使该方法短路以强制打开 PopUpButton 上方的弹出窗口.

I wonder, if there is a way to short-circuit that method to enforce opening the popUp above the PopUpButton.

或者如果我应该将 _list 放入某个容器中...

Or if I should put the _list into some container...

推荐答案

PopUpButton 不使用 PopUpAnchor.它在名为 displayPopUp() 的私有函数内部设置弹出窗口的位置.

PopUpButton doesn't use a PopUpAnchor. It sets the position of the pop-up internally in the private function named displayPopUp().

为什么不改用 Spark DropDownList?这不是您在此处有效创建的内容吗?

Why not use the Spark DropDownList instead? Isn't that what you've effectively created here?

这篇关于如何保证popUp始终显示在PopUpButton之上?带有测试用例和截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！