flex 图片combobox

因为在项目中,需要一个可选择个人头像的下拉列表框,要求ComboBox的头部也显示图片.便到网上查找是否有相关的组件,找到这样一篇文章,达到了我的基本需求. 不过,也有一些使用上的不方便,只能使用ListItem的url属性来显示图片,不能使用嵌入图片;另外,ListItem的label属性必须设 置"",对于需要label属性的应用场景不合适.所以,我自己改了一下.定义了一个IconComboBox和一个 IconListItemRender,在使用IconComboBox时,指定itemRender为IconListItemRender,即可以两 全其美.代码如下:
package classes
{
    import mx.controls.ComboBox;
    import mx.controls.Image;
   
   
    public class IconComboBox extends ComboBox
    {
        public var imageDataField :String = "url" ;
       
        protected var image :Image  ;
       
        protected var imageMeasuredWidth :Number ;
       
        protected var imageMeasuredHeight :Number ;
       
        override protected function createChildren():void{
            super.createChildren() ;
           
            if(!image){
                image = new Image() ;
                image.focusEnabled = false ;                   
                removeChild(this.textInput) ;
                addChild(image) ;
            }
           
            //removeChild(this.textInput) ;
        }
       
        override protected function measure():void{
            super.measure() ;
           
            imageMeasuredWidth = this.getExplicitOrMeasuredWidth() - getStyle("paddingLeft") -
                getStyle("paddingRight") - getStyle("arrowButtonWidth") ;
            imageMeasuredHeight = this.getExplicitOrMeasuredHeight() - getStyle("paddingTop") -
                getStyle("paddingBottom") ;
        }
       
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth,unscaledHeight) ;
                   
            if(this.selectedItem ){
                if(this.selectedItem["icon"]){
                    var iconClass :Class = this.selectedItem["icon"] ;
                    image.source = iconClass ;
                }
                else if(this.selectedItem["url"]){
                   
                    image.source = this.selectedItem["url"] ;
                }
                if(!imageMeasuredWidth){
                    this.measure();
                    image.setActualSize(this.imageMeasuredWidth,this.imageMeasuredHeight) ;
                    image.move(getStyle("paddingLeft"),(unscaledHeight - imageMeasuredHeight) / 2) ;               
                }
            }
        }
    }
}



package classes
{
    import mx.controls.listClasses.ListItemRenderer;
   
    public class IconListItemRender extends ListItemRenderer
    {
        public function IconListItemRender()
        {
        }

        override protected function createChildren():void{
            super.createChildren() ;
            this.label.visible = false ;
        }
    }
}