Datagrid scroll combobox reset issue

[abhishek]

hey frnds,
see this example , where i want to show last selected item in combo
box,
but when i scroll datagrid all combo boxes r reset,
Is any solution there ?


<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"

creationComplete="windowedapplication1_creationCompleteHandler(event)">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here
-->
<s:ArrayCollection id="arrColLeastCount">
<fx:Object label='1' index='1'/>
<fx:Object label='0.5' index='2'/>
<fx:Object label='0.25' index='3'/>
<fx:Object label='0.10' index='4'/>
<fx:Object label='0.05' index='5'/>
</s:ArrayCollection>



</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.utils.ArrayUtil;
import mx.utils.ObjectUtil;


private var arrColMain:ArrayCollection = new ArrayCollection();
protected function
windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
var arrCol:ArrayCollection = new ArrayCollection();
for(var i:Number=0; i < 10 ; i++){
var obj:Object = new Object();
obj.label=String(Number(i+1));
obj.index=i+1;
arrCol.addItem(obj);
}

for(var i:Number=0; i < 10 ; i++){
var obj:Object = new Object();
obj.myfield1=arrCol;
obj.myfield1_SelectedIndex=0;
obj.myfield2=arrCol;
obj.myfield2_SelectedIndex=0;
arrColMain.addItem(obj);
}
}

protected function button1_clickHandler(event:MouseEvent):void
{
Alert.show(''+arrColMain.getItemAt(0).myfield1_SelectedIndex+' :
'+arrColMain.getItemAt(0).myfield2_SelectedIndex);
Alert.show(''+arrColMain.getItemAt(1).myfield1_SelectedIndex+' :
'+arrColMain.getItemAt(1).myfield2_SelectedIndex);
}

]]>
</fx:Script>


<mx:DataGrid id="DG" dataProvider="{arrColMain}"
width="400" height="200" includeInLayout="true">
<mx:columns>
<mx:DataGridColumn dataField="myfield1" headerText="Test1" >
<mx:itemRenderer>
<fx:Component>
<mx:HBox >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.utils.ObjectProxy;
import mx.collections.ArrayCollection;
[Bindable]
public var dataProxy:ObjectProxy = new ObjectProxy(data);

protected function cmb_changeHandler(event:ListEvent):void
{
data.myfield1_SelectedIndex =
cmb.selectedItem.index;
}
[Bindable]
override public function get data():Object
{
return super.data;
}
override public function set data( value:Object ):void
{
if(value != null){
super.data = value;
data.myfield1_SelectedIndex = value.myfield1_SelectedIndex;
}
}

]]>
</fx:Script>
<mx:ComboBox id="cmb" labelField="label" width="150"
dataProvider="{data.myfield1}"
change="cmb_changeHandler(event)" />
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn dataField="myfield2" headerText="Test2" >
<mx:itemRenderer>
<fx:Component>
<mx:HBox >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.utils.ObjectProxy;
import mx.collections.ArrayCollection;
[Bindable]
public var dataProxy:ObjectProxy = new ObjectProxy(data);

protected function cmb_changeHandler(event:ListEvent):void
{
data.myfield2_SelectedIndex =
cmb.selectedItem.index;
}
[Bindable]
override public function get data():Object
{
return super.data;
}
override public function set data( value:Object ):void
{
if(value != null){
super.data = value;
data.myfield2_SelectedIndex = value.myfield2_SelectedIndex;
}
}

]]>
</fx:Script>
<mx:ComboBox id="cmb" labelField="label" width="150"
dataProvider="{data.myfield2}"
change="cmb_changeHandler(event)" />
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>



<s:Button label="Check " click="button1_clickHandler(event)" />

</s:WindowedApplication>


thx in advanced,
:)