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

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

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