[flexcoders] Displaying custom items in ComboBox

[Michael Regert]

Below is a "hello world" program that creates a combo box which has 
a circle or a square as the drop-down selections. The drop down has 
a custom renderer which shows a label as well as a graphic of the 
shape. What I'd like to do is display this shape not just in the 
drop-down menu, but when the combo box list is closed(show the image 
as the selected item). Righ now, I can only get it to display text. 
Is this not possible? Suggestions?  Thanks.

<!-- MAIN MXML FILE -->

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
layout="absolute" creationComplete="initApp()">
        <mx:Script>
                <![CDATA[
                        import mx.containers.Canvas;
                        import mx.collections.ArrayCollection;
                        [Bindable]
                        public var acSelections:ArrayCollection;
                        public var aSelections:Array = 
[{type:'circle', image:circleSelection()},{type:'square', 
image:squareSelection()}];
                        
                        private function initApp():void {
                                acSelections = new ArrayCollection
(aSelections);
                        }
                        private function squareSelection():Canvas {
                                var canvas:Canvas = new Canvas(); // 
New canvas to hold the drawing object
                                canvas.width = canvas.height = 20;
                                canvas.graphics.lineStyle(2, 
0x000000, 1);
                                canvas.graphics.drawRect(2, 2, 16, 
16);
                                return canvas;                  
        
                        }
                        private function circleSelection():Canvas {
                                var canvas:Canvas = new Canvas(); // 
New canvas to hold the drawing object
                                canvas.width = canvas.height = 20;
                                canvas.graphics.lineStyle(2, 
0x000000, 1);
                                canvas.graphics.drawCircle(10, 10, 
8);
                                return canvas;                  
        
                        }
                        
                ]]>
        </mx:Script>
        <mx:Panel id="pnlMain" layout="absolute" title="Custom Combo 
Box" x="10" y="10" width="250" height="200">
                <mx:ComboBox id="cbSelection" horizontalCenter="0" 
verticalCenter="0" dataProvider="{acSelections}"
                        itemRenderer="MyComboBox" labelField="type" 
rowCount="{acSelections.length}" width="100"/>
        </mx:Panel>
        
</mx:Application>

<!-- ***** MYCOMBOBOX.MXML RENDERER BELOW ***** -->

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml";>
        <mx:Script>
                <![CDATA[
                private var _data:Object;
                override public function set data(value:Object):void 
{
                        _data = value;
                        removeAllChildren();
                                switch (_data.type) {
                                        case "circle": addChild
(_data.image); break;
                                        case "square": addChild
(_data.image); break;
                                }
                        }
                        override public function get data():Object
                        {
                        return _data;
                }

                ]]>
        </mx:Script>
        <mx:Label text="{data.type}"/>
</mx:HBox>