转自:http://hi.baidu.com/half_cup_coffee/blog/item/6447e181e4dd05d3bd3e1ebf.html/cmtid/abb7f5f07ee3eccd7831aab9
在自定义一个itemRenderer来显示下拉框中的数据时,遇到一个问题。
定义的itemRenderer是个用来显示颜色块的和相应文字说明的。在下拉框的列表中显示很正常,有颜色也有相应的文字说明,如下图:
但是在选中某条数据,下拉框收起来后,在ComboBox的TextInput里只显示了当前的标签,并没有显示对应的颜色。
因为下拉框默认显示选中项是用的TextInput组件,因此并不能像列表里的itemRenderer一样能显示前面的颜色块,不过我们可以继承一个 ComboBox,然后重载createChildren()和updateDisplayList()方法,去掉默认的TextInput,改用实例化一个itemRenderer来显示选中的数据,这样就能保证下拉框里和已经选中的以相同的方式显示。
下面是一个从ComboBox继承的组件ComboBoxEx(实现方式参考了国外某网站上的代码)
package bss.flex.components
{
import mx.binding.utils.BindingUtils;
import mx.controls.ComboBox;
import mx.core.UIComponent;
public class ComboBoxEx extends ComboBox
{
public function ComboBoxEx()
{
super();
}
protected var textInputReplacement:UIComponent;
override protected function createChildren():void {
super.createChildren();
if ( !textInputReplacement ) {
if ( itemRenderer != null ) {
//删除缺少的TextInput组件
removeChild(textInput);
//用itemRenderer创建一个实例并添加
textInputReplacement = itemRenderer.newInstance();
//绑定属性
BindingUtils.bindProperty(textInputReplacement, "data", this, "selectedItem", true);
addChild(textInputReplacement);
}
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if ( textInputReplacement ) {
textInputReplacement.width = unscaledWidth;
textInputReplacement.height = unscaledHeight;
}
}
}
}
定义一个用来显示颜色说明的itemRenderer-ColorRenderer.mxml,很简单一个HBox里放个Canvas和Label,Canvas用来显示颜色,Label用来显示标签
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
verticalAlign="middle" paddingLeft="5"
width="100%" height="25">
<mx:Canvas width="16" height="16"
borderStyle="solid" cornerRadius="2"
backgroundColor="{data.color}"/>
<mx:Label text="{data.label}"/>
</mx:HBox>
准备测试数据,就直接在下拉框的ComboBox的dataProvider里写死:
<components:ComboBoxEx
itemRenderer="bss.flex.components.itemrenderer.ColorRenderer">
<components:dataProvider>
<mx:Object color="0x00EA00" label="新建"/>
<mx:Object color="0xFF9D4C" label="已退单"/>
<mx:Object color="0xFF80FF" label="未通过审核"/>
<mx:Object color="0xFFFF80" label="请求撤销"/>
<mx:Object color="0x808080" label="作废"/>
</components:dataProvider>
</components:ComboBoxEx>
下面这个是最终的效果图,左边的是普通的ComboBox,右边是ComboBoxEx: