在 Datagrid 单元格 Flex 3 中更改背景颜色答案

【问题标题】：Change BackColor in Datagrid cell Flex 3在 Datagrid 单元格 Flex 3 中更改背景颜色
【发布时间】：2011-09-12 09:26:52
【问题描述】：

我正在创建 Flex 应用程序。当在数据网格单元格中输入数据时，我想检查单元格值是否小于 20，如果不是，则将该单元格的背景颜色更改为红色。

如何做到这一点？？

在此先感谢...

【问题讨论】：

标签： apache-flex

【解决方案1】：

查看my answer 至this question：

我会在自定义 ItemRenderer 中执行此操作，并通过覆盖 set data 或 updateDisplayList 函数来设置字体颜色。

来自this article：

应用程序：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/ -->
<mx:Application name="DataGridColumn_itemRenderer_test "
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;

            private function price_labelFunc(item:Object, column:DataGridColumn):String {
                return currencyFormatter.format(item.@price);
            }

            private function price_sortCompareFunc(itemA:Object, itemB:Object):int {
                return ObjectUtil.numericCompare(itemA.@price, itemB.@price);
            }
        ]]>
    </mx:Script>

    <mx:XML id="itemsXML">
        <items>
            <item name="Item 1" price="1.32" />
            <item name="Item 2" price="-12.23" />
            <item name="Item 3" price="4.96" />
            <item name="Item 4" price="-0.94" />
        </items>
    </mx:XML>

    <mx:Style>
        .centered {
            text-align: center;
        }
    </mx:Style>

    <mx:CurrencyFormatter id="currencyFormatter"
            precision="2"
            useNegativeSign="false" />

    <mx:DataGrid id="dataGrid" dataProvider="{itemsXML.item}">
        <mx:columns>
            <mx:DataGridColumn dataField="@name"
                    headerText="Name:"
                    headerStyleName="centered" />

            <mx:DataGridColumn dataField="@price"
                    headerText="Price:"
                    textAlign="right"
                    headerStyleName="centered"
                    labelFunction="price_labelFunc"
                    sortCompareFunction="price_sortCompareFunc"
                    itemRenderer="PriceLabel" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

PriceLabel.as：

/** http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/ */
package {
    import mx.controls.Label;
    import mx.controls.listClasses.*;

    public class PriceLabel extends Label {

        private const POSITIVE_COLOR:uint = 0x000000; // Black
        private const NEGATIVE_COLOR:uint = 0xFF0000; // Red

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            /* Set the font color based on the item price. */
            setStyle("color", (parseFloat(data.@price) <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
        }
    }
}

【讨论】：

+1 嘿，很好的答案。考虑到问题的详细信息，对 itemRenderer 会使用 .mxml，对某些人来说更容易理解
@Brian True，这可能会更容易一些，但我想既然你已经提到了 itemRenderers，我会建议一种稍微不同的方法。 :)

【解决方案2】：

我建议您对 dataGrid 使用 itemRenderer，并使用 itemRenderer 中的“数据”变量，检查值是什么，例如>20。然后，在此基础上设置itemRenderer的背景颜色。

如果您不知道如何使用 itemRenderers，请进行谷歌搜索。那里有大量的 DataGrid itemRenderer 示例。

【讨论】：