increasing the width of dropdownList - apache-flex

Question

I want to adjust the width of DropDownList control in flex 4. I could do it by editing the skinclass and setting the PopupAnchor's Property "popUpWidthMatchesAnchorWidth" to false, but in my application I have to do it using actionscript.

Answer 1

You could set the typicalItem property of the DropDownList to the currently selected item.
From Flex Examples:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/21/resizing-a-spark-dropdownlist-control-to-match-the-currently-selected-item-in-flex-4/ -->
<s:Application name="Spark_DropDownList_typicalItem_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:DropDownList id="cb"
labelField="name"
typicalItem="{cb.selectedItem}"
requireSelection="true"
left="20" top="20">
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Baltimore Orioles" abbr="BAL" />
<fx:Object name="Boston Red Sox" abbr="BOS" />
<fx:Object name="Chicago White Sox" abbr="CWS" />
<fx:Object name="Cleveland Indians" abbr="CLE" />
<fx:Object name="Detroit Tigers" abbr="DET" />
<fx:Object name="Kansas City Royals" abbr="KC" />
<fx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" />
<fx:Object name="Minnesota Twins" abbr="MIN" />
<fx:Object name="New York Yankees" abbr="NYY" />
<fx:Object name="Oakland Athletics" abbr="OAK" />
<fx:Object name="Seattle Mariners" abbr="SEA" />
<fx:Object name="Tampa Bay Devil Rays" abbr="TB" />
<fx:Object name="Texas Rangers" abbr="TEX" />
<fx:Object name="Toronto Blue Jays" abbr="TOR" />
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:Application>

Answer 2

thanks a lot for all responders. here i give the code which is used to clip the width of the dropdown.
package
{
import spark.components.DropDownList;
import mx.controls.Alert;
import spark.components.PopUpAnchor;
import mx.collections.IList;
import spark.components.ComboBox;
public class customDDList extends DropDownList
{
[SkinPart(popUpWidthMatchesAnchorWidth)]
public var popUp:PopUpAnchor ;
public function customDDList():void
{
super();
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (partName == "popUp")
{
instance.popUpWidthMatchesAnchorWidth = false;
}
}
public override function set dataProvider(value:IList):void
{
super.dataProvider = value;
}
}
}

Answer 3

You might as well create another skin for the DropDownList component and set the popUpWidthMatchesAnchorWidth property to false on the PopUpAnchor skin part:
<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" >