apache-flex - 设置数据网格中单元格的背景颜色

Question

如何在数据网格中设置特定单元格的背景颜色。我通过项目渲染器尝试过。但是项目渲染器的问题是，直到数据没有填充到数据网格中，背景颜色才会起作用。即使数据网格中没有数据，我也希望突出显示单元格或单元格集。

请在下面找到我的代码：

MAin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="onComplete()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.BackgroundColor;

            import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
            private var dataArr:Array=new Array({data1:"Value"},{data1:"Value"},{data1:"Value"},{data1:"Value"},{data1:"Value"},{data1:"Value"})
            private function onComplete():void{
                var colsArr:Array=new Array();
                var column1:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column1.headerText="Header1";
                //column1.setStyle("backgroundColor","0xcccccc");
                column1.dataField="data1";
                colsArr.push(column1);
                var column2:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column2.headerText="Header2";
                //column2.setStyle("backgroundColor","0xcccccc");
                column2.dataField="data2";
                colsArr.push(column2);
                var column3:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column3.headerText="Header3";
                //column3.setStyle("backgroundColor","0xcccccc");
                column3.dataField="data3";
                colsArr.push(column3);
                var column4:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column4.headerText="Header4";
                //column4.setStyle("backgroundColor","0xcccccc");
                column4.dataField="data4";
                colsArr.push(column4);
                var column5:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column5.headerText="Header5";
                column5.dataField="data5";
                colsArr.push(column5);
                var column6:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column6.headerText="Header6";
                column6.dataField="data6";
                colsArr.push(column6);
                var column7:AdvancedDataGridColumn=new AdvancedDataGridColumn();
                column7.headerText="Header7";
                column7.dataField="data7";
                colsArr.push(column7);
                sampleDG.columns=colsArr;
                sampleDG.rowCount=colsArr.length;
            }
            private function myStyleFunction(data:Object, col:AdvancedDataGridColumn):Object{
                if(col.headerText=="Header1" || col.headerText=="Header2" || col.headerText=="Header3"){
                    return {backgroundColor:0xcccccc, color:0xff0000};
                }else{
                    return {backgroundColor:0xffffff, color:0xff0000};
                }
                return {};
            }
        ]]>
    </fx:Script>
    <mx:AdvancedDataGrid id="sampleDG" rowCount="3" width="350" horizontalScrollPolicy="on" height="300"
                         cachePolicy="on"  styleFunction="myStyleFunction" itemRenderer="com.ADGItemRenderer"/>
</s:Application>

ADGItemRenderer：

package com.ssc.pna.secmaster.renderer
{
    import com.ssc.pna.components.MktDGColumn;

    import mx.charts.styles.HaloDefaults;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
    import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
    import mx.controls.listClasses.BaseListData;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.IStyleManager2;
    import mx.styles.StyleManager;

    [Style(name="rowColor", type="uint", format="Color", inherit="yes")] 

    public class ADGItemRenderer extends AdvancedDataGridItemRenderer
    {

        /**
         *  @private
         */
        public var dataType:Object; 
        public var precision:Object;
        private static var stylesInited:Boolean = initStyles();

        /**
         *  @private
         */
        private static function initStyles():Boolean
        {
            return true;
        }

        public function ADGItemRenderer()
        {
            super();
            background = true;
            backgroundColor=0xFFFFCC;
        }

        override public function validateNow():void
        {
            //listData=listData;
             var _listDataDummy:BaseListData=listData;


            backgroundColor = 0xFFFFCC;

            super.validateNow();
        }

    }
}

即使没有数据，我也想更改前三列中所有单元格的背景颜色（正如我在上面的代码中尝试的那样）。最初我尝试使用 SetStyle 在列级别设置颜色，但遇到了一些问题。所以想改变方法。下面的链接将为您提供有关该问题的详细信息：

flex中的datagrid提前水平滚动时背景颜色消失