flex DataGrid行シェーディングの実装(rowcolor)
くだらないことは言わないで、コードを見てください.
まず、DataGridクラスをカスタマイズします.このクラスはDataGridクラスから継承されます.次に、クラスを独自のコードで参照すると、次のようになります.
効果は添付ファイルで表示できます.
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>
効果は添付ファイルで表示できます.