ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기

ExtJS의 추천 기능인 컨텍스트메뉴에 대해서 포스팅 하고자 합니다.

일반적으로 jQueryUI의 경우 menu 기능을 제공하지만 

마우스 우클릭 이벤트 후 컨텍스트 메뉴를 출력하는 기능은 제공하지 않습니다.

다만, 다른 개발자들이 jQueryUI를 사용하여 CONTEXTMENU 기능을 구현한 소스는

 GITHUB에서 찾아볼 수 있답니다.

반면, ExtJS에서는 기본컴포넌트로 제공을 하니 정말 좋지않나요?? ㅎ

 itemcontextmenu라는 이벤트를 지원해주는 컴포넌트에서만 사용이 가능합니다.

자주 사용되는 컴포넌트들 중에 itemcontextmenu 이벤트를 제공해주는 컴포넌트는 다음과 같습니다.

제가 주로사용하는 컴포넌트중 우클릭이벤트를 지원하는 컴포넌트는

 dataview, treepanel, gridpanel, tablepanel에서 지원이 되네요.

    나머지는 그때그때 document api문서를 확인해봐야 겠습니다.

지난시간에 작업했던 memory 타입의 트리패널노드를 마우스 우클릭하여 컨텍스트메뉴를 띄워보도록 하겠습니다.

2014/11/07 - [웹개발강좌/ExtJS] - ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함)

Ext.onReady(function(){
   Ext.create('Ext.tree.Panel',{
     	renderTo : Ext.getBody(),
    	store : Ext.create('Ext.data.TreeStore',{
			    		root : {
			    			text : '1depth',
			    			expanded : true,
			    			children: [{
			    				text:'2depth(1)',
			    				expanded: true,
			    				children:[{
			    					text:'3depth',
			    					leaf : true
			    				}]
			    			},{
			    				text:'2depth(2)',
			    				leaf : true
			    			}]
				    	},
				    	proxy : {
	    					type : 'memory'
	    				}
			   }),
	   listeners:{
		   itemcontextmenu : function( object, record, item, index, e){
			   e.stopEvent();
			   var menu = Ext.create('Ext.menu.Menu',{
							   items : [
						        	{
						                text: '우클릭메뉴1'
						        	},
						        	{
						        		text: '우클릭메뉴2'
						        	}
						        ]
						   });
			   menu.showAt(e.getXY());
           }
	   }
	})
});

위와 같이 코드를 작성하였습니다.

기존 트리패널 코드에서 추가로 된 부분은 리스너에 이벤트 부분만 추가를 했습니다.

리스너 관련 및 설명에 대해서는 이전 도큐먼스 보는 방법에 대한 포스팅을 참고해주세요

2014/10/28 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법

itemcontextmenu라는 이벤트 자체가 마우스 우클릭이벤트 발생시 동작되는 이벤트입니다.

코드를 하나씩 본다면

① e.stopEvent() : 마우스 우클릭에 대한 이벤트를 중지합니다.

② var menu : 메뉴컴포넌트를 생성하여 menu변수에 담습니다.

③ menu.showAt() : 메뉴컴포넌트를 보여줄 위치를 결정하는 함수입니다.

④ e.getXY() : 마우스 우클릭 이벤트가 발생된 X/Y 좌표위치를 의미합니다.

실행을 한번 해보도록 합니다.

성공적으로 컨텍스트메뉴가 생성됩니다.

그런데 메뉴좌측공간이 너무 많이 띄워져 있습니다.

아이콘이 출력되는 공간인대 정의를 해주지않아서 공백으로 표시 된 것입니다.

별도로 style을 재정의해주어서 공간을 줄여주도록 하겠습니다.

.x-menu-item-text-default.x-menu-item-indent-no-separator { 
 	margin-left : 10px;
 }

위와 같이 스타일을 정의해주신 다음 재실행을 해보도록 합니다.

스타일이 적용되어서 좌측공백을 줄어든것을 확인 할 수 있었습니다.

by 개발로짜