在数据网格中对Flex复选框进行对齐

Question

我使用一个项渲染器在我的数据表格中显示复选框，例如：

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

这个方法可以正常工作，但是复选框的对齐方式是向左对齐的，如下图所示：

我该如何将其居中对齐？

我已经尝试过以下方法；

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

但是在这种情况下，我的代码确实将复选框居中对齐，但没有将数据保存在我的数据提供程序中。

我是否漏掉了什么？

- Adnan

---

我们为您提供了一些好的答案，有没有一个适合您？如果是这样，为什么不喜欢呢？ :) - Wade Mueller

Answer 1

使用<mx:Canvas />或者<s:Group />（在Flex 4中）代替<mx:Box />。

同时，在复选框上设置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>

- Marty Pitt

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>

- splash

Answer 3

请使用以下提示将复选框和图像放置在列的中心。

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

- Deepa D

Answer 4

请参见：

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

- Michael Baumanns

Answer 5

我相信只需将mx:itemRenderer更改为mx:itemEditor即可解决问题。

- Wade Mueller

---

在Flex 4下，这会导致显示一个“1”而不是复选框。诚然，“1”居中了，但这并不能让人感到安慰。 - the.jxc

Answer 6

尝试将复选框宽度设置为100%。

- Treby

---

这个并没有做任何事情。至少在Flex 4下是这样的。 - the.jxc