ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기

이전 포스팅에 그리드 리스트 출력에 관하여 알아보았습니다.

간단하게 2~3개정도의 데이터만을 가지고 예를들어 별도의 페이징 처리를 하지 않았습니다.

만약 데이터가 100개,1000개,3000개등.. 데이터갯수가 많을 경우에는??? 페이징처리를 해야겠죠?

그래서 이번 포스팅은 그리드패널에 페이징툴바를 적용하여 

페이징기능을 구현해보도록 하겠습니다.

DB연동은 하지않고 진행하겠습니다.

※ 실질적으로 DB연동해서 페이징 처리 및 CRUD 기능들에 대해서는 MVC 포스팅시간에 다루도록 하겠습니다!!

임의로 DB(?)데이터가 10개가 등록되어있다고 가정을 하겠습니다.

이전 포스팅에서 ajax콜을하여 작성한 샘플코드를 변경해보도록 하겠습니다.

2014/11/03 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자

그리드 페이징툴바 샘플 스크립트 코드

Ext.onReady(function(){
	var store = Ext.create("Ext.data.Store",{
						autoLoad : true,
						//기존코드에 추가된 부분
						pageSize: 2,
						fields : ['blogger_id','blogger_name','blogger_url'],
						proxy : {
							type : 'ajax',
							api : {
								read : '/grid_res_paging.jsp'
							},
							reader : {
								type : 'json',
								//정의하지 않을경우 default 'success'라는 값 set
								successProperty : "success_flag",
								rootProperty : 'grid_item',
								//정의하지 않으면 default로 'total'이라는 값 set
								totalProperty : 'total_count'
							}
						}
				});
	
	Ext.create("Ext.grid.Panel",{
		renderTo : Ext.getBody(),
		title : '그리드 ajax페이징 설명',
		width : 600,
		height : 300,
		columns : [{
			text : '블로거아이디',
			flex : 1,
			dataIndex : 'blogger_id'
		},{
			text : '블로거닉네임',
			flex : 1,
			dataIndex : 'blogger_name'
		},{
			text : '블로그주소',
			flex : 1,
			dataIndex : 'blogger_url'
		}],
		store : store,
		//페이징툴바추가
		dockedItems : [
		               {
		            	   xtype : 'pagingtoolbar',
		            	   //dock은 위치지정이 가능
		            	   dock : 'bottom',
		            	   //gridpanel의 스토어와 동일한 데이터스토어 set
		            	   store : store,
		            	   displayInfo : true,
		            	   displayMsg: '{0} - {1} / 총 게시물 : {2}',
		                   emptyMsg: "데이터가 없습니다"
		               }
        ]
	})
})

위 코드를 보시면 크게 3가지의 코드가 적용되었습니다.

1. 데이터 스토어를 변수에 담다

별도로 그리드패널과 페이징툴바영역내에 store를 각각 적용해도 무관하지만

하나의 데이터 스토어를 이용하기 위하여 변수에 담아서 같은 저장공간을 사용하기위하여 정의

2. 스토어에 추가된 totalProperty 속성 및 pageSize속성

페이징 처리를 위해서 꼭 필요한 속성은 아닙니다. default로 이미 정의되어있긴 합니다.

만약 위 속성들을 정의하지않는다면 default 값들은

totalProperty : 'total'

pageSize : 25

이 되겠습니다.

둘다 정의하지 않아도 되겠지만 임의로 10개의 데이터로 페이징처리를 하는것을 보여주기위하여 pageSize속성을 2개로 잡아보았습니다.

3. dockeditems 속성을 정의

 페이징툴바 컴포넌트를 적용하기 위한 속성값입니다.

displayMsg에 정의한 0/1/2에 대한 치환자의 해석은

{0} - 현재 출력된 데이터의 시작값

{1} - 현재 출력된 데이터의 마지막값

{2} - 데이터의 총 갯수

그리고 emptyMsg 속성은 데이터의 총갯수가 0일경우 나타내기 위한 메시지속성입니다.

이제 그리드컴포넌트의 목록출력을 위하여 코드에서 정의한 

서버페이지(grid_res_paging.jsp)에 다음과 같은 코드를 작성해보겠습니다.

그리드 페이징 처리를 위한 서버페이지 grid_res_paging.jsp 샘플코드

JSONArray jsonArray = new JSONArray();
	JSONObject jsonGridRootObject = new JSONObject();
	JSONObject jsonGridObject = null;
	
	//데이터스토어의 pageSize 속성에 정의된 숫자값(한페이지에 몇개의 데이터를 출력할것인지)
	String limit = request.getParameter("limit");
	// start에 들어가는 값은
	// 1page : 0 * limit
	// 2page : 1 * limit
	// 3page : 2 * limit
	// 위처럼 1,2,3 증가하는 숫자값이 아니고 0,1,2로 증가되는 인덱스값의 계산을 합니다.
	String start = request.getParameter("start");
	
	int pageNum = (Integer.parseInt(start) / Integer.parseInt(limit));
	
	//1페이지일경우
	if(pageNum == 0) {
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "1page-guklife");
		jsonGridObject.put("blogger_name", "1page-국이");
		jsonGridObject.put("blogger_url", "1page-guklife.tistory.com");
		jsonArray.add(jsonGridObject);
		
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "1page-hellogk");
		jsonGridObject.put("blogger_name", "1page-개발로짜");
		jsonGridObject.put("blogger_url", "1page-hellogk.tistory.com");
		jsonArray.add(jsonGridObject);
	//2페이지일 경우
	} else if(pageNum == 1) {
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "2page-guklife");
		jsonGridObject.put("blogger_name", "2page-국이");
		jsonGridObject.put("blogger_url", "2page-guklife.tistory.com");
		jsonArray.add(jsonGridObject);
		
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "2page-hellogk");
		jsonGridObject.put("blogger_name", "2page-개발로짜");
		jsonGridObject.put("blogger_url", "2page-hellogk.tistory.com");
		jsonArray.add(jsonGridObject);
	//3페이지일경우
	} else if(pageNum == 2) {
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "3page-guklife");
		jsonGridObject.put("blogger_name", "3page-국이");
		jsonGridObject.put("blogger_url", "3page-guklife.tistory.com");
		jsonArray.add(jsonGridObject);
		
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "3page-hellogk");
		jsonGridObject.put("blogger_name", "3page-개발로짜");
		jsonGridObject.put("blogger_url", "3page-hellogk.tistory.com");
		jsonArray.add(jsonGridObject);
	//4페이지일경우
	} else if(pageNum == 3) {
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "4page-guklife");
		jsonGridObject.put("blogger_name", "4page-국이");
		jsonGridObject.put("blogger_url", "4page-guklife.tistory.com");
		jsonArray.add(jsonGridObject);
		
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "4page-hellogk");
		jsonGridObject.put("blogger_name", "4page-개발로짜");
		jsonGridObject.put("blogger_url", "4page-hellogk.tistory.com");
		jsonArray.add(jsonGridObject);
	//5페이지일 경우
	} else if(pageNum == 4) {
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "5page-guklife");
		jsonGridObject.put("blogger_name", "5page-국이");
		jsonGridObject.put("blogger_url", "5page-guklife.tistory.com");
		jsonArray.add(jsonGridObject);
		
		jsonGridObject = new JSONObject();
		jsonGridObject.put("blogger_id", "5page-hellogk");
		jsonGridObject.put("blogger_name", "5page-개발로짜");
		jsonGridObject.put("blogger_url", "5page-hellogk.tistory.com");
		jsonArray.add(jsonGridObject);
	}
	
	jsonGridRootObject.put("success_flag", true);
	jsonGridRootObject.put("grid_item", jsonArray);
	//데이터 목록의 총 데이터수를 넘겨주어야 한다
	jsonGridRootObject.put("total_count", 10);
	response.setContentType("text/plain; charset=UTF-8");
	PrintWriter pw = response.getWriter();
	pw.print(jsonGridRootObject);
	pw.flush();
	pw.close();

위 코드를 보시면 이전 ajax 샘플코드에 추가로 

분기로 임의의 데이터를 json object를 만들어서 response해주게끔 변경을 하였습니다.

한번 실행을 해보겠습니다.

그리드패널 + 페이징툴바 실행결과

1페이지

2페이지

3페이지

4페이지

5페이지

실행결과 페이징기능이 정상적으로 구현된 것을 확인 할수 있었습니다.

등록/수정/삭제 및 DB를 이용한 조회 기능은 초반에 말씀드렸다시피

 MVC구조에 대한 개념을 익힌 후에 

웹어플리케이션 샘플예제를 진행할때 다루도록 하겠습니다.

by 개발로짜