Flex - Comment changer la hauteur DropDownList ouverte

Question

Utilisation FB4, je veux changer la hauteur d'une DropDownList étincelle ouverte. Par défaut, il affiche jusqu'à 6 points avant que le défilement. Mon dropdownlist contient 7 articles, donc je veux changer la hauteur de la liste déroulante ouverte pour adapter l'ensemble des 7 articles sans défilement. Pour contourner ce problème, j'ai changé la taille de la police des éléments afin qu'ils soient plus petits et les 7 forme, mais la plus petite police ne semble pas bon. Est-il possible de changer cette hauteur? Je suis assez nouveau Flash, donc si elle est une solution complexe, s'il vous plaît être détaillée: -.)

Answer 1

La question est, dans Flex 4, le DropDownListSkin a défini maxHeight="134" pour la peau par défaut que vous utilisez probablement. Cela force la barre de défilement apparaître si les objets vont au-delà de cette hauteur. Tout ce que vous devez faire est de copier / coller leur code DropDownListSkin dans une peau personnalisée et l'appliquer à votre DropDownList via CSS:

VariableHeightDropDownListSkin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled=".5"> 

    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>

    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
        popUpPosition="below" popUpWidthMatchesAnchorWidth="true">

        <!-- removed maxHeight! -->
        <s:Group id="dropDown" minHeight="22">
            <!-- border/fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x5380D0" />
                </s:stroke>
                <s:fill>
                    <s:SolidColor color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>

            <s:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="7" angle="90" alpha="0.45" color="0x6087CC" />
            </s:filters>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.spark.DropDownListButtonSkin" />
    <s:Label id="labelDisplay" verticalAlign="middle" lineBreak="explicit"
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:Skin>

Exemple d'application

<?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">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|DropDownList
        {
            skinClass: ClassReference("VariableHeightDropDownListSkin");
        }
    </fx:Style>

        <s:DropDownList labelField="name" horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout requestedRowCount="7"/>
            </s:layout>
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object name="one"/>
                    <fx:Object name="two"/>
                    <fx:Object name="three"/>
                    <fx:Object name="four"/>
                    <fx:Object name="five"/>
                    <fx:Object name="six"/>
                    <fx:Object name="seven"/>
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:DropDownList>

</s:Application>

Faites-moi savoir si cela aide, Lance

Answer 2

est-il pas plus facile si vous utilisez la requestedRowCount propriété du VerticalLayout?

<s:DropDownList dataProvider="{myDataProvider}">
    <s:layout>
        <s:VerticalLayout requestedRowCount="10"/>
    </s:layout>
</s:DropDownList>

Answer 3

viatropos réponse fonctionnera, mais vous devriez essayer d'éviter de forcer une peau entière, autant que possible.

Dans ce cas, vous remarquerez que dans le code de VariableHeightDropDownListSkin viatropos que le groupe où il a supprimé l'attribut maxHeight, il y a aussi un « id » spécifié.

Maintenant, regardez la documentation DropDownList et vous remarquerez dans la section SkinParts qu'il ya une partie de la peau « dropDown ». Ceci est en fait une propriété de DropDownList.

Ainsi, au lieu de passer outre la peau, vous pouvez simplement utiliser actionscript (j'utilise UIComponent.DEFAULT_MAX_HEIGHT ici, mais vous pouvez utiliser selon vous le souhaitez):

(MyDropDownList.dropDown as UIComponent).maxHeight = UIComponent.DEFAULT_MAX_HEIGHT;

Answer 4

Malheureusement, cela est beaucoup plus compliqué dans Flex 4 qu'il était en Flex 3:

Vous devriez être en mesure de définir une mise en page pour la DropDownList avec un requestedRowCount plus élevé ( détails ), mais pour> 6 lignes que vous devez faire plus de travail ( Flex SDK problème-25364 ).

Answer 5

FB3 il est rowCount faire le menu déroulant est un descendant d'un contrôle de liste. FB4 est probablement similaire.

myDropdown.rowCount = 7;

Je l'habitude d'utiliser quelque chose comme

myDropdown.rowCount = myDataProvider.lenght();