本文共 4520 字,大约阅读时间需要 15 分钟。
在Flex运用中经常提到的有关DataGrid问题是如何改变DataGrid单元格(cell),列(column)和行(row)的背景颜色(backgroundcolor)
这里对这3种颜色做一个总结。 1. 设置行(row)的背景色主要是通过对DataGrid扩展,对protected函数drawRowBackground()进行重写,具体代码如下:override protected function drawRowBackground(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) {//set color accordint to datas super.drawRowBackground(s,rowIndex,y,height,0xC0C0C0,dataIndex); } else { super.drawRowBackground(s,rowIndex,y,height,color,dataIndex); }} 这段代码中根据DataGrid的数据源进行判断来设置背景色,但是它有个缺陷,就是这个具体的背景色我们无法自己灵活指定。因此派生出新的CustomRowColorDataGrid,具体代码如下:package cwmlab.controls{ import mx.controls.*; import flash.display.Shape; import mx.core.FlexShape; import flash.display.Graphics; import flash.display.Sprite; import mx.rpc.events.AbstractEvent; import mx.collections.ArrayCollection; import flash.events.Event; /** * This is an extended version of the built-in Flex datagrid. * This extended version has the correct override logic in it * to draw the background color of the cells, based on the value of the * data in the row. **/ public class CustomRowColorDataGrid extends DataGrid { private var _rowColorFunction:Function; public function CustomRowColorDataGrid() { super(); } /** * A user-defined function that will return the correct color of the * row. Usually based on the row data. * * expected function signature: * public function F(item:Object, defaultColor:uint):uint **/ public function set rowColorFunction(f:Function):void { this._rowColorFunction = f; } public function get rowColorFunction():Function { return this._rowColorFunction; } /** * Draws a row background * at the position and height specified using the * color specified. This implementation creates a Shape as a * child of the input Sprite and fills it with the appropriate color. * This method also uses the <code>backgroundAlpha</code> style property * setting to determine the transparency of the background color. * * @param s A Sprite that will contain a display object * that contains the graphics for that row. * * @param rowIndex The row's index in the set of displayed rows. The * header does not count, the top most visible row has a row index of 0. * This is used to keep track of the objects used for drawing * backgrounds so a particular row can re-use the same display object * even though the index of the item that row is rendering has changed. * * @param y The suggested y position for the background * @param height The suggested height for the indicator * @param color The suggested color for the indicator * * @param dataIndex The index of the item for that row in the * data provider. This can be used to color the 10th item differently * for example. */ override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number, height:Number, color:uint, dataIndex:int):void { if( this.rowColorFunction != null ){ if( dataIndex < this.dataProvider.length ){ var item:Object = this.dataProvider.getItemAt(dataIndex); color = this.rowColorFunction.call(this, item, color); } } super.drawRowBackground(s, rowIndex, y, height, color, dataIndex); } }}在具体使用过程中可以这样调用:<cwmlab:CustomRowColorDataGrid dataProvider="{dp}" rowColorFunction="setCustomColor">private function setCustomColor(item:Object, color:uint):uint{ if( item['col3'] >= 2000 ) { return 0xFF0033; } return color;} 2. 设置DataGrid列的背景色这个很简单,只要设置DataGridColumn的属性backgroundColor="0x0000CC"即可。 3. 设置DataGrid单元格(cell)的背景色这个主要通过itemRenderer进行设置,itemRenderer可以是Label,也可以是其他如DataGridItemRenderer。先看看用Label如何设置背景色<mx:DataGridColumn headerText="Make" dataField="col1"> <mx:itemRenderer> <mx:Component> <mx:Label> <!--using label as itemRenderer--> <mx:Script><![CDATA[ override public function set data(value:Object):void { super.data = value; if(value.col1 == 'Toyota'){ this.opaqueBackground =0xCC0000; } } ]]></mx:Script> </mx:Label> </mx:Component> </mx:itemRenderer></mx:DataGridColumn>用DataGridItemRenderer进行背景色设置如下:<mx:DataGridColumn headerText="Year" dataField="col3"> <mx:itemRenderer> <mx:Component> <mx:DataGridItemRenderer><!--using DataGridItemRenderer as itemRenderer--> <mx:Script><![CDATA[ override public function set data(value:Object):void { super.data = value; if(value.col3 >= 2000){ this.background = true; this.backgroundColor =0x00cc00; } } ]]></mx:Script> </mx:DataGridItemRenderer> </mx:Component> </mx:itemRenderer></mx:DataGridColumn>转载地址:http://ypbli.baihongyu.com/