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.