[Flex3.0] 데이터그리드 컬럼에 스타일명 개별 설정하기.

데이터 그리드의 컬럼마다 스타일을 다르게 주고자 한다.
다소 허접한 방법이지만, 컬럼별 아래방법으로 각각의 스타일명을 설정 할 수 있다.

package common
{
 import mx.controls.dataGridClasses.DataGridColumn;
 import mx.styles.CSSStyleDeclaration;
 import mx.styles.StyleManager; public class DataGridColumn extends    mx.controls.dataGridClasses.DataGridColumn
 {
  public function DataGridColumn(columnName:String=null)
  {
   super(columnName);
  }
  
  private function styleChange():void{
   var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("."+_styleName);
   if(style == null) return;
   var obj:uint = style.getStyle("backgroundColor");
   if(obj == 0 || isNaN(obj)) return;
   this.setStyle("backgroundColor", obj);
  }
  
  private var _styleName:String;
  private var styleNameChange:Boolean;
  
  public function set styleName(name:String):void{   
   if(this._styleName == name) return;
   this._styleName = name;
   this.styleChange();
  }
  
  public function get styleName():String{
   return this._styleName;
  }
 }
}

위와 같이 간단하게 만들면 사용하는곳에서

css

.editColumn{
 backgroundColor:#ff0000;
}

사용

<mx:DataGrid>
  <mx:columns>
   <mx:DataGridColumn/>
   <mx:DataGridColumn />
   <com:DataGridColumn styleName="editColumn"/>
  </mx:columns>
 </mx:DataGrid>

위에서는 backgroundColor만 하였지만
좀더 스타일 항목을 추가하고자 하면
DataGridColumn 에서 지원하는 스타일을 구현하면 되고
지원하지 않는건 직접 구현하시면 되겠습니다.