Displaying all items in a Spark DropDownList control drop down menu in Flex 4

The following example shows how you can display all items in a Spark DropDownList control’s drop down menu in Flex 4 by creating a custom DropDownList skin and removing the Scroller skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

Thanks to Andriy Panas for the no Scroller suggestion in http://bugs.adobe.com/jira/browse/SDK-22614.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/ -->
<s:Application name="Spark_DropDownList_noScroller_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"
        creationComplete="numSteppr_changeHandler(event);">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="Number of items:">
                <s:NumericStepper id="numSteppr"
                        minimum="1" maximum="12"
                        value="2"
                        change="numSteppr_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import skins.CustomDropDownListSkin;
 
            [Bindable]
            protected var arrList:ArrayList = new ArrayList();
 
            protected function numSteppr_changeHandler(evt:Event):void {
                var arr:Array = [];
                var idx:uint;
                var len:uint = numSteppr.value;
                for (idx=0; idx<len; idx++) {
                    arr.push({label:"Item " + idx});
                }
                arrList.source = arr;
 
                ddl1.openDropDown();
                ddl2.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:HGroup verticalAlign="middle">
        <s:Label text="Default skin:" />
        <s:DropDownList id="ddl1"
                dataProvider="{arrList}"
                requireSelection="true" />
 
        <s:Label text="Custom skin:" />
        <s:DropDownList id="ddl2"
                dataProvider="{arrList}"
                requireSelection="true"
                skinClass="skins.CustomDropDownListSkin" />
    </s:HGroup>
 
</s:Application>

The custom Spark DropDownList control skin, skins/CustomDropDownListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/ -->
<s:SparkSkin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.DropDownList")]
        ]]>
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {
                return contentFill
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == false) {
                    if (border) {
                        border.visible = false;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 0;
                    }
                } else {
                    if (border) {
                        border.visible = true;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 1;
                    }
                }
 
                if (dropShadow) {
                    dropShadow.visible = getStyle("dropShadowVisible");
                }
                openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
 
                if (borderStroke) {
                    borderStroke.color = getStyle("borderColor");
                    borderStroke.alpha = getStyle("borderAlpha");
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!---
    The PopUpAnchor control that opens the drop-down list.
 
    <p>In a custom skin class that uses transitions, set the
    <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <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">
        <!--- This includes borders, background colors, scrollers, and filters. -->
        <s:Group id="dropDown" minHeight="22" >
            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
                    angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
 
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <!--- border stroke -->
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>
 
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!---
                    The color of the drop down's background fill.
                    The default color is 0xFFFFFF.
                    -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
 
            <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer" left="1" right="1" top="1" bottom="1">
                <s:layout>
                    <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                </s:layout>
            </s:DataGroup>
        </s:Group>
    </s:PopUpAnchor>
 
    <!---  The default skin is DropDownListButtonSkin. -->
    <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" maxDisplayedLines="1"
            mouseEnabled="false" mouseChildren="false"
            left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
 
</s:SparkSkin>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.