数据网格 Flex 中的 Flex 对齐复选框

Posted 2023-02-22

【中文标题】数据网格 Flex 中的 Flex 对齐复选框

【英文标题】：Flex align checkbox in datagrid Flex

【发布时间】：2011-03-10 05:12:12

【问题描述】：

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

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

效果很好，但复选框左对齐；

我怎样才能把它放在中间？

我用过；

            <mx:DataGridColumn headerText="Visible" dataField="visibleInd"  
                               editorDataField="selected"
                               >
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Box   
                            horizontalAlign="center" verticalAlign="middle">
                        <mx:CheckBox selected="data.visibleInd" />
                    </mx:Box>
                </fx:Component>
            </mx:itemRenderer>

但在这种情况下，我的代码确实对齐了中间的复选框，但没有将数据保存在我的 dataprovider 中。

我错过了什么吗？

【问题讨论】：

我们在下面为您提供了一些很好的答案，其中任何一个对您有用吗？如果是这样，为什么没有爱？ :)

【参考方案1】：

不要使用<mx:Box />，而是使用<mx:Canvas /> 或<s:Group />（在Flex 4 中）。

另外，在复选框上设置horizontalCenter="0"。

例如：

<mx:itemRenderer>
    <mx:Component>
        <mx:Canvas  >
            <mx:CheckBox selected="data.visibleInd" horizontalCenter="0" />
        </mx:Canvas>
    </mx:Component>
</mx:itemRenderer>

【参考方案2】：

只需使用DataGridColumn的textAlign样式：

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

【参考方案3】：

我很确定这可以通过将mx:itemRenderer 更改为mx:itemEditor 来实现。

【讨论】：

在 Flex 4 下，这会导致显示“1”而不是复选框。诚然，“1”是居中的。但这并不是什么安慰。

【参考方案4】：

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

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

【参考方案5】：

见：

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

【参考方案6】：

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

【讨论】：

这没有任何作用。至少，它在 Flex 4 下什么都不做。