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 개발로짜
ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기 (3) | 2014.11.12 |
---|---|
ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기 (12) | 2014.11.08 |
ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함) (0) | 2014.11.07 |
ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0) | 2014.11.05 |
ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10) | 2014.11.03 |
클라이언트들이 목록의 정렬순서를 변경할 수 있게 해달라는 요구사항이 들어오곤합니다.
대부분 목록 옆에 화살표아이콘을 이용하여 클릭시 한줄씩 이동시키게 하거나
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 개발로짜
jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9) | 2014.11.06 |
---|---|
jQueryUI 3장 - 다양한 레이아웃을 만들어보자(어코디언,탭,레이어팝업) (0) | 2014.11.05 |
jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기 (0) | 2014.11.04 |
jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기 (0) | 2014.11.04 |
그리드패널에서 사용되는 스토어는 "Ext.data.Store" 를 사용하지만
트리패널에서 사용되는 스토어는 "Ext.data.TreeStore"를 사용합니다.
사용되는 데이터스토어가 다르고 스토어들의 사용법 또한 살짝(?) 다릅니다.
proxy 타입이 "memory" 기준으로 설명을 드리자면
data : [{ blogger_id : 'guklife', blogger_name : '국이', blogger_url : 'guklife.tistory.com' },{ blogger_id : 'hellogk', blogger_name : '개발로짜', blogger_url : 'hellogk.tistory.com' }]
위처럼 json array 하나에 여러개의 json object를 정의하는 구조인 1:n 형식입니다.
그렇다면 트리구조일 경우에는 데이터 출력을 위해 다음과 같은 구조로 정의해줍니다.
root : { text : '1depth', expanded : true, children: [{ text:'2depth(1)', expanded: true, children:[{ text:'3depth', leaf : true }] },{ text:'2depth(2)', leaf : true }] }
위 구조는 ajax 비동기 통신할때도 동일한 구조로 진행이 되어야 합니다.
각각 설명을 해보자면
① root속성부터 트리컴포넌트 1depth 노드의 시작이다.
② 자식노드를 출력하기 위해서는 children 속성내에 json배열 형식으로 각 object 를 선언한다.
※ 속성에 알아봐야 할 중요 key 설명
text : 트리구조 출력시 화면에 노출되는 문자열(필수)
expanded : true/false boolean 형식의 값을 정의한다.
true일 경우 - 자식노드 확장
false일 경우 - 자식노드가 확장을 해놓지 않음
leaf : 마지막 노드인지 구분을 위한 속성값
역시 true/false boolean 형태
expanded 속성과 leaf 속성을 구분하여 다음의 case별로 적용해주시면 되실거 같습니다.
1. 더이상의 자식노드가 없다면? expanded 속성 생략 + leaf : true
이 경우 childrend 속성도 생략해야 하겠죠?
2. 자식노드가 존재하지만 확장을 시켜놓지 않을것이다? expanded : false
3. 자식노드가 존재하며 확장을 시켜놓겟다? expanded : true
위 3가지를 꼭 기억해주도록 합니다.
Ext.onReady(function(){ 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' } }) }) });
위처럼 단순하게 트리컴포넌트를 생성해보았습니다.
실행결과를 확인해 보도록 합니다.
위처럼 트리구조로 목록이 출력되었습니다.
다음으로 proxy 타입이 'ajax'인 비동기방식으로 서버통신 후
json 객체로 트리노드를 동적으로 출력해보도록 하겠습니다.
이번 json response 작업 역시 json-simple 라이브러리를 이용하여 진행하였습니다.
2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기
상단 코드중 children 속성을 ajax call 하여 json object로 받을 예정입니다.
proxy 사용방법은 기존 그리드 ajax 와 동일한 구조입니다.
일부 변경된 스크립트 코드는 다음과 같습니다.
Ext.onReady(function(){ Ext.create('Ext.tree.Panel',{ renderTo : Ext.getBody(), store : Ext.create('Ext.data.TreeStore',{ root : { text : '1depth', expanded : false }, proxy : { type : 'ajax', api: { read : '/tree_result.jsp' }, reader: { type: 'json', rootProperty: 'children' } } }) }) });
root 속성의 expanded 값을 false로 정의하였습니다.
트리패널에서는 서버통신이 이루어지는 경우는
트리노드가 확장(expanded : true)이벤트가 발생할때 호출되기 때문에
눈으로 확인해보고자 false로 지정하였습니다.
true로 줄경우 onload 되자마자 바로 트리패널의 children을 ajax call을합니다.
위와같이 작업하였다면 서버 페이지 코드를 작성해보도록 합니다.
JSONObject jsonTreeRootObject = new JSONObject(); JSONArray jsonArray = new JSONArray(); JSONObject jsonTreeObject = null; JSONArray jsonTreeChildrenArray = new JSONArray(); JSONObject jsonTreeChildrenObject = null; jsonTreeObject = new JSONObject(); jsonTreeObject.put("text", "2depth(1)"); jsonTreeObject.put("leaf", true); jsonArray.add(jsonTreeObject); jsonTreeObject = new JSONObject(); jsonTreeObject.put("text", "2depth(2)"); jsonTreeObject.put("expanded", true); jsonTreeChildrenObject = new JSONObject(); jsonTreeChildrenObject.put("text","3depth(1)"); jsonTreeChildrenObject.put("leaf",true); jsonTreeChildrenArray.add(jsonTreeChildrenObject); jsonTreeChildrenObject = new JSONObject(); jsonTreeChildrenObject.put("text","3depth(2)"); jsonTreeChildrenObject.put("leaf",true); jsonTreeChildrenArray.add(jsonTreeChildrenObject); jsonTreeObject.put("children",jsonTreeChildrenArray); jsonArray.add(jsonTreeObject); jsonTreeRootObject.put("success", true); jsonTreeRootObject.put("children", jsonArray); response.setContentType("text/plain; charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.print(jsonTreeRootObject); pw.flush(); pw.close();
json 파싱코드가 기존 작업보다 상당히 길어지고 구조또한 복잡해진거 같죠?
트리의 json object는 depth 구조로 작업을 해야하기 때문입니다.
다음 구조를 보시면 이해가 되실겁니다.
추가 자식노드가 존재하는 json object에 children key값으로
json array 객체를 담는구조가 되어야합니다.
실행을 해보도록 하겠습니다.
정상적으로 ajax call이 이루어지면서 json object 데이터를 화면에 출력이 되었습니다.
트리패널을 ajax call할때 depth별 구조를 잘 잡아 주어야 하므로 json 파싱작업때 주의해주세요!!
트리패널 ajax 호출 시 expand/collapse 이벤트가 한번만 발생하고 이후 동작이 되지 않을경우
proxy속성의 동일 depth에 animate : false 속성을 추가해주도록 합니다.
by 개발로짜
ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기 (12) | 2014.11.08 |
---|---|
ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기 (0) | 2014.11.08 |
ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0) | 2014.11.05 |
ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10) | 2014.11.03 |
ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자 (0) | 2014.11.03 |