本文和大家重點討論一下Flex DataGrid背景顏色調試，在Flex運用中經常提到的有關Flex DataGrid問題是如何改變Flex DataGrid單元格(cell)，列(column)和行(row)的背景顏色(backgroundcolor)這里對這3種顏色做一個總結。

Flex DataGrid背景顏色調試

在Flex運用中經常提到的有關Flex DataGrid問題是如何改變Flex DataGrid單元格(cell)，列(column)和行(row)的背景顏色(backgroundcolor)這里對這3種顏色做一個總結。

1.設置行(row)的背景色

主要是通過對Flex DataGrid擴展，對protected函數drawRowBackground()進行重寫，具體代碼如下：

overrideprotectedfunctiondrawRowBackground(s:Sprite,rowIndex:int,
y:Number,height:Number,color:uint,dataIndex:int):void  
{  
if(dataIndex>=dataProvider.length){  
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
return;  
}  
if(dataProvider.getItemAt(dataIndex).col3<2000){//setcoloraccordinttodatas  
super.drawRowBackground(s,rowIndex,y,height,0xC0C0C0,dataIndex);  
}else{  
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
}  
}  
 

 這段代碼中根據Flex DataGrid的數據源進行判斷來設置背景色，但是它有個缺陷，就是這個具體的背景色我們無法自己靈活指定。因此派生出新的CustomRowColorFlex DataGrid，具體代碼如下：

packagecwmlab.controls  
{  
importmx.controls.*;  
importflash.display.Shape;  
importmx.core.FlexShape;  
importflash.display.Graphics;  
importflash.display.Sprite;  
importmx.rpc.events.AbstractEvent;  
importmx.collections.ArrayCollection;  
importflash.events.Event;  
/**  
*Thisisanextendedversionofthebuilt-inFlexFlex DataGrid.  
*Thisextendedversionhasthecorrectoverridelogicinit  
*todrawthebackgroundcolorofthecells,basedonthevalueofthe  
*dataintherow.  
**/  
 
publicclassCustomRowColorFlex DataGridextendsFlex DataGrid  
{  
privatevar_rowColorFunction:Function;  
publicfunctionCustomRowColorFlex DataGrid()  
{  
super();  
}  
/**  
*Auser-definedfunctionthatwillreturnthecorrectcolorofthe  
*row.Usuallybasedontherowdata.  
*  
*expectedfunctionsignature:  
*publicfunctionF(item:Object,defaultColor:uint):uint  
**/  
 
publicfunctionsetrowColorFunction(f:Function):void  
{  
this._rowColorFunction=f;  
}  
 
publicfunctiongetrowColorFunction():Function  
{  
returnthis._rowColorFunction;  
}  
 
/**  
*Drawsarowbackground  
*atthepositionandheightspecifiedusingthe  
*colorspecified.ThisimplementationcreatesaShapeasa  
*childoftheinputSpriteandfillsitwiththeappropriatecolor.  
*Thismethodalsousesthe<code>backgroundAlpha</code>styleproperty  
*settingtodeterminethetransparencyofthebackgroundcolor.  
*  
*@paramsASpritethatwillcontainadisplayobject  
*thatcontainsthegraphicsforthatrow.  
*  
*@paramrowIndexTherow'sindexinthesetofdisplayedrows.The  
*headerdoesnotcount,thetopmostvisiblerowhasarowindexof0.  
*Thisisusedtokeeptrackoftheobjectsusedfordrawing  
*backgroundssoaparticularrowcanre-usethesamedisplayobject  
*eventhoughtheindexoftheitemthatrowisrenderinghaschanged.  
*  
*@paramyThesuggestedypositionforthebackground  
*@paramheightThesuggestedheightfortheindicator  
*@paramcolorThesuggestedcolorfortheindicator  
*  
*@paramdataIndexTheindexoftheitemforthatrowinthe  
*dataprovider.Thiscanbeusedtocolorthe10thitemdifferently  
*forexample.  
*/  
 
overrideprotectedfunctiondrawRowBackground(s:Sprite,rowIndex:int,
y:Number,height:Number,color:uint,dataIndex:int):void  
{  
if(this.rowColorFunction!=null){  
if(dataIndex<this.dataProvider.length){  
varitem:Object=this.dataProvider.getItemAt(dataIndex);  
color=this.rowColorFunction.call(this,item,color);  
}  
}  
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
}  
}  
}  
 

 在具體使用過程中可以這樣調用：

<cwmlab:CustomRowColorFlex DataGriddataProvider="{dp}" 
 
rowColorFunction="setCustomColor"> 
privatefunctionsetCustomColor(item:Object,color:uint):uint  
{  
if(item['col3']>=2000)  
{  
return0xFF0033;  
}  
returncolor;  
}  
 

 #p#2.設置Flex DataGrid列的背景色

這個很簡單，只要設置Flex DataGridColumn的屬性backgroundColor="0x0000CC"即可。

3.設置Flex DataGrid單元格(cell)的背景色

這個主要通過itemRenderer進行設置，itemRenderer可以是Label，也可以是其他如Flex DataGridItemRenderer。

先看看用Label如何設置背景色

<mx:Flex DataGridColumnheaderText="Make"dataField="col1"> 
<mx:itemRenderer> 
<mx:Component> 
<mx:Label><!--usinglabelasitemRenderer--> 
<mx:Script><![CDATA[  
overridepublicfunctionsetdata(value:Object):void  
{  
super.data=value;  
if(value.col1=='Toyota'){  
this.opaqueBackground=0xCC0000;  
}  
}  
]]></mx:Script> 
</mx:Label> 
</mx:Component> 
</mx:itemRenderer> 
</mx:Flex DataGridColumn> 
 

 用Flex DataGridItemRenderer進行背景色設置如下：

<mx:Flex DataGridColumnheaderText="Year"dataField="col3"> 
<mx:itemRenderer> 
<mx:Component> 
<mx:Flex DataGridItemRenderer>
<!--usingFlex DataGridItemRendererasitemRenderer--> 
<mx:Script><![CDATA[  
overridepublicfunctionsetdata(value:Object):void  
{  
super.data=value;  
if(value.col3>=2000){  
this.background=true;  
this.backgroundColor=0x00cc00;  
}  
}  
]]></mx:Script> 
</mx:Flex DataGridItemRenderer> 
</mx:Component> 
</mx:itemRenderer> 
</mx:Flex DataGridColumn> 
 

【編輯推薦】

1. 定義Flex DataGrid組件樣式外觀方法指導
2. 常用FlexBuilder快捷鍵用法指導
3. Flex框架Riawave的定制應用
4. 技術前沿 Flex2.0 從零開始實現文件上傳
5. FlexBuilder開發方法及特點解析