This blog was EXTREMELY helpful. I'm so close to having this working. The last problem I'm grappling with is on the initial population of the combo box, everything is displayed as expected - only my graphic (within a canvas). But once an item in the drop-down box is selected, the combo box displays both the new graphic AND [object MyObjectName]. I know I need to do something additional than what I'm doing in the updateDisplayList function but am unsure as to what.
________________________________ Michael J. Regert From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Alex Harui Sent: Tuesday, August 12, 2008 6:17 PM To: [email protected] Subject: RE: [flexcoders] Displaying custom items in ComboBox IconComboBOx on my blog (blogs.adobe.com/aharui) ________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Regert Sent: Tuesday, August 12, 2008 2:46 PM To: [email protected] Subject: [flexcoders] Displaying custom items in ComboBox 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>
