在ComboBox下拉列表中显示具有多行的文本

问题要求

在ComboBox组件的下拉列表中显示多行的文本。

解决方案

下面的例子讲述了如何在Flex的ComboBox组件创建可变行高的item Render，这个问题可以通过设置ComboBox的dropdown.variableRowHeight得到解决。

代码

 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left" fontSize="12" backgroundColor="white">
3     <mx:Script>
4         <![CDATA[
5             import mx.controls.ComboBox;
6             import mx.events.DropdownEvent;
7 
8             protected function combobox1_openHandler(event:DropdownEvent):void
9             {
10                 (event.target as ComboBox).dropdown.variableRowHeight = true;
11             }
12 
13         ]]>
14     </mx:Script>
15 
16     <mx:Array id="arr">
17         <mx:Object name="Baltimore Orioles" abbr="BAL" />
18         <mx:Object name="Boston Red Sox" abbr="BOS" />
19         <mx:Object name="Chicago White Sox" abbr="CWS" />
20         <mx:Object name="Cleveland Indians" abbr="CLE" />
21         <mx:Object name="Detroit Tigers" abbr="DET" />
22         <mx:Object name="Kansas City Royals" abbr="KC" />
23         <mx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" />
24         <mx:Object name="Minnesota Twins" abbr="MIN" />
25         <mx:Object name="New York Yankees" abbr="NYY" />
26         <mx:Object name="Oakland Athletics" abbr="OAK" />
27         <mx:Object name="Seattle Mariners" abbr="SEA" />
28         <mx:Object name="Tampa Bay Devil Rays" abbr="TB" />
29         <mx:Object name="Texas Rangers" abbr="TEX" />
30         <mx:Object name="Toronto Blue Jays" abbr="TOR" />
31     </mx:Array>
32    
33     <mx:Label text="具有可变行高的ComboBox:"/>
34     <mx:ComboBox dataProvider="{arr}" labelField="name" width="150"
35         open="combobox1_openHandler(event)">
36         <mx:itemRenderer>
37             <mx:Component>
38                 <mx:Text selectable="false" toolTip="{data.name} {data.abbr}"/>
39             </mx:Component>
40         </mx:itemRenderer>
41        
42     </mx:ComboBox>
43    
44 </mx:Application>
45 

效果：