The following example shows how you can create a variable row height item renderer on a Flex ComboBox control by setting the variableRowHeight property on the ComboBox control’s dropdown property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/04/creating-a-variable-row-height-item-renderer-on-a-combobox-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.DropdownEvent; private function comboBox_open(evt:DropdownEvent):void { evt.currentTarget.dropdown.variableRowHeight = true; } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object name="Baltimore Orioles" abbr="BAL" /> <mx:Object name="Boston Red Sox" abbr="BOS" /> <mx:Object name="Chicago White Sox" abbr="CWS" /> <mx:Object name="Cleveland Indians" abbr="CLE" /> <mx:Object name="Detroit Tigers" abbr="DET" /> <mx:Object name="Kansas City Royals" abbr="KC" /> <mx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" /> <mx:Object name="Minnesota Twins" abbr="MIN" /> <mx:Object name="New York Yankees" abbr="NYY" /> <mx:Object name="Oakland Athletics" abbr="OAK" /> <mx:Object name="Seattle Mariners" abbr="SEA" /> <mx:Object name="Tampa Bay Devil Rays" abbr="TB" /> <mx:Object name="Texas Rangers" abbr="TEX" /> <mx:Object name="Toronto Blue Jays" abbr="TOR" /> </mx:Array> <mx:ComboBox id="comboBox" dataProvider="{arr}" width="140" labelField="name" open="comboBox_open(event);"> <mx:itemRenderer> <mx:Component> <mx:Text selectable="false" toolTip="{data.name} ({data.abbr})" /> </mx:Component> </mx:itemRenderer> </mx:ComboBox> </mx:Application>
View source is enabled in the following example.

{ 4 comments… read them below or add one }
Thanks for many examples.
i hava a item renderer problem on DataGridColumn.
There are comboboxes on DataGridColumn and users can choose a column item.
But when grid is scrolled all DataGridColumns are initialized.
In my opinion, Flex draw all grid again when scrolled.
plz tell me the solution.
Thanks for sharing this trick infact many tricks :)
but when the content is “gy” ,it does’t work. How to solve it?
If you’re trying to do this same thing without using an inline itemRenderer (e.g., just using the default ListItemRenderer, or a a custom renderer that extends that class), you also need to set the wordWrap property of the dropdown box to true: