Flex Gumbo中如何通过skinClass样式和requestedRowCount属性设置DropDownList行数的例子

By Minidxer | August 5, 2009

接下来的Flex Gumbo中如何通过skinClass样式自定义DropDownList皮肤和通过requestedRowCount属性设置下拉行数。

下面是main.mxml：

下面是CustomDropDownListSkin.mxml的代码：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomDropDownListSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
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>
<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>

以及皮肤文件CustomListSkin.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomListSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
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>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0x686868" weight="1"/>
</s:stroke>
</s:Rect>
<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>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DropDownList, Gumbo | No Comments » | Tags: Gumbo, requestedRowCount, skinClass

中文Flex例子