[FLEX] Datagrid 하나의 컬럼에만 링크걸기

FLEX를 사용하다보면 수많은 요청에 따라서 DataGrid를 조작해야하는 일이 생긴다.

그래서 그런지 DataGrid를 이용한 컴포넌트들이 여러곳에서 쉽기편하게 사용될수 있도록 조작되고 있는데, 그중 가장 대표적인것이 구글프로젝트에서 진행하는 TreeGrid , OpenZet.org 의 여러가지 DataGrid 관련 컴포넌트들이 있다. 하지만 이것과 달리 고객에서 요청하는 특별한 케이스의 DataGrid를 만들어야 하는 경우가 있다. 

여러가지 OpenSource를 이용하여 작업을 해도 상관은 없지만, 혹시 모를 경우를 위해서 기본 DataGrid를 이용하여 상황에 맞는 커스텀한 DataGrid를 만들어보자.

일단 그 첫번째로 DB에서 받아온 데이터를 그리드에 표시할때 하나의 셀에 컬럼을 여러개 표시하는 경우이다.

아래 주소의 레퍼런스를 참고하면 좋은 정보가 될것이다.

mx.controls.DataGrid

mx.controls.dataGridClasses.DataGridColumn

두번째 예제로 하나의 컬럼에만 링크를 거는 예제를 만들어 보았다.

위 Datagrid를 보면 No를 클릭하였을 경우엔 링크가 걸리지 않지만, NAME 컬럼을 클릭하면 새로운 창으로 링크를 연다.
여기서 링크에 관련된 부분은 아래 부분이다.

 
			public function itemClickHdlr(data:Object):void{

				var contentURL:String = data.URL;
				
				navigateToURL(new URLRequest(contentURL), "_blank"); 
				// 선택된 글을 새창으로 띄우기	
				Alert.show("새창을 띄웠습니다.", "알림");
			} 

그리고 이번 포스트의 핵심 주제인 Datagrid 부분이다.

위 소스에서 주위해서 봐야 하는 부분이 있는데 바로 Label 필드의 click 이벤트 부분이다.
itemRenderer를 사용할 경우 본문의 Script 문의 함수를 가져다 쓸 경우 outerDocument.itemClickHdlr(data) 이런 식으로 쓴다는 것을 기억하자.
(공통되는 부분을 이렇게 사용하면 좋을 것같다. 이것을 몰라서 20개가 넘는 itemRenderer안에 하나하나 Script를 썼던 적이 있다..  혼자 개 고생 한건가???)

아래는 전체 소스이다.