Flex DataGrid背景色如何調(diào)試

這篇文章主要為大家展示了“Flex DataGrid背景色如何調(diào)試”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“Flex DataGrid背景色如何調(diào)試”這篇文章吧。

Flex DataGrid背景顏色調(diào)試

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

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

主要是通過對Flex DataGrid擴展，對protected函數(shù)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);  }  }

這段代碼中根據(jù)Flex DataGrid的數(shù)據(jù)源進行判斷來設(shè)置背景色，但是它有個缺陷，就是這個具體的背景色我們無法自己靈活指定。因此派生出新的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);  }  }  }

在具體使用過程中可以這樣調(diào)用：

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

2.設(shè)置Flex DataGrid列的背景色

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

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

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

先看看用Label如何設(shè)置背景色

<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進行背景色設(shè)置如下：

<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背景色如何調(diào)試”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！