Флажок выравнивания Flex в сетке данных Flex

Question

Я использую средство визуализации элементов для отображения флажка в моей сетке данных, как;

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

И это отлично работает, но флажок выровнен по левому краю, как;

альтернативный текст 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>

Answer 3

См .:

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

Answer 4

Пожалуйста, используйте подсказку ниже, чтобы установить флажок и изображение в центре столбца.

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

Answer 5

попробуйте сделать ширину флажка до 100%

Answer 6

Я почти уверен, что это сработает, изменив mx:itemRenderer на mx:itemEditor.