在mx的列表组件中,可以通过设置rowCount,但是到了spark中缺“丢失”该属性,看过Commbox的skin类之后,才知道rowCount其实layout中设置的。
<!--- @private --> <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1"> <!--- @copy spark.components.SkinnableDataContainer#dataGroup--> <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer"> <s:layout> <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/> </s:layout> </s:DataGroup> </s:Scroller>
从上面的代码也以看出,最大的rowCont是6,这就意味着如果列表组件的数据源长度大于6将会出现垂直滚动条。
有了上面的代码,我们可以对ComboBox或DropDownList组件设置布局layout,在layout中设置requestedRowCount就可以了。
<s:DropDownList > <s:layout> <s:VerticalLayout requestedRowCount="10"/> </s:layout> <s:dataProvider> <s:ArrayList> <fx:Object label="AIR" icon="{imgCls}"/> <fx:Object label="ColdFusion" icon="{imgCls2}"/> <fx:Object label="Dreamweaver" icon="{imgCls}"/> <fx:Object label="Flash" icon="{imgCls2}"/> <fx:Object label="Flex" icon="{imgCls}"/> <fx:Object label="Photoshop2" icon="{imgCls2}"/> <fx:Object label="AIR2" icon="{imgCls}"/> <fx:Object label="ColdFusion2" icon="{imgCls2}"/> <fx:Object label="Dreamweaver2" icon="{imgCls}"/> <fx:Object label="Flash2" icon="{imgCls2}"/> <fx:Object label="Flex2" icon="{imgCls}"/> <fx:Object label="Photoshop2" icon="{imgCls2}"/> </s:ArrayList> </s:dataProvider> </s:DropDownList> <s:ComboBox > <s:layout> <s:VerticalLayout requestedRowCount="10"/> </s:layout> <s:dataProvider> <s:ArrayList> <fx:Object label="AIR" icon="{imgCls}"/> <fx:Object label="ColdFusion" icon="{imgCls2}"/> <fx:Object label="Dreamweaver" icon="{imgCls}"/> <fx:Object label="Flash" icon="{imgCls2}"/> <fx:Object label="Flex" icon="{imgCls}"/> <fx:Object label="Photoshop2" icon="{imgCls2}"/> <fx:Object label="AIR2" icon="{imgCls}"/> <fx:Object label="ColdFusion2" icon="{imgCls2}"/> <fx:Object label="Dreamweaver2" icon="{imgCls}"/> <fx:Object label="Flash2" icon="{imgCls2}"/> <fx:Object label="Flex2" icon="{imgCls}"/> <fx:Object label="Photoshop2" icon="{imgCls2}"/> </s:ArrayList> </s:dataProvider> </s:ComboBox>