How to handle pre-set value in Flex Combobox as selected item - apache-flex

Question

I'm facing a pretty basic but irksome problem with my Flex program.
To make the long story short, I've a DataGrid where in every row (you can already add and remove rows dinamically) there's a Combobox based on an ArrayCollection of elements (responsabili), every change to the Combobox already stores changes to the db.
I want the Combobox to show the value loaded from the db as the selected value.
<s:Panel title="qqq" width="100%" height="100%" styleName="light">
<s:layout>
<s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />
</s:layout>
<s:VGroup width="100%" height="100%">
<mx:Text text="www" />
<components:GraphicButton styleName="add" toolTip="Aggiungi elemento" id="aggCompito" click="aggCompito_clickHandler(event)"/>
<s:DataGrid width="100%" height="100%" dataProvider="{MyModel.instance.compiti}" editable="true" gridItemEditorSessionSave="changeHandler(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Responsabile" editable="false" width="180">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import it.aaa.frontend.model.MyModel;
import mx.binding.utils.ChangeWatcher;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.FlexGlobals;
import mx.events.CloseEvent;
import mx.events.IndexChangedEvent;
import spark.events.IndexChangeEvent;
protected function changeHandler(event:IndexChangeEvent):void {
data.responsabile = myResponsabile.selectedItem;
// TODO Auto-generated method stub
data.tipo = event.newIndex;
dispatchEvent(new Event("compitiChange", true));
}
protected function responsabililabelFunc(item:Object):String {
return String(item.cognome) + " " + String(item.nome);
}
protected function guessSelectedItem(item:Object):int {
return item.responsabile.id;
}
]]>
</fx:Script>
<s:HGroup>
<s:ComboBox id="myResponsabile"
dataProvider="{MyModel.instance.responsabili}"
change="changeHandler(event)"
labelFunction="responsabililabelFunc"
selectedItem="{data.responsabile}"
/>
</s:HGroup>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
</s:Panel>
MyModel.as
public var responsabili:ArrayCollection; //initialized with actual ArrayCollection of "responsabili", with id, cognome, nome.

Answer 1

It will only work with selectedItem="{data.responsabile}" if you are using some actionscript classes as your data object and the property resposabile is marked as bindable:
[Bindable] public var responsabile:Object;
If you have just some generic objects as data, you will need to catch this up where data is set in your itemrenderer. So your GridItemRenderer needs another method:
override public function set data(value:Object):void
{
super.data = value;
// only do something if the data is set. When the renderer is destroyed the data will be null
if (data)
{
myResponsabile.selectedItem = data.responsabile;
}
}
I don't remember though if the data is set after all components (including your combobox) has been created or before that. So in case you will get a null pointer exception because myResponsabile is null at this point, it will get more complicated:
private var _myResponsabile:Object;
private var _myResponsabileChanged:Boolean;
override public function set data(value:Object):void
{
super.data = value;
// only do something if the data is set. When the renderer is destroyed the data will be null
if (data)
{
_myResponsabile = data.responsabile;
_myResponsabileChanged = true;
invalidateProperties();
}
}
override protected function commitProperties():void
{
super.commitProperties();
if(_myResponsabileChanged)
{
_myResponsabileChanged = false;
myResponsabile.selectedItem = _myResponsabile;
}
}