In a Flex DataGrid’s first row, the itemRenderer will initialize twice. Tracing the results reveals that the flex framework is possibly creating two instances of the first row’s itemRenderer. In a more complex application, where the itemRenderer contains a data-bound ColorPicker, we’re seeing an infinite loop occur because of this problem. Only the first row’s itemRenderer is initialized twice. Is there a way to override flex’s behavior and stop this from occurring? The following code demonstrates the problem:
Main Application:
<?xml version='1.0' encoding='utf-8'?> <mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' layout='absolute' initialize='on_initialize(event);'> <mx:Script> <![CDATA[ /** * This experiment shows how the first row's itemrenderer is instantiated/added/initialized twice. * We've never even noticed this before we found that a data-bound ColorPicker enters a infinite * loop when it is within an itemRenderer. */ import mx.collections.ArrayCollection; import mx.events.FlexEvent; private var dg_array:Array; private var dg_arrayCollection:ArrayCollection; private function on_initialize(event:FlexEvent):void { dg_array = new Array(); dg_arrayCollection = new ArrayCollection(); dg_arrayCollection.addItem('item 1'); dg_arrayCollection.addItem('item 2'); dg.dataProvider = dg_arrayCollection; } ]]> </mx:Script> <mx:DataGrid id='dg' width='100%' height='100%' rowCount='5'> <mx:columns> <mx:DataGridColumn headerText='Name' itemRenderer='SimpleItemRenderer'/> </mx:columns> </mx:DataGrid> </mx:Application> SimpleItemRenderer:
<?xml version='1.0' encoding='utf-8'?> <mx:Canvas xmlns:mx='http://www.adobe.com/2006/mxml' width='400' height='300' initialize='//on_initialize(event);'> <mx:Script> <![CDATA[ import mx.events.FlexEvent; [Bindable] override public function set data(value:Object):void { _data = value; } override public function get data():Object { return _data; } private var _data:Object; private function on_initialize_textInput(event:FlexEvent):void { trace('initialize:event.target='+event.target+', ' + _data); // runs twice, for the first item only } private function on_creationComplete_textInput(event:FlexEvent):void { trace('creationComplete:event.target='+event.target+', ' + _data); // runs twice, for the first item only } ]]> </mx:Script> <mx:TextInput text='{data}' id='textInput' initialize='on_initialize_textInput(event);' creationComplete='on_creationComplete_textInput(event);'/> </mx:Canvas> Abbreviated Output:
initialize:event.target=ItemRenderers0.dg…SimpleItemRenderer12.textInput, null initialize:event.target=ItemRenderers0.dg…SimpleItemRenderer24.textInput, null creationComplete:event.target=ItemRenderers0.dg…SimpleItemRenderer24.textInput, item 1 initialize:event.target=ItemRenderers0.dg…SimpleItemRenderer29.textInput, null creationComplete:event.target=ItemRenderers0.dg…SimpleItemRenderer29.textInput, item 2 creationComplete:event.target=ItemRenderers0.dg…SimpleItemRenderer12.textInput, item 1
Your itemRenderer isn’t really implemented properly, and this might be the cause of your issues
The overridden set data method should set super.data = value. You do not need to implement your own _data property as the Flex Containers implement IDataRenderer and already have it. I think, without running your code, that you are running into a problem with the cache/recycling.
What I generally prefer to do is create a [Bindable] private myProperty:Object (usually a custom MyObjectVO that extends EventDispatcher). Then, in my set data method, I will set super.data = value followed by if(value!=null) myProperty=value.
This allows me to strongly type my actual data, leave the mechanisms intact in regards to the IDataRenderer interface implemented by the Canvas (or other container) and insures that the data is properly recycled.
Initialize ad creationComplete are poor evets in itemRenderers because they are actually recycled and these methods do not behave as one might expect or want them to.
I can’t express how beneficial this series by Peter Ent on itemRenders was for me.