在ComboBox下拉列表中显示具有多行的文本
问题要求
在ComboBox组件的下拉列表中显示多行的文本。
解决方案
下面的例子讲述了如何在Flex的ComboBox组件创建可变行高的item Render,这个问题可以通过设置ComboBox的dropdown.variableRowHeight得到解决。
代码
1 <?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
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
效果: