Datagrid Flex中的Flex对齐复选框

Question

我使用项呈示器在我的数据网格中显示一个复选框,如;

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

这工作正常,但复选框左对齐;

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

我怎样才能在中间对齐它？

我用过;

            <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>

但在这种情况下,我的代码确实在中间对齐复选框,但不会在我的数据提供者中保存数据.

我错过了什么吗？

Answer 1

而不是使用<mx:Box />,使用<mx:Canvas />或<s:Group />(在Flex 4中).

另外,设置horizontalCenter="0"复选框.

例如:

<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

只需使用DataGridColumn的textAlign样式:

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