set the back ground color of a data grid cell to yellow when value of a cell is greater than 6

Iam using flex 3.5 . I want to 开发者_如何学Goset the back ground color of cell in a datagrid to yellow when the data in it is more than 6 .

---

Create a custom renderer and test the value when the data property is set:

override public function set data(value:Object):void
{
  super.data = value; 

  if(data > 6)
    setStyle("backgroundColor", 0xFFFF00);
  else
    setStyle("backgroundColor", 0xFFFFFF);
}

Remember that you need to revert the color if the test fails since Lists reuse renders (you would get random yellow backgrounds if you dont).

---

I've done something similar in the past using the AdvancedDataGrid and a AdvancedDataGridRendererProvider. I'm using the Flex 4.0 SDK but since the AdvancedDataGrid component hasn't changed between 3.5 and 4.0, the code should be similar.

The renderer "MyRenderer.mxml":

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx" 
             backgroundColor="{SetBackgroundColor(data)}">
    <fx:Script>
        <![CDATA[
            [Bindable] private var bgColor:uint = 0xFFFFFF;

            private function SetBackgroundColor(obj:Object):uint
            {
                var returnColor:uint = 0xFFFFFF;

                if (obj["Quantity"] != null)
                {
                    if (int(obj["Quantity"]) > 6)
                    {
                        returnColor = 0xFFF8DD;
                    }
                    else
                    {
                        returnColor = 0xFFFFFF;
                    }

                return returnColor;
            }

            override public function set data(value:Object):void
            {
                super.data = value;
                if (value["Quantity"] != null)
                {
                    theLabel.text = value["Quantity"].toString();
                }
                else
                {
                    theLabel.text = "";
                }
            }
        ]]>
    </fx:Script>
    <mx:Label id="theLabel" />
</mx:HBox>

Using the renderer:

<mx:AdvancedDataGrid dataProvider="{YourArrayCollection}">
    <mx:columns>
        <mx:AdvancedDataGridColumn id="colQuantity" headerText="Qty" dataField="Quantity"/>
    </mx:columns>
    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider column="{colQuantity}" depth="1" dataField="Quantity" renderer="MyRenderer" />
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

EDIT: I set the backgroundColor in a function so that when the itemRenderers get recycled the function will get called and set the backgroundColor to the correct value.