Flex3.0 - AS3.0으로 AdvancedDataGridColumn에 itemRenderer사용하기 및 특정 데이터 넘기기 - ClassFactory & properties

AS3.0로 advancedDataGrid를 구성하고 itemRenderer를 구성해보자..

as로 advancedDataGrid를 구성하는것은 이전 블러그 글에 이미 올려져있는 사항이다..

그런데 요즘 작업 하다가 datagrid 데이터에 특정 값을 넘겨 itemRenderer를 구성하는 작업을 하다가 정말 단순하지만 어떻게 datagrid데이터 말고 다른값을 itemRenderer한데 넘길까 한참을 고민 했었다.. 생각하면 정말 단순한것이지만..ㅎㅎ

작업 소스를 전부 올리지는 못하니까 간단한 예제 형식으로 변경하여 블러그에 고고씽~~

예제 파일은 단순히 모든 itemrenderer에 데이터 값이 적용되었지만 특정항목에 classFactory와 properties를 사용해서 특정값만을 줄수 있다.

예제 파일을 올려놓고 보니까 너무 대충 만들었다.ㅋㅋ 그래도 이해를..ㅎㅎ

--------------------------------------------------------------------------------

BlogEx.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 
 <mx:Script>
  <![CDATA[
   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumnGroup;
   import mx.controls.AdvancedDataGrid;
   import itemRenderer.DataGridRenderer;
   
   import mx.collections.ArrayCollection;
   
   private var dataArr:ArrayCollection = new ArrayCollection([
          {no:"1", title:"title1", imagePath:"http://pds12.egloos.com/pds/200904/20/99/access.png"},
          {no:"2", title:"title2", imagePath:""},
          {no:"3", title:"title3", imagePath:"http://pds11.egloos.com/pds/200904/20/99/cache.png"},
          {no:"4", title:"title3", imagePath:"http://pds12.egloos.com/pds/200904/20/99/kmenu2.png"}
          ]);
          
   private function initApp():void
   {
    var adGrid:AdvancedDataGrid = new AdvancedDataGrid();
    var adGridColGroup:AdvancedDataGridColumnGroup = new AdvancedDataGridColumnGroup();
    
    var col1:AdvancedDataGridColumn = new AdvancedDataGridColumn("col1");
    col1.dataField = "no";
    col1.headerText = "NO";
    
    var col2:AdvancedDataGridColumn = new AdvancedDataGridColumn("col2");
    col2.dataField = "title";
    col2.headerText = "Title";
    
    var col3:AdvancedDataGridColumn = new AdvancedDataGridColumn("col3");
    col3.dataField = "imagePath";
    col3.headerText = "ImagePath";
    
    var render:ClassFactory = new ClassFactory(itemRenderer.DataGridRenderer);
    render.properties = {valueData:"merong~~~~"};
    
    col3.itemRenderer = render;
    
    adGridColGroup.children = [col1, col2, col3];
    
    adGrid.groupedColumns = [adGridColGroup];
    
    adGrid.dataProvider = dataArr;
    adGrid.percentWidth = 90;
    adGrid.percentHeight = 100;
    adGrid.variableRowHeight = true;
    
    this.addChild(adGrid);
   }       
          
  ]]>
 </mx:Script>
 
</mx:Application>

------------------------------------------------------------------------
itemRenderer/DataGridRenderer.as

package itemRenderer
{
 import mx.containers.HBox;
 import mx.controls.Image;
 import mx.controls.Text;
 
 public class DataGridRenderer extends HBox
 {
  private var hbx:HBox;
  private var _image:Image;
  private var _valueData:String;
  private var _text:Text;
  
  public function DataGridRenderer()
  {
   super();
   hbx = new HBox();
   hbx.percentWidth = 100;
   hbx.setStyle("horizontalAlign","center");
   hbx.setStyle("height","300");
   _image = new Image();
   _text = new Text();
   
  }
  
  public function set valueData(value:String):void
  {
   this._valueData = value; 
  }
  
  public function get valueData():String
  {
   return _valueData;
  }
  
  override public function set data(value:Object):void
  {
   super.data = value;
   
   if(super.data["imagePath"] != undefined && super.data["imagePath"] != null && super.data["imagePath"] != "")
   {
    this.removeAllChildren();
    _image.source = super.data["imagePath"];
    _text.text = _valueData;
    
    addChild(_image);
    addChild(_text);
   } else {
    this.removeAllChildren();
    _text.text = _valueData;
    addChild(_text);
   }
  }
 }
}

기본 구성을 advancedDataGridColumn에 classFactory를 itemrenderer로 추가 시키는 방식을 사용했고.
classFactory에 properties속성을 사용하여 DataGridRenderer.as get / set으로 처리..
그리 어렵지 않은 소스라 이만. 슝~~