解析三大Flex DataGrid背景色调试方法

本文和大家重点讨论一下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开发方法及特点解析