データグリッドの特定のセルの背景色を設定する方法。アイテムレンダラーで試してみました。しかし、アイテムレンダラーの問題は、データがデータグリッドに取り込まれていない限り、背景色が機能しないことです。データグリッドにデータがない場合でも、セルまたはセルのセットを強調表示したい。
以下の私のコードを見つけてください：
メイン.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();
}
}
}
データがない場合でも、最初の3列のすべてのセルの背景色を変更したい(上記のコードで試したように)。最初に SetStyle を使用して列レベルで色を設定しようとしましたが、いくつかの問題に直面しました。そのため、アプローチを変更することを考えました。以下のリンクは、その問題に関する詳細を提供します。