Setting the row count on a Spark DropDownList control in Flex 4

5 Responses to Setting the row count on a Spark DropDownList control in Flex 4

1. Peter deHaan says:

   February 5, 2010 at 10:47 am

   And if anybody wants to see the trainwreck of a solution I previously posted…

   <?xml version="1.0" encoding="utf-8"?>
   <!-- http://blog.flexexamples.com/2009/04/05/setting-the-row-count-on-a-dropdownlist-control-in-flex-gumbo/ -->
   <s:Application name="DropDownList_skinClass_requestedRowCount_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:layout>
           <s:BasicLayout />
       </s:layout>
   
       <s:DropDownList id="comboBox"
               skinClass="skins.CustomDropDownListSkin"
               width="100"
               horizontalCenter="0"
               top="20">
           <s:dataProvider>
               <s:ArrayList source="[The,quick,brown,fox,jumps,over,the,lazy,dog]" />
           </s:dataProvider>
       </s:DropDownList>
   
   </s:Application>
   

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

   <?xml version="1.0" encoding="utf-8"?>
   <!-- http://blog.flexexamples.com/2009/04/05/setting-the-row-count-on-a-dropdownlist-control-in-flex-gumbo/ -->
   <s:SparkSkin name="CustomDropDownListSkin"
           xmlns:fx="http://ns.adobe.com/mxml/2009&quot;
           xmlns:s="library://ns.adobe.com/flex/spark">
       <s:states>
           <s:State name="normal" />
           <s:State name="open" />
           <s:State name="disabled" />
       </s:states>
   
       <s:transitions>
           <s:Transition fromState="open" toState="normal">
               <s:Sequence targets="{[popup]}">
                   <s:Fade duration="150"/>
                   <s:SetAction property="open"/>
               </s:Sequence>
           </s:Transition>
       </s:transitions>
   
       <!-- host component -->
       <fx:Metadata>
           [HostComponent("spark.components.DropDownList")]
       </fx:Metadata>
   
       <s:PopUp id="popup" includeIn="open"
               open.normal="false" open.open="true"
               visible.open = "true" visible.normal="false"
               left="0" right="0" top="0" bottom="0"
               placement="below">
           <s:List id="dropDown" skinClass="skins.CustomListSkin" minHeight="22">
               <s:filters>
                   <s:DropShadowFilter blurX="20" blurY="20" distance="5" angle="90" alpha="0.6" />
               </s:filters>
           </s:List>
       </s:PopUp>
   
       <s:Button id="button"
               skinClass="spark.skins.default.DropDownListButtonSkin"
               focusEnabled="false"
               width="100%" height="100%" />
       <s:Group mouseChildren="false" mouseEnabled="false"
               left="5" right="5" top="5" bottom="5">
           <s:SimpleText id="labelElement" />
       </s:Group>
   
   </s:SparkSkin>
   

   And the custom List control skin, skins/CustomListSkin.mxml, is as follows:

   <?xml version="1.0" encoding="utf-8"?>
   <!-- http://blog.flexexamples.com/2009/04/05/setting-the-row-count-on-a-dropdownlist-control-in-flex-gumbo/ -->
   <s:SparkSkin name="CustomListSkin"
           xmlns:fx="http://ns.adobe.com/mxml/2009&quot;
           xmlns:s="library://ns.adobe.com/flex/spark"
           alpha.disabled="0.5">
       <s:states>
           <s:State name="normal" />
           <s:State name="disabled" />
       </s:states>
   
       <fx:Metadata>
           [HostComponent("spark.components.List")]
       </fx:Metadata>
   
       <fx:Script>
           /* Define the skin elements that should not be colorized.
              For list, the skin itself is colorized but the individual parts are not. */
           static private const exclusions:Array = ["scroller", "background"];
           override public function get colorizeExclusions():Array {return exclusions;}
   
           /* 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};
       </fx:Script>
   
       <!-- border -->
       <s:Rect left="0" right="0" top="0" bottom="0">
           <s:stroke>
               <s:SolidColorStroke color="0x686868" weight="1"/>
           </s:stroke>
       </s:Rect>
   
       <!-- fill -->
       <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
           <s:fill>
               <s:SolidColor id="bgFill" color="0xFFFFFF" />
           </s:fill>
       </s:Rect>
   
       <s:Scroller left="1" top="1" right="1" bottom="1" id="scroller">
           <s:DataGroup id="dataGroup" itemRenderer="spark.skins.default.DefaultItemRenderer">
               <s:layout>
                   <s:VerticalLayout gap="0" requestedRowCount="3" horizontalAlign="contentJustify" />
               </s:layout>
           </s:DataGroup>
       </s:Scroller>
   
   </s:SparkSkin>
   

   Reply
2. Peter deHaan says:

   February 5, 2010 at 1:10 pm

   There is a slight “gotcha” when trying to set the requestedRowCount property >=6 . The default Spark DropDownListSkin sets a max height for the dropdown to 134px — which is roughly a requestedRowCount of 6 (unless the drop down menu has a horizontal scroll bar in which case the bottom item renderer is somewhat obscured by the horizontal scroll bar).
   If you want to set the requested row count to higher than 5-6, you need to either create a custom DropDownList skin and remove the specified maxHeight (line 114 — as of 4.0.0.13895) or you can programmatically set the default DropDownListSkin drop down rowHeight property to NaN (Not a Number). For more information see http://bugs.adobe.com/jira/browse/SDK-25364.

   Peter

   Reply
   • gary benade says:

     April 25, 2011 at 2:34 am

     thanks peter, I was pulling my hair out trying to get the thing to grow past 6 items

     Reply
3. laissun says:

   December 23, 2011 at 2:03 am

   if I want to test the rowcount of a spark comboBox ?
   this is for mx combobox :
   if(combobox.rowcount == 1){
   //do something
   }

   Reply
4. rvt says:

   February 2, 2012 at 3:20 pm

   Clearly Adobe made it so much easer with the spark skin… NOT!!!! The original drop down in MX had just rowCount it would have been VERY nice if spark also had a simple row count setting, then life would be good.

   Reply