Comment faire en sorte que la popUp s'affiche toujours au-dessus du PopUpButton ? Avec un scénario de test et une capture d'écran

Question

Quelques utilisateurs de mon application web Flex 4.6 se plaignent que le bouton mx.controls.PopUpButton situé dans le coin inférieur droit de l'application ouvre parfois une liste. en dessous de et est donc inutilisable (je ne peux pas le reproduire moi-même - probablement une combinaison malchanceuse de leur lecteur Flash et/ou du réglage de la taille de la police ?)

Comment puis-je m'assurer que le composant popUp (dans mon cas, il s'agit d'une liste spark.components.List) s'ouvre toujours ? au-dessus de le PopUpButton ?

Je pense que je devrais créer un skin basé sur mx.skins.halo.PopUpButtonSkin et l'affecter à mon PopUpButton ? Et je devrais probablement utiliser la constante PopUpPosition.ABOVE avec le PopUpAnchor ?

Mais je ne sais pas comment l'assembler. Quelqu'un peut-il me donner des instructions ?

J'ai préparé une capture d'écran et un 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>

UPDATE :

J'ai trouvé une solution par Simon Bailey Bug du sens d'ouverture de la ComboBox MX - Solution alternative et cela fonctionne à peu près, mais malheureusement, cela m'empêche de dispatcher mon événement personnalisé lorsque le bouton principal (et non la flèche) est cliqué.

J'ai aussi regardé le code source de PopUpButton.as et je me demande si la hauteur de la liste n'est pas égale à 0 pendant qu'elle est vérifiée :

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;
        }

Je n'arrive toujours pas à reproduire le bogue moi-même, mes utilisateurs ne sont pas très serviables (surtout des personnes âgées, qui jouent mon jeu de cartes ). J'ai cherché dans Adobe JIRA mais je n'ai pas pu trouver un tel bogue.

Je me demande s'il n'y a pas un moyen de court-circuiter cette méthode pour imposer l'ouverture de la popUp au-dessus du PopUpButton.

Ou si je dois mettre la _liste dans un conteneur...

Answer 1

PopUpButton n'utilise pas de PopUpAnchor . Il définit la position de la fenêtre pop-up en interne dans la fonction privée nommée displayPopUp() .

Pourquoi ne pas utiliser le Spark DropDownList à la place ? N'est-ce pas ce que vous avez effectivement créé ici ?