解析三大FlexDataGrid背景色调试方法

本文和大家重点讨论一下Flex DataGrid背景颜色调试，在Flex运用中经常提到的有关Flex DataGrid问题是如何改变Flex DataGrid单元格(cell)，列(column)和行(row)的背景颜色(backgroundcolor)这里对这3种颜色做一个总结。

我们提供的服务有：成都网站设计、做网站、微信公众号开发、网站优化、网站认证、鄱阳ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的鄱阳网站制作公司

Flex DataGrid背景颜色调试

在Flex运用中经常提到的有关Flex DataGrid问题是如何改变Flex DataGrid单元格(cell)，列(column)和行(row)的背景颜色(backgroundcolor)这里对这3种颜色做一个总结。

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

主要是通过对Flex DataGrid扩展，对protected函数drawRowBackground()进行重写，具体代码如下：

 
 
 
    
  
  
  
  1. overrideprotectedfunctiondrawRowBackground(s:Sprite,rowIndex:int,
    2.   
  
  
  2. y:Number,height:Number,color:uint,dataIndex:int):void  
    3.   
  
  
  3. {  
    4.   
  
  
  4. if(dataIndex>=dataProvider.length){  
    5.   
  
  
  5. super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
    6.   
  
  
  6. return;  
    7.   
  
  
  7. }  
    8.   
  
  
  8. if(dataProvider.getItemAt(dataIndex).col3<2000){//setcoloraccordinttodatas  
    9.   
  
  
  9. super.drawRowBackground(s,rowIndex,y,height,0xC0C0C0,dataIndex);  
    10.   
  
  
  10. }else{  
    11.   
  
  
  11. super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
    12.   
  
  
  12. }  
    13.   
  
  
  13. }  
    14.   
  
  
  14.  
    15.

 这段代码中根据Flex DataGrid的数据源进行判断来设置背景色，但是它有个缺陷，就是这个具体的背景色我们无法自己灵活指定。因此派生出新的CustomRowColorFlex DataGrid，具体代码如下：

 
 
 
    
  
  
  
  1. packagecwmlab.controls  
    2.   
  
  
  2. {  
    3.   
  
  
  3. importmx.controls.*;  
    4.   
  
  
  4. importflash.display.Shape;  
    5.   
  
  
  5. importmx.core.FlexShape;  
    6.   
  
  
  6. importflash.display.Graphics;  
    7.   
  
  
  7. importflash.display.Sprite;  
    8.   
  
  
  8. importmx.rpc.events.AbstractEvent;  
    9.   
  
  
  9. importmx.collections.ArrayCollection;  
    10.   
  
  
  10. importflash.events.Event;  
    11.   
  
  
  11. /**  
    12.   
  
  
  12. *Thisisanextendedversionofthebuilt-inFlexFlex DataGrid.  
    13.   
  
  
  13. *Thisextendedversionhasthecorrectoverridelogicinit  
    14.   
  
  
  14. *todrawthebackgroundcolorofthecells,basedonthevalueofthe  
    15.   
  
  
  15. *dataintherow.  
    16.   
  
  
  16. **/  
    17.   
  
  
  17.  
    18.   
  
  
  18. publicclassCustomRowColorFlex DataGridextendsFlex DataGrid  
    19.   
  
  
  19. {  
    20.   
  
  
  20. privatevar_rowColorFunction:Function;  
    21.   
  
  
  21. publicfunctionCustomRowColorFlex DataGrid()  
    22.   
  
  
  22. {  
    23.   
  
  
  23. super();  
    24.   
  
  
  24. }  
    25.   
  
  
  25. /**  
    26.   
  
  
  26. *Auser-definedfunctionthatwillreturnthecorrectcolorofthe  
    27.   
  
  
  27. *row.Usuallybasedontherowdata.  
    28.   
  
  
  28. *  
    29.   
  
  
  29. *expectedfunctionsignature:  
    30.   
  
  
  30. *publicfunctionF(item:Object,defaultColor:uint):uint  
    31.   
  
  
  31. **/  
    32.   
  
  
  32.  
    33.   
  
  
  33. publicfunctionsetrowColorFunction(f:Function):void  
    34.   
  
  
  34. {  
    35.   
  
  
  35. this._rowColorFunction=f;  
    36.   
  
  
  36. }  
    37.   
  
  
  37.  
    38.   
  
  
  38. publicfunctiongetrowColorFunction():Function  
    39.   
  
  
  39. {  
    40.   
  
  
  40. returnthis._rowColorFunction;  
    41.   
  
  
  41. }  
    42.   
  
  
  42.  
    43.   
  
  
  43. /**  
    44.   
  
  
  44. *Drawsarowbackground  
    45.   
  
  
  45. *atthepositionandheightspecifiedusingthe  
    46.   
  
  
  46. *colorspecified.ThisimplementationcreatesaShapeasa  
    47.   
  
  
  47. *childoftheinputSpriteandfillsitwiththeappropriatecolor.  
    48.   
  
  
  48. *ThismethodalsousesthebackgroundAlphastyleproperty  
    49.   
  
  
  49. *settingtodeterminethetransparencyofthebackgroundcolor.  
    50.   
  
  
  50. *  
    51.   
  
  
  51. *@paramsASpritethatwillcontainadisplayobject  
    52.   
  
  
  52. *thatcontainsthegraphicsforthatrow.  
    53.   
  
  
  53. *  
    54.   
  
  
  54. *@paramrowIndexTherow'sindexinthesetofdisplayedrows.The  
    55.   
  
  
  55. *headerdoesnotcount,thetopmostvisiblerowhasarowindexof0.  
    56.   
  
  
  56. *Thisisusedtokeeptrackoftheobjectsusedfordrawing  
    57.   
  
  
  57. *backgroundssoaparticularrowcanre-usethesamedisplayobject  
    58.   
  
  
  58. *eventhoughtheindexoftheitemthatrowisrenderinghaschanged.  
    59.   
  
  
  59. *  
    60.   
  
  
  60. *@paramyThesuggestedypositionforthebackground  
    61.   
  
  
  61. *@paramheightThesuggestedheightfortheindicator  
    62.   
  
  
  62. *@paramcolorThesuggestedcolorfortheindicator  
    63.   
  
  
  63. *  
    64.   
  
  
  64. *@paramdataIndexTheindexoftheitemforthatrowinthe  
    65.   
  
  
  65. *dataprovider.Thiscanbeusedtocolorthe10thitemdifferently  
    66.   
  
  
  66. *forexample.  
    67.   
  
  
  67. */  
    68.   
  
  
  68.  
    69.   
  
  
  69. overrideprotectedfunctiondrawRowBackground(s:Sprite,rowIndex:int,
    70.   
  
  
  70. y:Number,height:Number,color:uint,dataIndex:int):void  
    71.   
  
  
  71. {  
    72.   
  
  
  72. if(this.rowColorFunction!=null){  
    73.   
  
  
  73. if(dataIndex  
  
  
  74. varitem:Object=this.dataProvider.getItemAt(dataIndex);  
    75.   
  
  
  75. color=this.rowColorFunction.call(this,item,color);  
    76.   
  
  
  76. }  
    77.   
  
  
  77. }  
    78.   
  
  
  78. super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);  
    79.   
  
  
  79. }  
    80.   
  
  
  80. }  
    81.   
  
  
  81. }  
    82.   
  
  
  82.  
    83.

 在具体使用过程中可以这样调用：

 
 
 
    
  
  
  
  1.   
  
  
  2.  
    3.   
  
  
  3. rowColorFunction="setCustomColor"> 
    4.   
  
  
  4. privatefunctionsetCustomColor(item:Object,color:uint):uint  
    5.   
  
  
  5. {  
    6.   
  
  
  6. if(item['col3']>=2000)  
    7.   
  
  
  7. {  
    8.   
  
  
  8. return0xFF0033;  
    9.   
  
  
  9. }  
    10.   
  
  
  10. returncolor;  
    11.   
  
  
  11. }  
    12.   
  
  
  12.  
    13.

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

这个很简单，只要设置Flex DataGridColumn的属性backgroundColor="0x0000CC"即可。

3.设置Flex DataGrid单元格(cell)的背景色

这个主要通过itemRenderer进行设置，itemRenderer可以是Label，也可以是其他如Flex DataGridItemRenderer。

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.   
  
  
  5.   
  
  
  6. overridepublicfunctionsetdata(value:Object):void  
    7.   
  
  
  7. {  
    8.   
  
  
  8. super.data=value;  
    9.   
  
  
  9. if(value.col1=='Toyota'){  
    10.   
  
  
  10. this.opaqueBackground=0xCC0000;  
    11.   
  
  
  11. }  
    12.   
  
  
  12. }  
    13.   
  
  
  13. ]]> 
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.

 用Flex DataGridItemRenderer进行背景色设置如下：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
    5.   
  
  
  5.  
    6.   
  
  
  6.   
  
  
  7. overridepublicfunctionsetdata(value:Object):void  
    8.   
  
  
  8. {  
    9.   
  
  
  9. super.data=value;  
    10.   
  
  
  10. if(value.col3>=2000){  
    11.   
  
  
  11. this.background=true;  
    12.   
  
  
  12. this.backgroundColor=0x00cc00;  
    13.   
  
  
  13. }  
    14.   
  
  
  14. }  
    15.   
  
  
  15. ]]> 
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
  20.  
    21.

文章题目：解析三大FlexDataGrid背景色调试方法
分享地址：http://www.shufengxianlan.com/qtweb/news17/492917.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

自适应网站知识

行业网站建设

关键词排名优化　　 　东电技改　　 　成都网站维护　　 　Android开发　　 　网络推广外包　　 　高防机房　　 　网站建设公司　　 　乐山电信机房　　 　成都网站设计　　 　小谭网创广告　　 　网站排名优化　　 　成都定制高级网站建设　　 　成都雪糕加盟　　 　广安园林景观设计　　 　泽君科技　　 　绵阳网站建设公司　　 　四川绵阳主机托管　　 　成都网站推广　　 　香港虚拟主机空间　　 　成都展柜定制