Forgot to mention that, hiding the textInput does fix the problem. Thanks. I'm just looking to understand the flow better and if my implementation is the right way to do things.
________________________________ Michael J. Regert From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Regert, Michael Sent: Thursday, August 14, 2008 9:49 AM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox I've implemented it almost the same way your blog sample did, tweaking only a bit to add a canvas to the holder rather than a icon class. I've overridden the functions createChildren, measure, and updateDisplayList just as you have. I'm a C/C++ developer new to Adobe Flex and am trying to grasp everything. I guess I'm not fully understanding the call stack on this and the order of methods it calls to render the dropdown. Is there a good place to learn this? I had to put a check in place inside of updateDisplayList to check for null because the function was being call initially, even before the combobox was rendered. I figure I'm just missing the whole picture which is why I'm not understanding where the selected label is being set. Thanks. package { // Custom Combo Box import flash.display.DisplayObject; import mx.containers.Canvas; import mx.controls.ComboBox; import mx.core.IFlexDisplayObject; import mx.core.UIComponent; public class LineComboBox extends ComboBox { // constructor public function LineComboBox() { super(); } // Private attribute to hold the line canvas private var lineHolder:UIComponent; override protected function createChildren():void { super.createChildren(); lineHolder = new UIComponent(); addChild(lineHolder); } override protected function measure():void { super.measure(); if (iterator && iterator.current) { // MyLineClass holds a canvas with the line drawn on it var lt:MyLineClass = iterator.current as MyLineClass; var line:IFlexDisplayObject = lt.getDisplayObject() as Canvas; while (lineHolder.numChildren > 0) { lineHolder.removeChildAt(0); } lineHolder.addChild(DisplayObject(line)); measuredWidth += line.measuredWidth; measuredHeight = Math.max(measuredHeight, line.measuredHeight + borderMetrics.top + borderMetrics.bottom); } } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); if (selectedItem) { var lt:MyLineClass = selectedItem as MyLineClass; var line:IFlexDisplayObject = lt.getDisplayObject() as Canvas; while (lineHolder.numChildren > 0) { lineHolder.removeChildAt(0); } lineHolder.addChild(DisplayObject(line)); measuredWidth += line.measuredWidth; measuredHeight = Math.max(measuredHeight, line.measuredHeight + borderMetrics.top + borderMetrics.bottom); } } } } ________________________________ Michael J. Regert From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alex Harui Sent: Wednesday, August 13, 2008 7:20 PM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox Not sure how you've got it coded now, but you can either hide the textInput or maybe override selectedLabel ________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Regert, Michael Sent: Wednesday, August 13, 2008 2:29 PM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox 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: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alex Harui Sent: Tuesday, August 12, 2008 6:17 PM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Displaying custom items in ComboBox IconComboBOx on my blog (blogs.adobe.com/aharui) ________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Michael Regert Sent: Tuesday, August 12, 2008 2:46 PM To: flexcoders@yahoogroups.com 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>
