He extendido la clase CheckBox para usarla como itemRenderer, centrar los CheckBoxes en las celdas de un DataGrid y que reflejen los cambios de su DataProbider, un ArrayCollection:
Código ActionScript :
package myComponents
{
import flash.display.DisplayObject;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.managers.IFocusManagerComponent
public class myCheckBox
extends CheckBox
implements IDropInListItemRenderer//,IFocusManagerComponent
{
private var _listData:DataGridListData;
public function myCheckBox()
{
super();
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
var n:int = numChildren;
for (var i:int = 0; i < n; i++)
{
var c:DisplayObject = getChildAt(i);
if (!(c is TextField))
{
c.x = (w - c.width) / 2;
c.y = 0;
}
}
}
// Implement the drawFocus() method for the VBox.
/*
override public function drawFocus(draw:Boolean):void {
setFocus();
}*/
[Bindable]
override public function set data(value:Object):void{
super.data = value;
selected=data[_listData.dataField];
}
override public function get data():Object {
return super.data;
}
override public function get listData():BaseListData
{
return _listData;
}
override public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
}
}
}En la aplicación, hago un bind entre los CheckBoxes y el ArrayColection:
Código Flex :
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.events.DataGridEventReason;
import mx.collections.ArrayCollection;
import mx.events.DataGridEvent;
import mx.events.ListEvent;
import mx.events.PropertyChangeEvent;
[Bindable]
private var myAC:ArrayCollection = new ArrayCollection([
{id:89, Seccion: 'Bob Jones', Leer: true , Escribir: true , Eliminar: false},
{id:5, Seccion: 'Jane Smith', Leer: true , Escribir: false , Eliminar: false},
{id:7, Seccion: 'Doug Johnson', Leer: false , Escribir: true , Eliminar: true},
{id:15, Seccion: 'John Jackson', Leer: true , Escribir: false , Eliminar: false},
{id:21, Seccion: 'Christina Coenraets', Leer: true , Escribir: true , Eliminar: false},
{id:4, Seccion: 'Joanne Wall', Leer: false , Escribir: false , Eliminar: true},
{id:461, Seccion: 'Maurice Smith', Leer: false , Escribir: false , Eliminar: false},
{id:35, Seccion: 'Lorraine Barnes', Leer: true , Escribir: true , Eliminar: true},
{id:61, Seccion: 'The Dude', Leer: true , Escribir: false , Eliminar: true},
{id:56, Seccion: 'Abe Rockaway', Leer: true , Escribir: true , Eliminar: false}
]);
private function init():void{
myAC.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChange);
myAC.enableAutoUpdate();
}
private function onChange(event:CollectionEvent):void
{
//myAC.disableAutoUpdate();
var obj:Object=event.items[0].source;
var i:uint=myAC.getItemIndex(obj);
switch (event.items[0].property)
{
case "Leer":
if(obj["Leer"]==false)
{
obj["Escribir"]=false;
obj["Eliminar"]=false;
}
break;
case "Escribir":
if(obj["Escribir"]==false)
obj["Eliminar"]=false;
else
myAC[i]["Leer"]=true;
break;
case "Eliminar":
if(obj["Eliminar"]==true)
{
obj["Escribir"]=true;
obj["Leer"]=true;
}
break;
default:
break;
}
// myAC.enableAutoUpdate();
myAC.itemUpdated(obj);
//myGrid.validateNow();
}
]]>
</mx:Script>
<mx:DataGrid id="myGrid"
dataProvider="{myAC}" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="Seccion" width="150" headerText="Sección"/>
<mx:DataGridColumn dataField="Leer"
width="100"
headerText="Leer"
itemRenderer="myComponents.myCheckBox"
rendererIsEditor="true"
editorDataField="selected"/>
<mx:DataGridColumn dataField="Escribir"
width="100"
headerText="Escribir"
itemRenderer="myComponents.myCheckBox"
rendererIsEditor="true"
editorDataField="selected"/>
<mx:DataGridColumn dataField="Eliminar"
width="100"
headerText="Eliminar"
itemRenderer="myComponents.myCheckBox"
rendererIsEditor="true"
editorDataField="selected"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea id="cellInfo" width="300" height="150"/>
<mx:Label id="lb" text=""/>
</mx:Application>La función onChange es el handler del evento COLLECTION_CHANGE. En esta función hago cambios al dataProbider, myAC, del DataGrid. Estos cambios deberían ser reflejados por los CheckBoxes del DataGrid pero los cambios sólo se reflejan luego de desplazar la fila de los CheckBoxes afectados fuera y dentro de la vista del DataGrid.
No deseo usar un container como itemRenderer para colocar los CheckBoxes dentro del DataGrid.
¿Porqué no se actualizar los CheckBoxes luego de los cambios del dataProbider?
¡Gracias!
