[ExtJS강좌 12]그리드패널 - 세번째 편 ajax 그리드 페이징사용하기~

원래는 ExtJS 게시판 샘플링때 글을 올리려 하였으나, 

'한줄기빛이내려왔다'  님께서 페이징 관련 요청해주셔서 올리게 되었다.

* 포스팅에 관심가져주셔서 감사합니다 ^^ㅋ

CRUD를 작성하기에는 분량이 많고 접근하는 방법도 다양하여서 오늘은  그리드에서 페이징하는 

방법을 소개하려 한다!

이번시간 역시 심플하게 진행을 하고자 전에 설명했던 그리드에 대한 모든 내용을 이해한 후 진행

하길 희망한다.

1. 개발세팅에 필요한 내용

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

2. GridPanel에 대한 기본세팅 

2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!

3. GridPanel에 대한 Ajax 처리

2014/06/23 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!

해당 3번째까지 모두 진행이 완료되었다는 가정하에~ 진행 하도록 해보자!! 

기본적으로 이글을 읽는 대부분의 개발자분들 혹은 ExtJS로 개발을 하시는 분들은 본인들이 가지고 있는 페이징 기법들이 있을것이다.

jsp 페이징 , Spring paging, Struts2 paging, PHP paging 등등...

서버단에 대한 로직 설명은 별도로 하지 않을것이다..

본인이 편한 페이징 처리로 작업을 진행하자..

자~ 그럼 저번시간에 이은 소스에 추가적으로 페이징처리를 해보자!! 

부족하지만, 내 포스팅을 읽어주시는 분들이 계시고 방명록및 댓글에 글을 남겨주시는 분들을 위하여 열심히 진행을 해보자 ㅎㅎㅎ

기본적으로 페이징에 필요한 임시 테이블 하나를 만들어보자 

MySQL기준으로 테이블을 생성해보도록 하겠음..

DB는 알아서들 하시고...

본인이 테스트를 위해 만든 테이블은 이전에 임시로 AJAX 호출한 컬럼 2개만 생성하면 만들어 보았다.

CREATE TABLE grid_sample(
title1 VARCHAR(100),
title2 VARCHAR(100)
)

뭐 없어보이긴 하나.. 이전 시간 이어서 진행하는 설명이 제일 깔끔한거 같음!

insert할 임의의 데이터

INSERT INTO grid_sample
VALUES('타이틀1','타이틀1');
INSERT INTO grid_sample
VALUES('타이틀2','타이틀2');
INSERT INTO grid_sample
VALUES('타이틀3','타이틀3');
INSERT INTO grid_sample
VALUES('타이틀4','타이틀4');
INSERT INTO grid_sample
VALUES('타이틀5','타이틀5');
INSERT INTO grid_sample
VALUES('타이틀6','타이틀6');
INSERT INTO grid_sample
VALUES('타이틀7','타이틀7');
INSERT INTO grid_sample
VALUES('타이틀8','타이틀8');
INSERT INTO grid_sample
VALUES('타이틀9','타이틀9');
INSERT INTO grid_sample
VALUES('타이틀10','타이틀10');

우선 10개만 넣어보자 

[현재 리팩토링중인 GkSQL로 데이터 뽑은 샘플화면]

다음같은 데이터 컬럼 2개의 데이터 10개가 정상적으로 들어갔다면 이제 실질적인 소스 부분을 

진행해보도록 하자.

페이징은 크게 검색을 제외하면 대부분 2가지가 필요하다

1. 한페이지에 몇개의 데이터를 뽑을지

2. 1페이지/2페이지 클릭할때마다의 페이지 넘버값(1페이지,2페이지,3페이지....)

Ext.data.Store에서 속성값 하나가 필요하다 

뭐 없어도 되지만 ...

바로 pageSize 라는 속성값인대

이 속성을 빼고 작업을 하면 한페이지당 default 25개의 리스트를 뿌려준다.

우리는 데이터가 꼴랑 10개뿐이므로... 한페이지당 3개정도로 뿌리도록 해보자

pageSize : 3 

이라고 추가 지정해주었다.

그리도 그리드 페이징을 하려면 pagingtoolbar 라는 xtype이 필요한대 여기서도 같은 store를 

사용할 것이므로 gridpanel에 store속성에 ext.create 해주었던 store 객체를 변수로 별도로 빼자 

var str = Ext.create('Ext.data.Store',{
					fields : [
			 			{
			 				name : 'title1'
			 			},
			 			{
			 				name : 'title2'
			 			}
		 			],
		 		    autoLoad: true,
		 		    pageSize: 3,
		 		    proxy: {
		 		        type: 'ajax',
		 		        api: {
		 		        	read: '/list.jsp'
		 		        },
		 		        reader: {
		 		            type: 'json', 
                                            //있어도 그만 없어도그만
		 		            successProperty: 'success',
		 		            root: 'items',
                                            totalProperty: 'totalCount'
		 		        }
		 		    }
		 			
		 		})

저렇게 뺏다면 다음은 페이징툴바를 생성해보도록 하자 

gridpanel에 dockedItems라는 것이 있는데 extjs demo에서 쓰인다. 

dockedItems 배열속성에 페이징툴바를 넣어준다.

dockedItems : [
              {
           	   xtype : 'pagingtoolbar',
           	   dock : 'bottom',
           	   store : str,
           	   displayInfo : true,
           	   displayMsg: '현재데이터수 : {0} - {1} / 총 데이터수 : {2}',
                  emptyMsg: "데이터가 존재하지 않습니다."
              }
       ]

위와같이 주면 페이징 툴바가 생성이 된다. 

위와같이 작성을 하였다면 그리드 패널에 대한 코드는 다음과 같다.

Ext.create('Ext.grid.Panel',{
 		renderTo : Ext.getBody(),
 		columns : [
 			{
 				text : '제목1',
 				flex : 1,
 				dataIndex : 'title1'
 			},
 			{
 				text : '제목2',
 				flex : 1,
 				dataIndex : 'title2'
 			}
 		],
 		store : str,
 		dockedItems : [
              {
               //페이징 툴바
           	   xtype : 'pagingtoolbar',
           	   //그리드로부터 툴바생성위치
           	   dock : 'bottom',
           	   //store
           	   store : str,
           	   //정보 보여주기 false일 경우 하단속성은 필요없음
           	   displayInfo : true,
           	   //보여주기 메시지(데이터 존재할때)
           	   displayMsg: '현재데이터수 : {0} - {1} / 총 데이터수 : {2}',
           	   //데이터 존재하지 않을경우
               emptyMsg: "데이터가 존재하지 않습니다."
              }
       ]
 	});

여기에서 서버에서 받는 파라미터명은 다음과 같다

start -> 시작번호 (현재 3개씩 뿌려지므로 1페이지 : 0 / 2페이지 : 3/ 3페이지 6 으로 출력)

limit -> 몇개를 뿌려줄지 (store의 pageSize속성에 정의한 값을 서버에서는 limit로 받는다)

java에서는 request.getParameter("start") / request.getParameter("limit")

로받으면 각각의 값을 받을 수 있을 것이다.

php경우는 $.GET, $_POST 형식으로 받아주면 될것이다,

혹시 몰라 총카운트 구하는 샘플쿼리랑 list출력하는 샘플링 쿼리임

sql query

--총 카운트 구하는 쿼리
select count(*) cnt from grid_sample
--리스트 뽑는 쿼리
select title1, title2 from grid_sample limit "+Integer.parseInt(request.getParameter("start"))+" , "+Integer.parseInt(request.getParameter("limit"))

그렇다면 JSON result값으로 넘겨줘야 하는것은 다음과 같다.

{
	 	"items":[
	 	         {"title1":"타이틀1","title2":"타이틀1"}
	 	         ,{"title1":"타이틀2","title2":"타이틀2"}
	 	         ,{"title1":"타이틀3","title2":"타이틀3"}
	 	        ]
               ,"totalCount":10
 }

success는 없어도 그만이고... return 해주는 json 데이터는 다음과 같이만 넘겨주면 잘 동작한다.

store에서 지정해준

root key값의 value = 'items'라고 주었었다.

이부분이 그리드 한페이지에 뿌려줄 데이터이고

totalProperty가 그리드 내에서 자체적으로 페이징을 계산하기 위한 총카운트 속성값 같다.. 

(이거는 서버측에서 totalcount 때린 데이터를 json으로 넘겨주면 될것임!!)

우와~ 오늘은 엄청 길게 썻다 ;;; 

뭐 아무튼 오늘시간은 이정도면 어느정도 이해들 하실거라 믿는다...

위의 모든 내용을 요약하자면 다음과 같다.

1. 그리드 페이징은 gridpanel에 pagingtoolbar라는 xtype이 필요하다.

2. pagingtoolbar의 store = gridpanel의 store처럼 같아야함

3. store proxy에서 reader로 받는 json 명칭중 root의 value값과 totalProperty의 value값을 

   가진 json을 서버에서 가공하여 넘겨주어야 한다.

이거처럼만 작성이 완료되었다면 다음 화면처럼 잘 나올것이다!!

한페이지씩 넘기면서 화면을 봐보자 -_-ㅋ

01234

GkSQL도 리팩토링기간이라 글올릴 시간이 적은거 같다 후아후아 

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!