The following example shows how you can set the pop up placement on a Flex 4 Spark DropDownList by creating a custom skin and setting the placement property.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/16/setting-the-pop-up-placement-on-a-spark-dropdownlist-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_PopUp_placement_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:DropDownList id="dropDownList" labelField="label" requireSelection="true" skinClass="skins.CustomDropDownListSkin" horizontalCenter="0" top="20"> <s:dataProvider> <s:ArrayList> <fx:Object label="The" /> <fx:Object label="Quick" /> <fx:Object label="Brown" /> <fx:Object label="Fox" /> <fx:Object label="Jumps" /> <fx:Object label="Over" /> <fx:Object label="The" /> <fx:Object label="Lazy" /> <fx:Object label="Dog" /> </s:ArrayList> </s:dataProvider> </s:DropDownList> </s:Application>
The custom skin class, skins/CustomDropDownListSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/16/setting-the-pop-up-placement-on-a-spark-dropdownlist-in-flex-gumbo/ --> <s:Skin name="CustomDropDownListSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 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> <!--- The PopUpAnchor control that opens the drop-down list. --> <s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open" left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto" popUpPosition="left" popUpWidthMatchesAnchorWidth="true"> <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. --> <s:Group id="dropDown" maxHeight="134" minHeight="22" > <!-- drop shadow --> <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> <!-- border --> <s:Rect left="0" right="0" top="0" bottom="0"> <s:stroke> <s:SolidColorStroke color="0x686868" 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:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1"> <!--- The container for the data items in the drop-down list. --> <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer"> <s:layout> <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/> </s:layout> </s:DataGroup> </s:Scroller> </s:Group> </s:PopUpAnchor> <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. --> <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" skinClass="spark.skins.spark.DropDownListButtonSkin" /> <!--- The prompt area of the DropDownList. --> <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" left="7" right="30" top="2" bottom="2" verticalCenter="1" /> </s:Skin>
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.

{ 3 comments… read them below or add one }
Couple of issues with the code :
color=”0×686868″
should be
color=”0×686868″
and the comments in the
CustomDropDownListSkin.mxml should be <!– and –>
lol I see what you mean about the blog being terrible with html tags now .. :)
featured in the code was renamed to component starting from Flex 4 SDK 4.0.0.9948 build
More details at code author’s blog:
http://blogs.adobe.com/pdehaan/2009/09/spark_primitive_text_changes_f.html