ComboBox与itemRenderer

转自: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：

在家上网赚钱更容易