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

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



click="clickEventHandler(event)" 라고 정의하여 해당 DataGrid 가 클릭되었을때 clickEventHandler() 메소드를 호출하게 됩니다.
이 해당 메소드는 다음과 같이 정의하였습니다.


하지만 위의 처리방식에는 문제가 있습니다.
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 이벤트가 발생됩니다. 완전히 해결은 안되는군요. 의견주신 유영상님 감사드립니다. - 추가) 
아래는 최종 샘플코드입니다.





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

ps. 쓰다보니 또 길어졌네요.. 별 내용 아닌데.. ㅜㅜ
신고
시드 | 2008.04.22 15:27 신고 | PERMALINK | EDIT/DEL | REPLY
('' ) 모른척 ~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.22 17:15 신고 | PERMALINK | EDIT/DEL
ㅋㅋㅋㅋ
Favicon of http://sunyoungheo.tistory.com BlogIcon 다롱냥 | 2008.04.24 15:50 신고 | PERMALINK | EDIT/DEL | REPLY
오오.. 오킹
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 11:18 신고 | PERMALINK | EDIT/DEL
이제 itemClick 사용해보셈~
상후 | 2008.05.24 10:21 신고 | PERMALINK | EDIT/DEL | REPLY
제가찾던건데 감사합니다 잘쓰겟습니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.26 12:56 신고 | PERMALINK | EDIT/DEL
네~ 찾아와주셔서 감사합니다. ;)
지나가다 | 2009.02.04 10:56 신고 | PERMALINK | EDIT/DEL | REPLY
아이템이 클릭되면 한줄이 선택되잖아요..

그 선택되는 거 자체를 막아버리고 싶을 땐 어떻게 해야 하나요.

clickEndalbed 이런거도 없고 ㅠㅠ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.02.04 14:39 신고 | PERMALINK | EDIT/DEL
선택 못하도록 할때에는 selectable 속성을 false 로 주시면 됩니다. ;)
arang | 2009.09.16 21:09 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요.

이제 막 플렉스 입문한 초보입니다. 즐겨찾기 해놓고 자주 들러 참고하고 있습니다.

다름이 아니라 한가지 질문이 있어서 그러는데요...

DG에서 컬럼 하나만 선택하는 방법은 없나요?

예를 들면 위의 예제에서 제목(title 란)컬럼을 누르면 내용이 보이게 하고, 이름컬럼을 누르면 회원 정보가 뜨듯이 각 컬럼마다 클릭 이벤트를 따로 주고 싶은 경우가 있어서요 ^^)
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.09.17 13:51 신고 | PERMALINK | EDIT/DEL
DataGrid에 itemClik 이벤트에서 rowIndex와 columnIndex 가 있습니다. columnIndex가 실제 클릭된 컬럼의 인덱스를 의미하거든요.
DataGrid의 column 속성을 읽어 보시면 컬럼들이 눈에 보이는 순서대로 인덱싱 되어있으므로 이용해보시는 것도 좋겠네요.
Favicon of http://singblog.net BlogIcon sing | 2009.10.08 23:35 신고 | PERMALINK | EDIT/DEL | REPLY
플렉스로 메뉴를 만들려고 하는데 너무 안되서 이렇게 검색검색 하다가
님 블러그까지 왔는데 잠깐보시구요 도움좀 부탁드립니다..
2틀동안 참 많이 해맸습니다..

플렉스로 이쁜 메뉴를 만들려고 합니다..

http://www.nosmoke.or.kr/

여기 사이트처럼요..

플렉스 빌더를 설치하고 메뉴 모양만 비슷하게...
http://expertfo.cafe24.com/4nonsmokers/menu/menu_Pro.html

이렇게 간단하게 만들었는데요

궁금한것이 위 제가 만든페이지에서 보조메뉴를 클릭했을때

새로운 페이지로 링크를 걸고 싶은데 그게 안됩니다...
님처럼 어떤 항목을 클릭햇을때 새창으로 다른페이지가 떠야하는데
저도 함수를 써서 했는데 안되네요...흑

아래 보죠메뉴 클릭했을때 링크를 할수 있는 방법 좀 부탁드립니다...
혹여나 http://www.nosmoke.or.kr/

여기사이트의 메뉴는 플래쉬로 만든것이겠죠???
플렉스로도 만들수있을것 같은데 도움좀 부탁드립니다..


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="15" cornerRadius="20" height="149" x="173" y="57">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

public function link2():void{
var urlRQ:URLRequest = new URLRequest();

urlRQ.url= "http://naver.com";
navigateToURL(urlRQ, "_new");
}

private function menuHandler(event:MenuEvent):void{
//Alert.show("Label: " + event.item. @label + "\n" +
// "Data: " + event.item. @data, "Clicked menu item");
var urlRQ:URLRequest = new URLRequest();

urlRQ.url= "http://naver.com";
navigateToURL(urlRQ, "_new");
}
]]>
</mx:Script>
<mx:MenuBar y="10" id="myMenuBar" labelField="@label" width="468" height="43" horizontalCenter="-10" fontSize="15" cornerRadius="5" textAlign="center">
<mx:XMLList>
<menuitem label="NonSmokers">
<button label="테스트" click="link2();"/>
<menuitem label="소개" itemClick="link2();"></menuitem>
<menuitem label="업데이트" click="menuHandler(event);"></menuitem>
</menuitem>

<menuitem label="금연정보">
<menuitem label="새소식"/>
<menuitem label="금연의 필요성"/>
<menuitem label="금연보건소"/>
</menuitem>

<menuitem label="정보교환">
<menuitem label="금연일기"/>
<menuitem label="금연 성공사례"/>
<menuitem label="금연 상담"/>
</menuitem>

<menuitem label="추천제품">
<menuitem label="쇼핑몰"/>
</menuitem>

<menuitem label="커뮤니티">
<menuitem label="사는이야기"/>
<menuitem label="의견좀"/>
</menuitem>
</mx:XMLList>
</mx:MenuBar>
</mx:Application>
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.10.09 01:18 신고 | PERMALINK | EDIT/DEL
새로운 창을 띄우는 것은 navigateToURL 를 이용하시면 되겠고, 서브메뉴에 클릭시에 navigateToURL 를 이용하도록 구현하면 됩니다. 단, navigateToURL 에 두번째 파라미터로 어떻게 띄울지 설정할 수 있으니 Livedocs 를 참고하시기 바랍니다.
참고로, 메뉴 같은 것은 Flex 보다는 flash 로 만들어서 사용하시는 것이 더 깔끔합니다. 저도 프로젝트 수행시에 위와 같은 메뉴는 Flash 로 제작하여 SWFLoader를 이용해 불러서 사용했습니다.

그리고 덧글을 너무 길게 달아주시면 곤란하니, 덧글의 소스는 지워주시면 감사하겠습니다. 이메일로 보내주시면 답변드리고 있으니 다음 부터는 장문의 질문의 경우 이메일로 보내주세요 ;)
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret

티스토리 툴바