Flex DataGrid背景色如何调试

这篇文章主要为大家展示了“Flex DataGrid背景色如何调试”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Flex DataGrid背景色如何调试”这篇文章吧。

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;  }

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>

以上是“Flex DataGrid背景色如何调试”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！