中国领先的IT技术网站
|
|

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

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

作者:mayewangxing来源:csdn.net|2010-08-11 16:30

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


本文和大家重点讨论一下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.  

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开发方法及特点解析 


【责任编辑:程华权 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

计算机病毒分析与防治简明教程

本书全面翔实地介绍了各种病毒的原理,以操作系统的发展为主线,结合病毒的发展过程来综合分析病毒。在分析工具上,较多地利用了脚本语言、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言