Flex align checkbox in datagrid Flex

Question

Uso un renderer di elementi per visualizzare una casella di controllo nel mio datagrid come;

<mx:DataGridColumn headerText="Visible" dataField="visibleInd" width="48" 
itemRenderer="mx.controls.CheckBox" 
rendererIsEditor="true" 
editorDataField="selected" 
/> 

E che funziona bene, ma la casella di controllo è allineata a sinistra come;

alt text http://img96.imageshack.us/img96/9239/93364060.jpg

Come posso allinearlo nel mezzo?

Ho usato;

  <mx:DataGridColumn headerText="Visible" dataField="visibleInd" width="48" 
           editorDataField="selected" 
           > 
      <mx:itemRenderer> 
       <fx:Component> 
        <mx:Box width="100%" height="100%" 
          horizontalAlign="center" verticalAlign="middle"> 
         <mx:CheckBox selected="{data.visibleInd}" /> 
        </mx:Box> 
       </fx:Component> 
      </mx:itemRenderer> 

Ma in questo caso il mio codice fa allineare la casella di controllo al centro, ma non salva i dati nel mio dataprovider.

Mi manca qualcosa?

Answer 1

Invece di utilizzare <mx:Box />, utilizzare <mx:Canvas /> o <s:Group /> (in Flex 4).

Inoltre, impostare horizontalCenter="0" sulla casella di controllo.

Ad esempio:

<mx:itemRenderer> 
    <mx:Component> 
     <mx:Canvas width="100%" height="100%"> 
      <mx:CheckBox selected="{data.visibleInd}" horizontalCenter="0" /> 
     </mx:Canvas> 
    </mx:Component> 
</mx:itemRenderer> 

Answer 2

Sono abbastanza sicuro che funzionerà cambiando mx:itemRenderer a mx:itemEditor.

Answer 3

provare a fare la larghezza casella di controllo al 100%

Answer 4

Basta usare di DataGridColumn textAlign Stile:

<mx:DataGridColumn headerText="Visible" textAlign="center"> 
    <mx:itemRenderer> 
     <mx:Component> 
      <mx:CheckBox selected="{data.visibleInd}"/> 
     </mx:Component> 
    </mx:itemRenderer> 
</mx:DataGridColumn> 

Answer 5

utilizzare Gentilmente il suggerimento di seguito per inserire un'immagine la casella di controllo & in il centro della colonna.

<mx:CheckBox paddingLeft="20" /> 
<mx:Image horizontalAlign="center"/> 

Answer 6

See:

<?xml version="1.0" encoding="utf-8"?> 
    <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"> 
     <fx:Script> 
      <![CDATA[ 
       override public function prepare(hasBeenRecycled:Boolean):void { 
        if(data != null){ 
         chb.selected = data[column.dataField]; 
        } 
       } 

       protected function chb_clickHandler(event:MouseEvent):void{ 
        data[column.dataField] = !chb.selected; 
       } 
      ]]> 
     </fx:Script> 
     <s:CheckBox id="chb" click="chb_clickHandler(event)" horizontalCenter="0" verticalCenter="0"/> 
    </s:GridItemRenderer>