flex DataGrid行着色的实现(rowcolor)

废话不说，看代码:

package
{
	import flash.display.Sprite;
	
	import mx.controls.DataGrid;

	public class RowColorDataGrid extends DataGrid
	{
		public function RowColorDataGrid()
		{
			super();
		}
		
		override protected function drawRowBackground(s:Sprite,rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
			if(dataIndex<super.dataProvider.length){
				super.drawRowBackground(s, rowIndex, y, height, 0x49FFAD, dataIndex);
			}else{
				super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
			}
		}
	}
}

先自定义一个DataGrid类，该类继承自DataGrid类。然后在自己的代码中引用该类即可，如下：

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:probe="*">

    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>[e-mail]</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>[e-mail]</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>[e-mail]</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>[e-mail]</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

    <mx:Panel title="行着色DataGrid" height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">
        <probe:RowColorDataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
            <probe:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </probe:columns>
        </probe:RowColorDataGrid>

        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Name">
                <mx:Label text="{dg.selectedItem.name}"/>
            </mx:FormItem>
            <mx:FormItem label="Email">
                <mx:Label text="{dg.selectedItem.email}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone">
                <mx:Label text="{dg.selectedItem.phone}"/>
            </mx:FormItem>
        </mx:Form>
        
    </mx:Panel>
</mx:Application>

效果在附件中可查看.