[ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!

오랫만에 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

이어야 한다!!  명심하도록 하자

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!