오랫만에 ExtJS에 관해서 포스팅을 하게되었습니다!!
ㅜ.ㅜ 한동안 jQuery 소개하는거만 올려서 ㅠ,ㅠ ㅋ
오늘은 전에 작성했던 Grid panel 그 두번째 방식에 대해서 작성을 하도록 하겠습니다.
'다'나'까'는 빼도록 하겠음..
첫번째 방식은 memory방식을 했었고~
이번시간에는 proxy type이 ajax인 그리드 패널을 테스트 해보기로 하겠음!!
Ajax를 이용하여 그리드에 데이터를 뿌리는데 json 타입으로 list만 뿌려보자!!!
Create
Read
Update
Destroy
방식중 이번시간에는 서버페이지에서 ajax Read 해서 그리드에 뿌리는 방식을 해보겠다.
그외의 Create/Update/Destory는 그리드 게시판 예제를 진행할때 한꺼번에 진행 하고자 한다.
jsp 기준! 해당 라이브러리를 받아서 연동테스트를 따라하시길..
php부분은 자체적으로 json_encode인가 지원해주는게 있는걸로 알고 있음.
본인은 jsp로 샘플링 하는거라 jsp 개발하시는 분들일 경우 다음 라이브러리를
다운받으셔서 lib 디렉토리에 넣으세요
https://code.google.com/p/json-simple/downloads/detail?name=json-simple-1.1.1.jar&can=2&q=
현재 최종버전은 json-simple-1.1.1.jar 네요...
자그럼 기존 샘플을 가지고 추가 작업을 진행 ㄱㄱ
전에 memory타입 소스를 기준으로 약간만 변경할것임
memory로 강제로 grid store안에 데이터를 고정해서 뿌렸다면, 이번방식은 ajax를통해서 json방식으로 서버에서 던져줘서 해당 값을 자동적으로 grid내에 뿌리는 연동을 해본다.
아직 기존 ExtJS 연동준비가 안되어 있으시다면 해당 링크로 세팅을 하신후
2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]
링크(이전강좌인 memory 타입의 grid 포스팅)의 소스를 약간 변경하여 만들어 보도록 하겠음..
2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!
비록 결과 위주로 보여주는 방식이지만 처음부터 천천히 진행하고 소스 분석을 하신다면 이해는
모두들 금방하실거라 믿습니다.
기존에 있던 data 속성값을 빼고 해당 부분은 gridData.jsp라는 페이지에서 ajax 호출하여
json값을 return 받아 자동으로 그리드에 뿌려줄 것이다.
여기에서 약간 수정해주어야 할 부분이 있다.
store 속성에 autoLoad : true를 주어야 한다.
그래야지 화면이 onLoad되면서 자동으로 ajax 통신이 이루어져 그리드 내에 데이터를 뿌려준다.
그리고 proxy json 속성값 중에서
type이 'memory' 인 부분은 'ajax' 라고 변경을 해준다.
그리고 추가로 필요한 속성은
url / reader이다.
url은 비동기 방식으로 json을 불러오 주소이다.
reader는 json을 읽어올때 필요한 속성값이다.
db에서 예를 들면 select 구문을 처리할때 사용하는 속성값이다.
reader json내에 다양한 속성값들이 또한 존재하지만
type / root 속성만 이용하기로한다.
뜨문뜨문 설명만 하니 도통 무슨이야기인지 모르겠다.
이전 소스와 변경된 소스를 비교분석 해보자.
store부분만 비교하도록 하겠다.
1. memory type
store : Ext.create('Ext.data.Store',{ fields : [ { name : 'title1' }, { name : 'title2' } ], //data json배열은 그리드내에 뿌려질 데이터 목록을 의미한다. data : [ { title1 : '첫번째 값', title2 : '두번째 값' } ], //별도의 호출이 필요없으므로 proxy type을 memory로 함 proxy : { type : 'memory' } })
2. ajax type
store : Ext.create('Ext.data.Store',{ fields : [ { name : 'title1' }, { name : 'title2' } ], // ajax타입으로 load시 자동으로 화면에 뿌려주기 위해서는 // autoload 속성값을 true로 주어야 한다. autoLoad: true, proxy: { //기존 memory -> ajax 타입으로 변경 type: 'ajax', //비동기방식 호출 URL url: '/gridData.jsp', //reader가 있어야 서버에서 받은 //데이터목록객체를 읽을수 있다. reader: { // json 방식으로 받을것임 type: 'json', // json object의 key값을 'item'이라고 정함 root: 'item' } } })
무언가 조금 변경이 되었다.
2. ajax type의 조건변경은 다음과 같다.
ajax 방식으로 gridData.jsp를 호출하여 json object를 가져올것이다.
단, json key값이 item인 json 객체를 읽음.
그렇다면 마지막으로 json 객체를 생성해보자
위에 이미지 출력시킨 gridData.jsp 출력물 그대로 만들것이다.
import할 json객체 패키지는 org.json.simple이다.
spring으로 예를 하려면 json simple을 이용하셔도 되고 spring에서 자주 설명하는 jacson인가
그걸 사용해도 됨 php는 json_encode??? 그걸 사용하면 될것임..
그럼 json 파싱 소스내용이다.
// jsonObj는 최상단 root key값이 될 객체 JSONObject jsonObj = new JSONObject(); // jsonArray에 각각의 값을 담아줄 json 객체 JSONObject jsonObj2 = null; // jsonObj2에서 담아서 json 리스트 객체에 담는다. JSONArray jsonArr = new JSONArray(); // 각각 신규 생성하여 jsonarray에 추가추가 jsonObj2 = new JSONObject(); jsonObj2.put("title1", "title1111"); jsonObj2.put("title2", "title2222"); jsonArr.add(jsonObj2); // 각각 신규 생성하여 jsonarray에 추가추가 jsonObj2 = new JSONObject(); jsonObj2.put("title1", "title3333"); jsonObj2.put("title2", "title4444"); jsonArr.add(jsonObj2); // 각각 신규 생성하여 jsonarray에 추가추가 jsonObj2 = new JSONObject(); jsonObj2.put("title1", "title5555"); jsonObj2.put("title2", "title6666"); jsonArr.add(jsonObj2); // 각각 신규 생성하여 jsonarray에 추가추가 jsonObj2 = new JSONObject(); jsonObj2.put("title1", "title1111"); jsonObj2.put("title2", "title2222"); jsonArr.add(jsonObj2); //클라이언트쪽 root 값에 맞춰주어야 하므로 key값을 item이라 정함 jsonObj.put("item", jsonArr); //마지막으로 내보냄 PrintWriter pw = response.getWriter(); pw.print(jsonObj); pw.flush(); pw.close();
다음과 같이 작성이 완료되고 실행을 하면 다음과 같이 출력이 될것이다.
서버측 콘솔을 통하여 json타입을 문자열로 찍어본거고 크롬브라우저에서는 각각의 데이터들이
잘 나온것을 확인 할 수 있었다
참고해야할점은
jsonarray에 담은 jsonobject들에 대한 key = Ext.data.store -> fields -> name
이어야 한다!! 명심하도록 하자
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[ExtJS강좌9] 폼을 화면에 출력하기 (1) (6) | 2014.06.24 |
---|---|
[ExtJS강좌 8]그리드패널 - reconfigure dynamic column 컬럼 재설정하기 (6) | 2014.06.23 |
[ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!! (2) | 2014.06.09 |
[ExtJS강좌 5] 다이얼로그창 띄우기 (0) | 2014.06.06 |
[ExtJS강좌 4] 윈도우 화면 띄우기!! (0) | 2014.06.06 |
가끔가다 테이블의 정렬순서를 변경할 때가 존재한다.
이럴때 버튼클릭으로 순서를 바꾼다던지,
아니면 정렬 text값을 직접 지정해줘야 한다던지...
이런식으로 할때도 있지만
이왕이면 좀더 깔끔하게 drag&drop기능을 사용하여
순서를 변경시켜보자~
우선은 가상의 테이블 리스트를 html 소스로 짜보자
HTML 코드
<ul id="sortable"> <li>홍길동</li> <li>이순신</li> <li>스티븐잡스</li> <li>웨인루니</li> </ul>
위의 소스는 가상의 테이블 리스트이다.
하지만 해당 소스로만 뿌리면 화면이 기본적인 목록으로만 뽑힌다.
별로 어떻게 나뉘는지도 모르겠고 그냥 심플하게 css를 주기로 한다.
나는 미적감각이 없으니 그냥 눈으로 확인할수 있는 정도로만 스타일을 주도록.. ㅋㅋ
CSS에 들어갈 STYLE 코드
li { list-style: none; border-width: 1px; border-style: solid; border-color: red; padding : 10px; }
위의 css를 적용하면
다음과 같이 화면이 조금 바뀌었다.
이제는 드래그 기능을 적용 시켜보도록 해보자
적용 스크립트는 다음처럼 작성해주면 되겠다.
$(function(){ $( "#sortable" ).sortable(); })
해당 스크립트 코드만 적용해주면 각각의 row가 드래그가 된다.
실행화면
이동 깔끔하게 잘~ 된다 ..
만약 div나 li태그가 아닌 테이블의 tr을 드래그 하고싶다면 ?
↓↓↓↓↓↓
위 포스팅을 보도록 하자 ^^
jQueryUI의 탭기능을 이용하여 컨텐츠를 나눠보도록 해보자 (0) | 2014.06.20 |
---|---|
jQueryUI tooltip함수를 이용하여 영역에 포커스 발생시 말풍선을 띄우기 (0) | 2014.06.20 |
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
우선 하단 그림처럼 2개의 탭을 생성후
각각의 영역에 컨텐츠 내용을 삽입한다 가정해보도록 하자
HTML 코드
<div id="tabs"> <ul> <li><a href="#tab-1">첫번째탭</a></li> <li><a href="#tab-2">두번째탭</a></li> <li><a href="#tab-3">세번째탭</a></li> </ul> <div id="tab-1">첫번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용</div> <div id="tab-2">두번째 탭내용</div> <div id="tab-3">세번째 탭내용</div> </div>
위 구조로 탭이 구성되어진다
타이틀에 해당하는 부분은 div > ul > li영역에 속하는 태그이고
컨텐츠에 해당되는 부분들은 div -> div로 되있는 태그이다.
연결점은 어떻게 잡는가?
타이틀에 보면 <a href="#tab-1"> <<< 이부분이 있는데 a 태그의 <a href="#탭컨텐츠 id"> 값으로 맵핑이 되는거 같다.
해당 구조대로 html코드를 완료하였으면 스크립트 코드도 작성해보도록 하자 .
역시, 기본 코드는 한줄이면 된다.
스크립트 코드
$(function(){ $( "#tabs" ).tabs(); })
위처럼 호출을하면 tabUI 적용이 완료!!
ID가 tabs인 영역은 탭 타이틀과 컨텐츠 타이틀을 동시에 감싸는 부모 태그의 id를 의미
한다.
실행결과
어우~ 내가 만든 테마는 너무 눈이 어지럽다 .... 3D화면 같네;;;
ajax로 불러오는 것도 있는데 해당부분은 데모샘플을 보면서 하도록 하자~
정렬순서를 바꾸고싶다면 jQueryUI의 드래그앤드롭기능을 이용하자 (0) | 2014.06.20 |
---|---|
jQueryUI tooltip함수를 이용하여 영역에 포커스 발생시 말풍선을 띄우기 (0) | 2014.06.20 |
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
툴팁이란?
마우스를 해당 이미지화면이나 특정 대상에 가져다 놓으면 해당 대상에 대한 세부 설명이 나오는 것
스크립트 코드
$(function(){ $( document ).tooltip(); })
스크립트는 한줄이면 되는애 기존처럼 id를 생성하는게 아니라 document에 주었다.
documnet에 주면 body페이지 모든 태그중 title이란 속성값이 존재하는 태그들에 마우스를 올려놓으면 툴팁기능이 동작하는것이다.
html 코드
툴팁 테스트입니다.<br/> <a href="http://www.naver.com" title="네이버사이트로 가는링크">네이버이동</a><br/><br/><br/><br/> <a href="http://www.daum.net" title="다음으로 가봅시다">다음이동</a>
툴팁에 대해서는 별다른 설명이 필요없을거 같다.
실행화면으로 마무리 하겠음.
실행화면
onload 화면
네이버이동 문구에 마우스 오버시켜보기
다음이동 문구에 마우스 오버시켜보기
정렬순서를 바꾸고싶다면 jQueryUI의 드래그앤드롭기능을 이용하자 (0) | 2014.06.20 |
---|---|
jQueryUI의 탭기능을 이용하여 컨텐츠를 나눠보도록 해보자 (0) | 2014.06.20 |
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
이번 코드는 초반에 JQUERYUI의 연동법을 테스트 하신후 이어서 진행하시길
위의 링크내용에 추가로 레이어 팝업 관련 내용만 적어보겠다.
1. 우선 버튼태그는 UI까지 적용된 상태라면 다음은 레이어팝업으로 띄워줄 div 코드를 짜보도록 해보자
추가 HTML 코드
<!-- 상단 BUTTON 태그클릭시 보여줄 레이어팝업 태그 --> <div id="dialog" title="레이어팝업 제목"> 해당부분은 레이어 팝업의 내용이다. br태그없이 알아서 자동 줄바꿈 처리가 되있음.... </div>
위에보면 div의 title속성이 있는데 해당 속성값은 모달창에 보여줄 타이틀 영역이다.
그리고 <div></div> 코드내에 서술되있는 내용은 모달창에서 보여지는
내용들이다.
화면사이즈에 따라 자동으로 글자 조절이 가능하다
코드를 작성했으면 이제 저 div태그에 레이어팝업 UI를 적용시켜보도록 하자
스크립트 코드
//레이어팝업 UI 생성후 화면에 안보여주기 $( "#dialog" ).dialog({ //이벤트 발생했을때 보여주려면 autoOpen : false로 지정해줘야 한다. autoOpen: false, //레이어팝업 넓이 width: 400, //뒷배경을 disable 시키고싶다면 true modal: true, //버튼종류 buttons: [ { //버튼텍스트 text: "Ok", //클릭이벤트발생시 동작 click: function() { $( this ).dialog( "close" ); } }, { //버튼텍스트 text: "Cancel", //클릭이벤트발생시 동작 click: function() { $( this ).dialog( "close" ); } } ] });
위와같이 스크립트 코드를 짯으면 div레이아웃에 레이아웃팝업 UI가 적용된것이다.
하지만 버튼 클릭시 화면에 띄워줄것이므로 속성값인 autoOpen값은 false로 주었다.
만들자 마자 보여주고 싶다면 autoOpen을 true로 주면 될것이다.
그리고 modal창으로 띄워주기 위해 modal 속성을 true로 주었다.
이제는 버튼 클릭이벤트를 발생시켜 div레이아웃을 띄워보도록 하자
//버튼 클릭이벤트시, 숨어있는 레이어팝업 오픈하기 $("#button").click(function(){ $( "#dialog" ).dialog( "open" ); });
실행화면
onload화면
레이어팝업띄우기 버튼 클릭후 화면
레이어팝업 사이즈 조절한 화면
레이어팝업 닫기 이벤트 발생 화면
jQueryUI의 탭기능을 이용하여 컨텐츠를 나눠보도록 해보자 (0) | 2014.06.20 |
---|---|
jQueryUI tooltip함수를 이용하여 영역에 포커스 발생시 말풍선을 띄우기 (0) | 2014.06.20 |
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |
jQueryUI를 이용하여 자동완성 구현하기(2) - Ajax 비동기통신 (7) | 2014.06.19 |