DataGridでItemRendererとHeaderRendererを拡張して操作する

(1)ItemRendererのクラス実装IDataRendererとIDropInListItemRendererインタフェース.
多くのflex controlクラスでは、Button、Container、TextAreaなどのIDataRendererインタフェースがデフォルトで実装されています.多くのflex controlクラスでもIDropInListItemRendererインタフェースが実装されていますが、残念ながらContainerにはデフォルトの実装はありません.私が作ったものは、絵を描く必要があるので、Canvas拡張を直接利用するには、IDropInListItemRendererインタフェースを自分で実現し、ListDataオブジェクトを取得する必要があります.

   1. private var _listData:BaseListData;  
   2.   
   3. // Make the listData property bindable.  
   4. [Bindable("dataChange")]  
   5.   
   6. public function get listData():BaseListData  
   7. {  
   8.   return _listData;  
   9. }  
  10.   
  11. public function set listData(value:BaseListData):void  
  12. {  
  13.   _listData = value;  
  14. }  

 
  例えば、Gantt図などの複雑なビューの表示を自分で制御します.これはItemRendererとHeaderRendererを拡張する必要があります.
private var _listData:BaseListData;
//Make the listData property bindable.
[Bindable("dataChange")]
public function get listData():BaseListData
{
return _listData;
}
public function set listData(value:BaseListData):void
{
_listData = value;
}
残念ながら私は最初は知らなかったので、長い時間を費やして、現在のColumn indexをどのように取得するかを探すのに費やしました.
これにより、setDataメソッドでDataGridColumnオブジェクトを次のように取得できます(AdvancedDataGridオブジェクトを使用しています):

var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid;  
//listData    IDropInListItemRenderer          
var gdgc:GanttAdvancedDataGridColumn =   
      dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn;  

 
var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid;
//listDataはIDropInListItemRendererインタフェースを実装して取得できる
var gdgc:GanttAdvancedDataGridColumn =
dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn;
(2)DataGridColumnオブジェクトを拡張して属性を増やし,パラメータを渡す.
一部のプロパティは、外部から動的に転送する必要がありますが、list dataデータに属していない部分があります.Grid Headerは、これらのデータを使用してレンダリング操作を行う必要があります.この場合、実装DataGridColumnオブジェクトを拡張し、HeaderRendererオブジェクトからこのDataGridColumnオブジェクトを取得してパラメータを取得する必要があります.
以下に拡張のAdvanceDataGridColumnを使用します.この拡張ではstartDateとlastDateの2つのプロパティが追加されます.
< gantt:GanttAdvancedDataGridColumn   id = "ganttColumn"  headerText = "Gantt"  itemRenderer = "{ganttItemEditor}"  headerRenderer = "{ganttHeaderEditor}"  minWidth = "400"/>   
id="ganttColumn"headerText="Gantt"itemRenderer="{ganttItemEditor}"
headerRenderer="{ganttHeaderEditor}"minWidth="400"/>
これにより、アプリケーションの初期化時に、このColumnを外部で設定することができます.
ganttColumn.startDate =  new  Date(startTime);  
ganttColumn.lastDate = new  Date(lastTime);  
ganttColumn.startDate = new Date(startTime);
ganttColumn.lastDate = new Date(lastTime);
HeaderRendererではsetDataメソッドで、対応するオブジェクトとパラメータを取得できます.
override   public  function  set  data(value:Object): void {  
    super.data = value;  
    var advancedDataGridColumn:GanttAdvancedDataGridColumn   
                      = value as  GanttAdvancedDataGridColumn;  
    if (advancedDataGridColumn!= null ){  
    if (advancedDataGridColumn.startDate!= null ){  
        startDate = advancedDataGridColumn.startDate;  
        lastDate = advancedDataGridColumn.lastDate;  
        render();  
    }  
    }  
}             
override public function set data(value:Object):void{
super.data = value;
var advancedDataGridColumn:GanttAdvancedDataGridColumn
= value as GanttAdvancedDataGridColumn;
if(advancedDataGridColumn!=null){
if(advancedDataGridColumn.startDate!=null){
startDate = advancedDataGridColumn.startDate;
lastDate = advancedDataGridColumn.lastDate;
render();
}
}
}
(3)labelFunctionによる表示データのフォーマット
たとえば、日付データをフォーマットしたい場合は、次のようにします.
private  function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {      
    var dateFormatter:DateFormatter = new  DateFormatter();  
    dateFormatter.formatString = "YYYY-MM-DD HH:NN";  
    var td:Date = new  Date(  new  Number(item[column.dataField]) );  
    return  dateFormatter.format( td );  
}  
private function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {
var dateFormatter:DateFormatter = new DateFormatter();
dateFormatter.formatString = "YYYY-MM-DD HH:NN";
var td:Date = new Date( new Number(item[column.dataField]) );
return dateFormatter.format( td );
}
mxのdatagridcolumnでは、このlabel functionを参照できます.
< mx:AdvancedDataGridColumn   headerText = "startTime"  dataField = "startTime"  labelFunction = "date_labelFunc"  width = "120"/>