icon in combobox

[Can I]

hi,

I know how to display icons in a dropdown list of a combobox, but when I select an item, there is no icon apearing next to label. I recon I should build my own ItemRenderer for selected item, but do you know how to apply it?

here's code sample


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
[Embed(source="rc/icon.jpg")]
var iconSymbol:String;
</mx:Script>

<mx:Panel width="250" height="200" layout="horizontal" horizontalCenter="0" verticalCenter="-37.5">
<mx:ComboBox id="itemsCbx">
<mx:ArrayCollection>
<mx:Object label="item" icon="{ iconSymbol }"/>
<mx:Object label="item" icon="{ iconSymbol }"/>
<mx:Object label="item" icon="{ iconSymbol }"/>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:Panel>

</mx:Application>

[nirth]

Hello.

I did not finished this component, so you have to modify createChildren and updateDisplayList methods, to allign image.


package eu.orangeflash.controls
{
import mx.controls.ComboBox;
import mx.controls.Image;

public class IconComboBox extends ComboBox
{
protected var _iconWidth:Number = 16;
protected var _iconHeight:Number = 16;

protected var _iconField:String;

protected var _icon:Image;
[Bindable]
public function set iconWidth(value:Number):void
{
_iconWidth = value;
createChildren();
}
public function get iconWidth():Number
{
return _iconWidth;
}
[Bindable]
public function set iconHeight(value:Number):void
{
_iconHeight = value;
}
public function get iconHeight():Number
{
return _iconHeight;
}
[Bindable]
public function set iconField(value:String):void
{
_iconField = value;
}
public function get iconField():String
{
return _iconField;
}

override protected function createChildren():void
{
super.createChildren();

textInput.move(_iconWidth, 0);

if(!_icon)
{
_icon = new Image();
addChild(_icon);
_icon.move(0, 0);
}

_icon.width = _iconWidth;
_icon.height = _iconHeight;
}

override protected function commitProperties():void
{
trace("overriden");

super.commitProperties();

_icon.source = selectedItem[iconField];
trace(selectedItem[iconField]);
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

_icon.source = selectedItem[iconField];
}
}
}