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>[email protected]</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>[email protected]</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>[email protected]</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>[email protected]</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>

効果は添付ファイルで表示できます.