Custom itemRenderer and sort collapse

[rawmantick]

Hi guys... I use castom renderer for columns of DataGrid. The code is pretty general. This is using of my component

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bench="components.benchmark.*">
<mx:Script>
<![CDATA[
private function sampleXML():XML
{
var xml:XML =
<bench name="top 10">
<company name="Sibers" tend="up"/>
<company name="Adobe" tend="up"/>
</bench>
}
]]>
</mx:Script>
<bench:BenchmarkRanking sourceFile="{sampleXML()}"/>
</mx:Application>

This is the component:

<mx:Panel>
<mx:DataGrid id="dataGrid" dataProvider="{tends}">
<mx:columns>
<mx:DataGridColumn dataField="company"/>
<mx:DataGridColumn itemRenderer="BenchRenderer"/>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
private var tends:Array = null;

public function set sourceFile(obj:XML):void
{
// stuff tends array with tend parameter of xml
}
]]>
</mx:Script>
</mx:Panel>

And finaly item renderer is:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="addSymbol(event)">
<mx:Script>
<![CDATA[
[Embed('/swf/tend.swf', symbol='UpArrow_design')]
private static var UpArrow:Class;

[Embed('swf/tend.swf',symbol='DownArrow_design')]
private static var DownArrow:Class;

private function addSymbol(event:FlexEvent):void
{
var sprite:Sprite = null;
if( data.tend=="up" )
sprite = new UpArrow() as Sprite;
else if( data.tend=="down" )
sprite = new DownArrow() as Sprite;
wrapper.addChild(sprite);
}
]]>
</mx:Script>
<mx:UIComponent id="wrapper"/>
</mx:Canvas>

Everything runs great... except that itemRenderer behaves itself sick... When I sort lines by clicking tip upon columns... Sometimes I got 2 green arrows... Sometimes two red... Sometimes One green and one blue... I cimplitely misunderstand why it is so...

As I know for every cell simply one instance of custom item renderer class is created... And data from datagrid dataprovider is available tthere...

Here is an example:
http://ccfit.nsu.ru/~stulov/BenchmarkingRanking.swf

Click sorting by position... and watch the arrows.

Can someone hlp figure out how to correctly manage custom item renderers ?

I have made code simpler than it is... Not to make u put too much effort

[rawmantick]

Made it... This way:
public class BenchmarkTendRenderer extends VBox
{
public function BenchmarkTendRenderer()
{
super();
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
// draw here
super.updateDisplayList(unscaledWidth,unscaledHeig ht);
}
}