[ExtJS강좌 18]마우스 우클릭으로 메뉴생성하기 - create contextmenu

보통 일반 설치형 프로그램들을 보면 우클릭을 하여 컨텍스트 메뉴를 띄우게 된다.

이때 필요한 조건은 어떠한 영역을 지정해주어야 한다는것이다.

예를들어 트리의 노드를 우클릭한다거나 혹은 dataview의 list들을 우클릭한다를 의미한다.

아마 itemcontextmenu listener를 지원해주는 속성이라면 무엇이 되었든간에 사용이 가능하다.

본인이 알고있는선에서는 treepanel, dataview,gridpanel 이정도이다. 

itemcontextmenu 이벤트 지원여부는 

sencha에서  제공하는 documents 문서를 보면서 확인을 해야 할것이다.

http://docs-origin.sencha.com/extjs/5.0.0/apidocs/

다음 문서화면우측상단을 보면 검색창이 있는데 

본인은 treepanel을 이용하여 treepanel -> events를 확인 한 결과 

itemcontextmenu가 있다는것을 확인하였다.

즉, 우클릭으로 메뉴를 지원한다는것이다.

리스너는 언급한적이 없지만 쉽게 말해 어떤한 이벤트 동작이 발생을 할때 함수로 기능및 별도로 기능구현을 하는것을 의미한다.

리스너 역시, MVC 심플 프로젝트에서 자세히 설명하도록 하겠음.

이번장의 목표는 우클릭하여 메뉴를 띄우는것이니 신경쓰지 말고 따라하여서 결과물을 출력하는것에 의미를 두자!!!

트리패널을 다시 처음부터 제작하기 귀찮으니 

설정이 되지 않은 상태라면 다음 포스팅을 보며 설정을 한 후 진행하도록 하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

전에 만들어두었던 memory type의 트리패널에 추가로 우클릭이벤트를 등록해보자

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!!

해당 소스기준으로 진행을 해보도록 하겠다.

우선은 추가로 필요한 준비물은 다음과 같다.

1. 우클릭시 필요한 메뉴컴포넌트

2. 트리패널에서 우클릭이벤트를 받기위한 itemcontextmenu 이벤트 리스너

우선은 첫번째로 메뉴컴포넌트 하나를 별도로 생성하여 rightmenu변수에 담아놓자.

* create만 한다고 나오지는 않음.

var rightMenu = Ext.create("Ext.menu.Menu",{
					   items : [
				        	{
				                text: '우클릭 메뉴1'
				        	},
				        	{
				        		text: '우클릭 메뉴2'
				        	}
				        ]
					});

다음으로 우클릭 이벤트리스너를 treepanel에 등록을 해주자

listener속성내에 정의되어야 하는데 해당 위치는 renderTo 와 같은 depth에 추가해주자

renderTo와 같은 구조로 treepanel 일부코드를 보여주면 다음과 같다.

                 renderTo : Ext.getBody(),
                 //기존소스에 해당 부분만 추가
       		 listeners : {
		    	   itemcontextmenu : function( obj, record, item, index, e, eOpts ) {
                                   //기본 우클릭 이벤트를 막기위한 함수다.
		    		   e.stopEvent();
                                   //이번에 정의한 rightMenu변수를 보여주기 위한 showAt함수다 e.getXY()가 파라미터로 들어가있는데
                                  //브라우저상의 x/y 좌표를 계산하여 마우스 포인터에다 메뉴를 보여준다.
		    		   rightMenu.showAt(e.getXY());
			  }
		 },
                //밑에는 store 속성이 존재하겠죠??

저 리스너 속성에 itemcontextmenu 이벤트를 등록하여주고 내부적으로 코드를 짜주면 

우클릭하여 메뉴컴포넌트가 마우스 포인터로부터 출력이 된다.

한번 실행하여 확인해보자

0123

컴포넌트 관련 설명은 드디어 다음장으로 마무리 할 예정이고, 이후에 MVC에대하여 간략하게 

강의를 포스팅 한후에 본격적으로 CRUD관련 심플프로젝트를 진행 후, ExtJS는 마무리 하도록 

하겠다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!