Flex DropdownList下拉框宽度

有时候在做flex界面开发的时候，组件下拉框文本显示不全，如下所示：

在这种情况下，如果你使用的是DropdownList的话，直接设置width不会生效，这时候，我们可以通过皮肤类来实现，如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-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[
			import mx.events.FlexEvent;
			/* 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;
					}
					if (scroller) {
						scroller.minViewportInset = 0;
					}
				} else {
					if (border) {
						border.visible = true;
					}
					if (background) {
						background.left = background.top = background.right = background.bottom = 1;
					}
					if (scroller) {
						scroller.minViewportInset = 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);
			}
			
			protected function labelDisplay_updateCompleteHandler(evt:FlexEvent):void {
				hostComponent.toolTip = labelDisplay.toolTip;
			}
		]]>
	</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="false">
		
		<!---
		This includes borders, background colors, scrollers, and filters.
		-->
		<s:Group id="dropDown" maxHeight="134" minHeight="22">
			<s:RectangularDropShadow id="dropShadow"
									 blurX="20" blurY="20"
									 alpha="0.45"
									 distance="7"
									 angle="90"
									 color="#000000"
									 left="0" right="0" top="0" bottom="0" />
			
			<s:Rect id="border"
					left="0" right="0" top="0" bottom="0">
				<s: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:Scroller id="scroller"
						left="0" top="0" right="0" bottom="0"
						hasFocusableChildren="false"
						minViewportInset="1">
				<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 default skin is DropDownListButtonSkin. -->
	<s:Button id="openButton"
			  skinClass="spark.skins.spark.DropDownListButtonSkin"
			  focusEnabled="false"
			  left="0" right="0" top="0" bottom="0" />
	
	<s:Label id="labelDisplay"
			 maxDisplayedLines="1"
			 mouseEnabled="false" mouseChildren="false"
			 left="7" right="30" top="2" bottom="2"
			 width="120"
			 verticalAlign="middle"
			 verticalCenter="1"
			 showTruncationTip="true"
			 updateComplete="labelDisplay_updateCompleteHandler(event);" />
	
</s:SparkSkin>

2.然后使用这个皮肤即可

	<s:DropDownList id="concSelecter" labelFunction="commonLabelHandler"  change="concSelecter_changeHandler(event)"
							dataProvider="{concModelLocator.dataModelList}" 
                                                        selectedIndex="{concModelLocator.selectedConcIndex}" 
							styleName="dropDownList" requireSelection="true"
							skinClass="cn.ac.iscas.gz.sems.skin.CustomDropDownListSkin"
							/>

效果如下所示: