Flex-DataGridを設定し、行のスタイルを選択します.

この例では、ユーザがカスタマイズしたitem renderを使用して、DataGridの中の行を選択するスタイルをどのように設定するかを示します.この例を見てください.
まず基本的な界面構造を構築します.一つはいくつかの列のDataGridだけです.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute" width="300" height="125">
  <mx:DataGrid width="100%" height="100%">
    <mx:columns>
      <mx:DataGridColumn headerText="First Name" dataField="firstName"/>
      <mx:DataGridColumn headerText="Last Name" dataField="lastName"/>
      <mx:DataGridColumn headerText="Age" dataField="age"/>
      <mx:DataGridColumn headerText="Sex" dataField="sex"/>
    </mx:columns>
  </mx:DataGrid>
</mx:Application>

 その後、いくつかの初期データをDataGridに導入します.ここでは、プログラムローディング初期化時に、creationCompleet関数が実行されるときに、私たちがデータを導入する関数initを呼び出します.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="300" height="125" creationComplete="init()">

これらの変数はgrid中のdatafieldに対応する変数をいくつか追加した.具体的には以下の通りです

<mx:Script>
<![CDATA[
 import mx.collections.ArrayCollection;
 
 [Bindable]
 private var peeps:ArrayCollection;

 private function init():void
 {
   peeps = new ArrayCollection();
   peeps.addItem({firstName: "Handsome", lastName: "Dude", age: 24, sex: "male"});
   peeps.addItem({firstName: "Red", lastName: "Bloke", age: 25, sex: "male"});
   peeps.addItem({firstName: "Tall", lastName: "Guy", age: 25, sex: "male"});
   peeps.addItem({firstName: "Cute", lastName: "Girl", age: 24, sex: "female"});
   peeps.addItem({firstName: "Hot", lastName: "Chick", age: 24, sex: "female"});
   peeps.addItem({firstName: "Lazy", lastName: "Man", age: 25, sex: "male"});
 }
]]>
</mx:Script>

 これらのデータを実際にgridにするには、DataGridのdata Provider属性をこのデータソースに向ける必要があります.

<mx:DataGrid dataProvider="{peeps}" width="100%" height="100%">

 一番面白い部分は、私たちがある行を選択した時に、カスタムのitemRenderを作成します.ここで作成するカスタムコンポーネントはLabelです.このLabelを利用できるようにするには、Labelのset data関数を書き換えなければなりません.Labelのtext内容をあるdata Fieldの属性値に設定します.私たちのレンダーのlistData属性からdata Field属性名を取得します.カスタムのRendererは以下の通りです.

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
   width="100%" height="100%">
  <mx:Script>
   <![CDATA[
     import mx.controls.dataGridClasses.DataGridListData;
     
     override public function set data(value:Object):void
     {
       super.data = value;
       
       if(value)
       {
         var dglistData:DataGridListData = listData as DataGridListData;
         if(value[dglistData.dataField])
           this.text = value[dglistData.dataField];
       }
     }
   ]]>
 </mx:Script>
</mx:Label>

 ここで作ったのは安いitem Rendererだけです.このRendererが私達が選んだ行かどうかを確認するには、このRendererのDataがData Gridの中で選択された行のデータに対応しているかを確認しなければなりません.そのために、私たちはinitにDataGrid事件の傍受を設置しました.以下は全てのCusstomRender.mxmlです.

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
   width="100%" height="100%" creationComplete="init()">
  <mx:Script>
   <![CDATA[
     import mx.events.ListEvent;
     import mx.controls.DataGrid;
     import mx.controls.dataGridClasses.DataGridListData;
     
     private var dg:DataGrid;
     
     private function init():void
     {
       dg = listData.owner as DataGrid;
       dg.addEventListener(ListEvent.CHANGE, updateSelected);
     }
     
     override public function set data(value:Object):void
     {
       super.data = value;
       
       if(value)
       {
         var dglistData:DataGridListData = listData as DataGridListData;
         if(value[dglistData.dataField])
           this.text = value[dglistData.dataField];
         updateSelected();
       }
     }
     
     private function updateSelected(e:Event = null):void
     {
       if(!data || !dg)
         return;
       
       if(dg.selectedItem == data)
       {
         //This row is selected update stuff
         setStyle("fontWeight", "bold");
       }
       else
       {
         //This row is not selected reset stuff
         setStyle("fontWeight", "normal");
       }
     }
   ]]>
 </mx:Script>
</mx:Label>

 まず、DataGridの変数dgを追加しました.inti関数では、先に述べたlistDataを使って、gird変数がこのrenderのownerに等しいように設定しました.そしてイベントを追加して、イベントを選択し、udateSelected関数を呼び出すことができます.この関数はこの行をチェックし、表示のスタイルを更新します.もちろん、他の行が選択されると、現在の選択行のスタイルも変更されなければなりません.すなわち、初期の状態に戻ります.
 
コードダウンロード:http://www.switchonthecode.com/sites/default/files/244/source/SOTC-DataGridSelectedRow.zip
Original Paper:http://www.switchonthecode.com/tutorials/flex-datagrid-selected-row-styling