DataGrid는 다음과 같이 간편하게 표형식의 데이터를 화면에 출력할 수 있습니다.
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="{init()}" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" borderStyle="solid"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; private var blogData:XML = <ROOT> <ITEM NAME="지돌스타" URL="http://blog.jidolstar.com" /> <ITEM NAME="열이아빠" URL="http://koko8829.tistory.com" /> <ITEM NAME="우야꼬" URL="http://www.as3.kr" /> <ITEM NAME="검쉰" URL="http://blog.flashplatform.kr" /> </ROOT>; private function init():void { myDG.dataProvider = blogData.ITEM; } ]]> </mx:Script> <mx:DataGrid id="myDG" left="10" right="10" top="10" height="128"> <mx:columns> <mx:DataGridColumn headerText="이름" width="100" dataField="@NAME"/> <mx:DataGridColumn headerText="주소" dataField="@URL"/> </mx:columns> </mx:DataGrid></mx:Application>

<mx:DataGrid id="myDG" click="clickEventHandler(event)" > <mx:columns> <mx:DataGridColumn headerText="No" dataField="Num" width="30" textAlign="center"/> <mx:DataGridColumn headerText="title" dataField="title" textAlign="left"/> <mx:DataGridColumn headerText="Name" dataField="Name" width="80" textAlign="left"/> </mx:columns> </mx:DataGrid>

click="clickEventHandler(event)" 라고 정의하여 해당 DataGrid 가 클릭되었을때 clickEventHandler() 메소드를 호출하게 됩니다.
이 해당 메소드는 다음과 같이 정의하였습니다.
private function clickEventHandler(evt:MouseEvent):void { var target:DataGrid = evt.currentTarget as DataGrid; var contentURL:String = target.selectedItem.url as String; navigateToURL(new URLRequest(contentURL), "_blank"); // 선택된 글을 새창으로 띄우기 Alert.show("새창으로 글을 띄웠습니다.", "안내"); // 에러시 출력되지 않음. }

하지만 위의 처리방식에는 문제가 있습니다.
clickEventHandler() 메소드에서 DataGrid의 selectedItem 속성을 이용하여 선택된 아이템에 접근하게 되는데, 만약 아무런 값이 없는 곳을 클릭한다면 어떻게 될까요? 이 때도 click 이벤트는 발생하게 되어 clickEventHandler() 메소드가 호출되겠지만, 선택된 아이템이 없으니 selectedItem 은 null 이 되게 됩니다. 그렇기에 위의 소스 6번째 줄의 selectedItem.url에서 에러가 발생하게 됩니다.
(헤더를 클릭해도 에러가 납니다. -- 추가)

물론 try catch 문을 이용하여 에러처리를 하면 됩니다만, 발생할 것이 예상되는 에러를 예외처리한다는 것은 그리 권장할 만한 방법이 아닙니다.

에러가 발생하지 않으면 Alert 창이 떠야하지만, 에러가 발생해서 Alert 창이 뜨지 않습니다. debug 용 flash player 를 설치하신 분은 다음의 에러메세지를 보실 수 있습니다.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="500" height="200" backgroundColor="#cccccc"> <mx:Script> <![CDATA[ import mx.controls.Alert; import flash.net.navigateToURL; import mx.events.ListEvent; public function init():void { var dummyData:Array = [{Num:'1', title:'드림위버에서 AIR application을 개발해보자 #1', Name:'검쉰', url:'http://warkyman.tistory.com/149'}, {Num:'2', title:'드림위버에서 AIR application을 개발해보자 #2', Name:'검쉰', url:'http://warkyman.tistory.com/150'}, {Num:'3', title:'수동으로 이벤트 발생시키기 - dispatchEvent()', Name:'검쉰', url:'http://warkyman.tistory.com/146'}, {Num:'4', title:'일정시간 후에 자동으로 종료되는 Alert', Name:'검쉰', url:'http://warkyman.tistory.com/137'}]; myDG.dataProvider = dummyData; } private function itemClickEventHandler(evt:ListEvent):void { var target:DataGrid = evt.currentTarget as DataGrid; var contentURL:String = target.selectedItem.url as String; navigateToURL(new URLRequest(contentURL), "_blank"); // 선택된 글을 새창으로 띄우기 Alert.show("새창으로 글을 띄웠습니다.", "안내"); // 에러시 출력되지 않음. } ]]> </mx:Script> <mx:DataGrid id="myDG" itemClick="itemClickEventHandler(event)" fontSize="12" left="10" right="10" textAlign="center" top="30" bottom="10"> <mx:columns> <mx:DataGridColumn headerText="No" dataField="Num" width="30" textAlign="center"/> <mx:DataGridColumn headerText="title" dataField="title" textAlign="left"/> <mx:DataGridColumn headerText="Name" dataField="Name" width="80" textAlign="left"/> </mx:columns> </mx:DataGrid> <mx:Label x="10" y="10" text="itemClick Event 사용" fontWeight="bold" fontSize="12"/> </mx:Application>

다음의 포스팅은 Peter Ent 블로그의 Coloring the Background of Cells 포스트의 검쉰 맘대로 해석판입니다.
말이 안되게 타이프 해놓은 것도 있으니(ㅡㅡ;) 그러려니... 하여 주세요 ;)

아래의 결과물은 해당 포스트의 소스를 빌드하여 올려보았습니다.



2. 컬럼에 직접 배경색을 지정하기
   (backgroundColor Tab 참고)



단지 컬럼의 모든 Cell에 배경색을 지정하고 싶은 것이라면 아이템 렌더러를 만들 필요는 없습니다.
아래와 같이 데이터그리드(Datagrid) 컬럼에 있는 backgroundColor 속성을 이용하면 쉽게 가능합니다.


0xCC0000은  빨강색(■) 입니다. backgroundColor Tab에서 Make 컬럼에 적용되어 있습니다.
backgroundColor="red" 같은 경우도 가능합니다.



3. drawColumnBackground function을 재정의하여 배경색에 alpha 값을 주기
   (backgroundAlpha Tab 참고)



데이터그리드(Datagrid) 컬럼은 투명도(Alpha)를 주는 속성이 없습니다.
하지만  데이터그리드(Datagrid)에 있는 drawColumnBackground function을 재정의하여 투명도를 줄 수 가 있습니다.
데이터그리드(Datagrid)를 상속받아서 만든 Class에서 아래와 같이 drawColumnBackground function을 재정의 합니다.


하지만 위의 코드에서는 투명도가 0.5로 하드코딩 되어 있으므로 권장할 만한 코드가 안됩니다.
그래서 다음과 같이 Class 내에 투명도를 저장할 변수 columnBackgroundAlpha를 정의합니다.


그리고 재정의한 drawColumnBackground function의 코드를 변수 columnBackgroundAlpha에 의해
투명도를 변경할 수 있도록 다음과 같이 수정합니다.


외부에서 투명도는 아래와 같이 변경 할 수 있습니다.




4. drawRowBackground function을 재정의하여 row에 배경색을 주기
   (Custom Row Background Tab 참고)


특정 컬럼이 아닌 한 줄(row)의 배경색을 바꾸려면 데이터그리드(Datagrid)를 상속받은 Class에서
아래와 같이 drawRowBackground function을 재정의 하여 배경색을 바꿀 수 있습니다.

year의 값이 2000년 이전이면 오렌지색, 2000년 이후면 흰색, 값이 없으면 녹색으로 출력하도록 하였습니다.


하지만, 위의 코드는 색깔과 기준값들이 하드코딩되어 있어 권장할만한 코드가 못됩니다.
이 때, 배경색으로 쓰일 색을 외부에서 따로 구현할 수 있도록 하여 해결하도록 하겠습니다.

외부의 function을 쓰기 위해 Class에 아래와 같이 속성을 하나 추가하겠습니다.


그리고 아래와 같이 color값을 위에서 만든 Function에서 받아올 수 있도록 하여 줍니다.


그리고 아래와 같이 rowColorFunction에 외부의 function을 지정하여 주고,


지정된 determineColor function은 아래와 같이 정의합니다.


이제 정의 하였던 Class 외부에서 rowColorFunction에 알맞는 function을 정의하여 배경색을 변경 할 수 있게 되었습니다.