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 개발로짜

클라이언트들이 목록의 정렬순서를 변경할 수 있게 해달라는 요구사항이 들어오곤합니다.

대부분 목록 옆에 화살표아이콘을 이용하여 클릭시 한줄씩 이동시키게 하거나 

 input text태그를 만들어서 정렬순서를 입력하게끔 하는 방식을 가~~끔 보았습니다.

하지만 jQueryUI에서는 sortable이라는 함수를 이용하여 드래그앤드롭으로 목록의 순서를 변경이 가능합니다.

우선 HTML 태그를 작성해보도록 합니다.

<h2>목록 정렬순서 변경하기</h2>
<div id="sortable">
	<div>첫번째목록</div>
	<div>두번째목록</div>
	<div>세번째목록</div>
	<div>네번째목록</div>
</div>

위와같이 코드를 작성한 다음 간단하게 스타일을 입혀보도록 하겠습니다.

#sortable div { 
	margin: 0 3px 3px 3px; 
	padding: 0.4em;  
	height: 18px; 
	border-style: solid;
	border-width: 1px; 
	background-color: yellow; 
}

마지막으로 sortable 함수를 스크립트상에서 호출하도록 합니다.

$(function(){
	$("#sortable").sortable();
})

sortable 함수 호출하는 셀렉터는 목록을 감싸고 있는 부모태그를 정의해주어야 합니다.

실행결과를 확인해보겠습니다.

드래그앤드롭 기능을 이용하여 정상적으로 목록순서가 변경이 완료 되었습니다.

table태그로는 sortable 기능이 제대로 동작되지 않습니다.

table 태그목록의 순서를 변경하고 싶으시다면 하단 포스팅을 참고해주세요

2014/10/15 - [코드저장소/jQuery 플러그인] - jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기

by 개발로짜

포스팅 진행방식이 restful 방식이라 확장자 없이 컨트롤러 호출이 가능합니다.

하지만 js/css/html/이미지 파일등을 컨트롤러로 인식을 한다는 문제점이 있습니다.

확인해보도록 하겠습니다.

webapp 디렉토리에 이미지 파일들을 아무거나 붙여넣기를 해봅니다.

그리고 webapp디렉토리에 index.jsp의 body태그에 하단 코드를 작성해봅니다.

index.jsp body태그 추가코드

<img width="200" height="200" alt="" src="/test.jpg">

위와같이 img 태그를 작성 후 실행을 해보았습니다.

실행결과 404 (not found) 결과가 출력되면서 이미지출력이 제대로 이루어지지 않습니다.

이미지 파일뿐 아니더라도 js파일,css파일등 모두 잘못된 페이지로 인식을 합니다.

이미지를  부분을 해결해야 하면 어떻게 해야 하나?

webapp 디렉토리 하단에 리소스파일들만 모아놓는 디렉토리를 추가합니다.

저같은 경우 resource 라고 디렉토리 생성을 하였습니다.

resource 디렉토리 생성후 방금전 오류가 났던 이미지파일을 resource 디렉토리 내에 이동시킵니다.

mvc-config.xml에 다음 코드를 추가합니다.

리소스 파일 인식을 시켜주기 위한 mvc-config.xml 코드추가

<mvc:resources mapping="/resource/**" location="/resource/" />

mvc:resources의 속성을 간단히 알아보자면

location : 실제 리소스파일들이 들어있는 디렉토리경로

mapping : 클라이언트 페이지(JSP)에서 지정해주는 리소스 디렉토리

mvc:resources 태그를 하단처럼 정의했다면

<mvc:resources mapping="/app/**" location="/resources/" />

실제 리소스 파일들이 존재하는 디렉토리는 resources이고 

jsp페이지에 만약 img 태그의 위치를 정의해준다고 가정한다면

<img src="/app/xxx.jpg" /> 처럼 사용을 하시면 됩니다.

보통은 mapping의 디렉토리와 location의 디렉토리명을 일치시켜줍니다.

<img width="200" height="200" alt="" src="/resource/test.jpg">

이미지파일을 resource디렉토리로 이동시켰으니 

src 속성에 resource디렉토리로 재설정을 해준 다음 재실행 해보았습니다.

실행결과 정상적으로 리소스 파일을 출력 할 수 있었습니다.

마지막으로 favicon.ico 설정을 잡아보도록 하겠습니다.

동일하게 mvc:resources 태그를 이용하여 설정이 가능합니다.

 favicon 아이콘파일은 webroot에 보통 존재하므로 

사용할 favicon.ico 파일을 webapp 디렉토리 밑에 위치 시킨 다음

다음코드를 작성해주면 정상적으로 favicon 적용이 가능합니다.

하단코드는 특정 1개의 리소스파일을 적용할때 사용하시면 되겠습니다.

favicon.ico 적용코드

<mvc:resources mapping="/favicon.ico" location="/favicon.ico" />

적용결과

by 개발로짜