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

开发 后端
Flex DataGrid背景颜色调试的方法你是否了解,这里和大家分享一下如何改变Flex DataGrid单元格(cell),列(column)和行(row)的背景颜色,希望对你有所帮助。

本文和大家重点讨论一下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()进行重写,具体代码如下:

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

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

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

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

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

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

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

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

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

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

  1. <mx:Flex DataGridColumnheaderText="Make"dataField="col1"> 
  2. <mx:itemRenderer> 
  3. <mx:Component> 
  4. <mx:Label><!--usinglabelasitemRenderer--> 
  5. <mx:Script><![CDATA[  
  6. overridepublicfunctionsetdata(value:Object):void  
  7. {  
  8. super.data=value;  
  9. if(value.col1=='Toyota'){  
  10. this.opaqueBackground=0xCC0000;  
  11. }  
  12. }  
  13. ]]></mx:Script> 
  14. </mx:Label> 
  15. </mx:Component> 
  16. </mx:itemRenderer> 
  17. </mx:Flex DataGridColumn> 
  18.  

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

  1. <mx:Flex DataGridColumnheaderText="Year"dataField="col3"> 
  2. <mx:itemRenderer> 
  3. <mx:Component> 
  4. <mx:Flex DataGridItemRenderer>
  5. <!--usingFlex DataGridItemRendererasitemRenderer--> 
  6. <mx:Script><![CDATA[  
  7. overridepublicfunctionsetdata(value:Object):void  
  8. {  
  9. super.data=value;  
  10. if(value.col3>=2000){  
  11. this.background=true;  
  12. this.backgroundColor=0x00cc00;  
  13. }  
  14. }  
  15. ]]></mx:Script> 
  16. </mx:Flex DataGridItemRenderer> 
  17. </mx:Component> 
  18. </mx:itemRenderer> 
  19. </mx:Flex DataGridColumn> 
  20.  

【编辑推荐】

  1. 定义Flex DataGrid组件样式外观方法指导
  2. 常用FlexBuilder快捷键用法指导
  3. Flex框架Riawave的定制应用
  4. 技术前沿 Flex2.0 从零开始实现文件上传
  5. FlexBuilder开发方法及特点解析 

 


 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-11 16:41:30

Flex DataGr

2021-04-16 05:54:05

CSS 文字动画技巧

2024-01-30 13:53:31

2010-08-13 14:39:57

Flex布局

2022-12-26 11:25:25

CSS黑白文字

2010-07-28 13:48:49

Flex数据绑定

2010-08-11 16:10:27

Flex DataGr

2010-08-06 14:13:31

FlexDataGrid分页控

2010-08-09 14:54:58

Flex全屏

2010-08-11 16:03:02

Flex DataGr

2024-05-08 08:42:58

TypeScript函数文本颜色

2010-08-13 13:39:51

Flex效果组件

2010-08-04 11:04:58

Flex框架

2010-07-30 13:15:17

Flex优势

2010-07-29 15:44:54

Flex安全沙箱

2010-07-29 14:58:49

Flex全屏模式

2010-08-05 13:33:06

Flex布局规则

2010-07-27 13:53:15

Flex ComboB

2010-08-09 10:34:05

Flex背景

2010-08-03 11:29:09

Flex全屏
点赞
收藏

51CTO技术栈公众号