[Flex] DataGrid 의 아이템을 클릭할때는 itemClick 이벤트를 사용하자. (Tip)

Flex 의 DataGrid 는 상당히 유용한 컴포넌트입니다. 표 형태의 데이터를 출력하기 참 좋거든요.
이때 출력된 데이터중에 어떤 한 데이터를 출력하여 그 데이터에 대해서 작업을 해야할 때가 있습니다.
예를 들어 게시판의 글을 클릭하여 그 글을 보고자 하는 App를 작성한다고 합시다.

이때 보통 아래의 소스와 같이 DataGrid의 click 이벤트를 이용합니다.

<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 를 설치하신 분은 다음의 에러메세지를 보실 수 있습니다.

TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.
 at ClickTest/clickEventHandler()
 at ClickTest/__myDG_click()

 

이런 경우 실제 필요한건 아이템을 선택하는 것이지 DataGrid를 선택하는 것이 아닙니다.
이럴때 사용하기 좋은 이벤트가 바로 itemClick 이벤트 입니다.

itemClick event 
유저가 컨트롤내의 아이템을 클릭했을 때에 dispatch됩니다.
ListEvent.ITEM_CLICK 정수는,itemClick 이벤트에 관한 ListEvent object의 type property의 값을 정의합니다. 이 이벤트는, 컨트롤내의 가시 아이템 위에서 유저가 마우스를 클릭한 것을 나타냅니다.

출처 : flexdocs.kr

click 이벤트 대신 itemClick 이벤트를 이용하여 동일한 어플을 만든다면 위와 같은 문제는 해결되게 됩니다.
(Flex 3는 아닙니다만, Flex 2 에서는 DataGrid의 Header를 클릭해도 itemClick 이벤트가 발생됩니다. 완전히 해결은 안되는군요. 의견주신 유영상님 감사드립니다. - 추가) 
아래는 최종 샘플코드입니다.

<?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>

더블클릭시 사용할 수 있는 itemDoubleClick 이벤트도 있으니 참고하시길 바랍니다.

ps. 쓰다보니 또 길어졌네요.. 별 내용 아닌데.. ㅜㅜ