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

간단하게 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 개발로짜

지난 시간, 콤보박스를 이용하여 간단하게 데이터스토어에 대한 개념을 익혀보았습니다.

store에 대하여 이해 하셨다면 그리드의 리스트 출력 역시 쉽게 접근하실 수 있겠습니다.

그리드 + 데이터스토어를 이용하여 

그리드패널에 리스트출력을 위한 기본적인 구조는 다음과 같습니다.

그리드패널 + 데이터스토어 기본구조

이전 콤보박스리스트를 표출하기 위해서 

combobox 2가지(displayField/valueField) 속성에 매칭을 시켜주었는데 

2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

그리드의 경우, columns->dataIndex속성값과 매칭을 시켜주시면 되겠습니다.

샘플 코드를 한번 작성해보도록 하겠습니다.

STORE PROXY 타입이 'MEMORY'를 이용한 그리드 코드

Ext.onReady(function(){
	Ext.create("Ext.grid.Panel",{
		renderTo : Ext.getBody(),
		title : '그리드 샘플화면',
		width : 500,
		height : 300,
		columns : [{
			text : '블로거아이디',
			flex : 1,
			dataIndex : 'blogger_id'
		},{
			text : '블로거닉네임',
			flex : 1,
			dataIndex : 'blogger_name'
		},{
			text : '블로그주소',
			flex : 1,
			dataIndex : 'blogger_url'
		}],
		store : Ext.create("Ext.data.Store",{ 
					//data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
					fields : ['blogger_id','blogger_name','blogger_url'],
					data : [{
						blogger_id : 'guklife',
						blogger_name : '국이',
						blogger_url : 'guklife.tistory.com'
					},{
						blogger_id : 'hellogk',
						blogger_name : '개발로짜',
						blogger_url : 'hellogk.tistory.com'
					}],
					proxy : {
						//ajax 비동기 방식을 이용
						type : 'memory'
					}
				})
	})
})

샘플코드 실행결과

정상적으로 그리드내에 목록이 

출력이 되는것을 확인 할 수 있었습니다.

콤보박스의 경우 2개의 속성으로 제어할수 있는반면, 

그리드의 경우는 지정된 columns->dataIndex 속성의 수에따라 

지정하는 갯수만큼 여러개의 key지정이 가능합니다.

이어서 위 코드를 약간 변경하여 

proxy가 'ajax'인 방식으로 

목록출력 하는 샘플을 확인해 보도록 하겠습니다.

서버페이지측 사용라이브러리는 json-simple라이브러리를 사용하였으나 

본인의 환경에 맞추어 일부 변경을 하시면 되겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(화면코드)

Ext.onReady(function(){
	Ext.create("Ext.grid.Panel",{
		renderTo : Ext.getBody(),
		title : '그리드 ajax 샘플화면',
		width : 500,
		height : 300,
		columns : [{
			text : '블로거아이디',
			flex : 1,
			dataIndex : 'blogger_id'
		},{
			text : '블로거닉네임',
			flex : 1,
			dataIndex : 'blogger_name'
		},{
			text : '블로그주소',
			flex : 1,
			dataIndex : 'blogger_url'
		}],
		store : Ext.create("Ext.data.Store",{
					autoLoad : true,
					//data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
					fields : ['blogger_id','blogger_name','blogger_url'],
					proxy : {
						//ajax 방식
						type : 'ajax',
						api : {
							//read - 응답데이터를 받아서 화면에 출력시킬경우
							read : '/grid_res.jsp'
						},
						//api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성
						reader : {
							type : 'json',
							successProperty : "success",
							rootProperty : 'grid_item'
						}
					}
				})
	})
})

위 코드의 데이터 스토어 부분 코드를 보면 autoLoad속성이 존재합니다.

이벤트(예를들어 버튼 클릭등) 를 발생하지 않고 

바로 화면에 출력 시켜주고자 한다면 

autoLoad 속성을 true로 지정해주셔야 합니다.

만약, 지정을 안하거나 이 옵션을 추가하지 않으셨다면 

그리드의 컬럼만 나오는 빈 껍데기만 화면에 출력이 되시는걸 확인 하실 수 있습니다.

STORE PROXY 타입이 'AJAX'를 이용한 그리드 코드(서버코드 - grid_res.jsp)

	JSONArray jsonArray = new JSONArray();
	JSONObject jsonGridRootObject = new JSONObject();
	JSONObject jsonGridObject = null;
	
	jsonGridObject = new JSONObject();
	jsonGridObject.put("blogger_id", "guklife");
	jsonGridObject.put("blogger_name", "국이");
	jsonGridObject.put("blogger_url", "guklife.tistory.com");
	jsonArray.add(jsonGridObject);
	
	jsonGridObject = new JSONObject();
	jsonGridObject.put("blogger_id", "hellogk");
	jsonGridObject.put("blogger_name", "개발로짜");
	jsonGridObject.put("blogger_url", "hellogk.tistory.com");
	jsonArray.add(jsonGridObject);
	
	jsonGridRootObject.put("success", true);
	jsonGridRootObject.put("grid_item", jsonArray);
	response.setContentType("text/plain; charset=UTF-8");
	PrintWriter pw = response.getWriter();
	pw.print(jsonGridRootObject);
	pw.flush();
	pw.close();

샘플코드 실행결과

ajax Call의 경우는 LoadMask가 출력이 되면서 

데이터가 출력이 되는 것을 확인 할 수 있습니다.

콤보박스에서 데이터스토어 개념을 잡으시고 진행하셨다면, 

그리드 목록 출력정도는 쉽제 접근 하셨을거라 생각합니다.

다음 포스팅은 그리드패널에 페이징툴바를 붙여서 

그리드 목록의 페이징 처리를 알아보도록 하겠습니다.

by 개발로짜

지난 시간에 데이터스토어의 개념을 이해하기위하여 

프록시타입을 memory로 주어 간단하게

콤보박스 컴포넌트에 목록을 구현해보았습니다.

이번에는 프록시타입이 ajax에 대하여 다루어보도록 하겠습니다.

우선 컴포넌트 + 데이터스토어 + remote페이지의 request/response 구조는 다음과 같습니다.

콤보박스 컴포넌트에서 데이터 스토어를 정한다음 

proxy 타입을 ajax로 설정을 해준다음 지정해놓은 서버페이지를 통신하여

 json object 데이터를 response하게 됩니다.

그럼 응답받은 데이터들은 지난 시간에 했던 

store의 data 속성값에 들어간다고 생각하시면 되겠습니다.

※ 참고로 응답받을수 있는 데이터는 JSON,XML,ARRAY가 있습니다.

    저는 항상 JSON 방식으로 RESPONSE 받도록 하겠습니다.

2014/10/30 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기

위 포스팅의 콤보박스 예제코드를 응용하여 

데이터스토어의 "ajax call"에 대한 예를 들어보도록 하겠습니다.

서버페이지에서 json object를 response 해주기 위해서

 json-simple 라이브러리를 사용하겠습니다.

하단 포스팅을 참고하셔서 json-simple jar파일을 라이브러리 폴더에 include 해놓습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

데이터스토어의 비동기 호출을 사용한 콤보박스 샘플코드

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		width : 300,
		height : 300,
		title : '콤보박스예제코드',
		items : [{
			//콤보박스 컴포넌트 선언
			xtype : 'combo',
			//최초에는 빈값이 출력되므로 설정
			emptyText : '선택',
			//화면에 보여주는 store data속성의 key값
			displayField: 'option_text',
			//실제 선택되었을때의 store data속성의 key값
	        valueField: 'option_value',
	        //default true값이여서 화면에 보여지는 displayField값 수정이 됩니다.
	        //false로 지정해줘야 제대로된 콤보박스기능이 동작됩니다.
	        editable : false,
	        //데이터 스토어 사용
			store : Ext.create("Ext.data.Store",{
						//data 속성의 json object에 정의된 key 값들과 매칭시켜줍니다.
						fields : ['option_text','option_value'],
						proxy : {
							//ajax 비동기 방식을 이용
							type : 'ajax',
							api : {
								//read 속성을 response 데이터를 받을경우 사용합니다.
								//db의 select 쿼리의결과를 받을 경우
								read : '/response.jsp'
							},
							//api->read 속성의 url값으로 부터 응답받은 object값을 받기 위한 속성
							reader : {
								type : 'json',
								successProperty : "success",
								rootProperty : 'items'
							}
						}
					})
		}]
	})
})

이전코드와 다른점이 있다면 proxy 내에 설정한 코드일부가 다를겁니다.

type 이 'memory' -> 'ajax'로 변경이 되었으며 

ajax call을 위한 api,reader 속성값들이 정의 되어있습니다.

데이터스토어의 api 속성에는 create/upload/destroy 속성이 존재하나 

스토어의 crud에 대해서는 그리드패널 주제로 포스팅할 때 다루도록 하겠습니다.

그리고 api -> read 속성을 정의 하였는데 이 read 속성이 정의를 하면 

reader 속성도 같이 함께 정의 해주어야 합니다.

read/reader는 한묶음으로써

 1+1 이라고 이해하시면 되겠습니다.

reader 내에 정의된 type/successProperty/rootProperty 속성이 존재하는데 

type의 경우는 서버페이지로부터 response 받은 데이터타입을 의미합니다.

type은 xml/array/json 등을 지원하지만  json을 주로 사용을 합니다.

successProperty 속성은 정의하지 않아도 무관하나 

만약 어떤 경우에는 목록이 보여야하고 

반대로 어느경우에는 목록이 보여서는 안되는 케이스가 존재할때 

이 successProperty 속성을 정의 해줍니다.

default key가  "success"로 정의 되어있고 

value 는 true/false로 정해주시면 되겠습니다.

그리고 rootProperty속성은 중요한 속성입니다.

바로 response object의 root key값을 정의해주는 것인대 

지난 포스팅에 memory 타입시 콤보박스 목록을 출력하기 위해

 store의 data 속성에 임시 데이터들을 정의한적이 있습니다.

이 data 속성의 기능과 동일하게 동작시켜주기 위한 속성값이 

바로 rootProperty속성입니다.

※ 꼭 기억해두도록 합니다.

데이터스토어에서 RESPONSE 결과값을 받을 샘플 코드(response.jsp)

JSONArray jsonArray = new JSONArray();
JSONObject jsonObject = new JSONObject();
JSONObject jsonObjectSub = null;

jsonObjectSub = new JSONObject();
jsonObjectSub.put("option_text", "보여주는값1");
jsonObjectSub.put("option_value", "선택값1");
jsonArray.add(jsonObjectSub);

jsonObjectSub = new JSONObject();
jsonObjectSub.put("option_text", "보여주는값2");
jsonObjectSub.put("option_value", "선택값2");
jsonArray.add(jsonObjectSub);

jsonObjectSub = new JSONObject();
jsonObjectSub.put("option_text", "보여주는값3");
jsonObjectSub.put("option_value", "선택값3");
jsonArray.add(jsonObjectSub);

// successProperty 속성의 key값과 맞춰주며 true/false로 정해줍니다.
jsonObject.put("success", true);
// 최상단의 key값은 rootProperty 속성의 key로 정의해준값과 맞춰줍니다.
jsonObject.put("items", jsonArray);
response.setContentType("text/plain; charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.print(jsonObject);
pw.flush();
pw.close();

서버페이지내에 JSON OBJECT를  생성 후 클라이언트 페이지로 응답을 주었습니다.

응답데이터의 결과는 다음과 같겠습니다.

RESPONSE JSON DATA

	    
items : [{
		"option_text" : "보여주는값1",
		"option_value" : "선택값1"
	},{
		"option_text" : "보여주는값2",
		"option_value" : "선택값2"
	},{
		"option_text" : "보여주는값3",
		"option_value" : "선택값3"
	}
]

 json object 를 store에서 callback으로 받았습니다.

단, 콤보박스 목록을 출력시키기위한 버튼클릭시 

로딩바가 출력되면서 콤보박스내 목록이 출력될것입니다.

그이유는 store의 autoLoad라는 속성이 존재하는데 

지정을 해주지 않았기 때문에 

이벤트 발생시 store가 load되는 것입니다.

만약 이벤트 없이 미리 store에 담아놓고 싶으실경우 

store속성에 autoLoad : true 라는 설정을 추가로 잡아주시면 되겠습니다.

실행결과를 보시도록 하겠습니다.

초기화면

콤보박스 클릭

콤보박스 출력

기

정상적으로 서버페이지를 통하여 

응답받은 JSON OBJECT데이터가 목록에 출력되었습니다.

다음 포스팅은 마우스우클릭을 이용한 context menu 컴포넌트를 알아보도록 하겠습니다.

by 개발로짜