Flex的Combobox组件（Prompt属性、文字过长...特性）

最新推荐文章于 2026-04-03 02:17:53 发布

转载最新推荐文章于 2026-04-03 02:17:53 发布 · 4.8k 阅读

标签

#flex #object #class #xml

flex 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何通过设置属性来定制 Flex 中的 Combobox 组件，包括显示提示信息、处理文字过长的情况、允许下拉列表显示多行文字、为下拉列表添加图标、创建联动的 Combobox 以及调整动画效果等。

原文地址：http://joe-feng.iteye.com/blog/1402008

1、显示提示
设置Prompt属性可以为Combobox添加一个默认提示。如果没有设置selectedIndex，默认selectedIndex=-1，就显示Prompt的内容。
Flex3如果不设置Prompt，默认选择第一项。Flex4如果不设置Prompt，那么默认是空的。

2、处理文字过长
Flex4中的Combobox文字过长时，会显示滚动条。我们讨论Flex3如何处理文字过长的问题。
设置其itemRenderer为Label即可显示出省略号和ToolTip。几乎所有含有标签的组件遇到文字过长的问题都可以用该方法解决。
<mx:ComboBox itemRenderer="mx.controls.Label"/>
另外还可以设置下拉列表的宽度：
<mx:ComboBox dropdownWidth="300" />

3、允许下拉列表显示多行文字
设置itemRenderer为mx.controls.Text即可。有的文章说还需要在open事件中获得Combobox.dropDown获取下拉列表的引用。然后设置下拉列表的variableRowHeight为true。实际实现只需设置itemRenderer即可。

    As代码 
  
 protected function cb_openHandler(event:DropdownEvent):void  
 {  
   cb.dropdown.variableRowHeight = true;  
 }  
 <mx:ComboBox id="cb" dataProvider="{ac}" width="200"  
     open="cb_openHandler(event)" itemRenderer="mx.controls.Text"/>  

4、为下拉列表添加图标

    As代码 
  
 [Embed("assets/1.png")]  
 private var pngClass:Class;  
 private function cb_openHandler(event:DropdownEvent):void  
 {  
     cb.dropdown.variableRowHeight = true;  
     cb.dropdown.iconFunction = iconFunc;  
 }             
 private function iconFunc(item:Object):Class{  
     return pngClass;  
 }  
 <mx:ComboBox id="cb" dataProvider="{ac}" labelField="value" open="cb_openHandler(event)" />  

5、创建联动的Combobox

    As代码 
  
 [Bindable]  
 private var myXML:XML =   
 <root>  
 <parent name="大类1">  
 <child name="大类1-小类1"/>  
 <child name="大类1-小类2"/>  
 <child name="大类1-小类3"/>  
 </parent>  
 <parent name="大类2">  
 <child name="大类2-小类1"/>  
 <child name="大类2-小类2"/>  
 <child name="大类2-小类3"/>  
 </parent>  
 </root>  
 <mx:ComboBox id="cb1" dataProvider="{myXML.parent}" labelField="@name"/>  
 <mx:ComboBox id="cb2" dataProvider="{cb1.selectedItem.child}" labelField="@name"/>  