ExtJS 기초강좌 19 - 그리드(Grid) DB 통신하여 페이징처리하기
이번장에서는 파일이 아닌, DB 통신을 하여 데이터 조회 후, 그리드 페이지에 출력하여 페이징처리를 해보도록 하겠습니다.
테이블 생성 및 데이터 INSERT
테이블 및 데이터 관련 스크립트는 하단 첨부파일을 다운 받으신 후, 자신이 사용하는 DB에 IMPORT 시켜주세요 ▽
dummy.sql파일을 받으 신 후 데이터 조회를 해보시면 다음과 같이 총 12개의 데이터가 존재합니다. ▽
결과 화면을 ExtJS의 그리드화면에 페이징기능까지 적용하여 출력시켜보도록 하겠습니다.
클라이언트페이지 샘플코드
Ext.onReady(function(){
var data_store = Ext.create('Ext.data.Store',{
autoLoad : true ,
pageSize : 5,
fields : ['title','contents','author','create_date'],
proxy : {
type : 'ajax',
api : {
read : './server.jsp'
},
reader : {
type : 'json',
rootProperty : 'data'
//totalProperty - default(total)
//successProperty - default(success)
}
}
});
Ext.create('Ext.grid.Panel',{
title : 'Grid Paging Example',
columns : [{
text : '제목',
flex : 1,
dataIndex : 'title'
},{
text : '내용',
flex : 1,
dataIndex : 'contents'
},{
text : '작성자',
flex : 1,
dataIndex : 'author'
},{
text : '등록일',
flex : 1,
dataIndex : 'create_date'
}],
store : data_store,
bbar : {
xtype : 'pagingtoolbar',
store : data_store,
displayInfo : true,
displayMsg : '{0}/{1} Total - {2}',
emptyMsg : 'No Data'
},
renderTo : Ext.getBody()
})
})
위 코드를 실행해봤자, 그리드 빈껍데기만 출력될것입니다.
대부분 코드들은 이전에 진행 해오면서 설명드린 부분들이 대부분이라 특정 config 내용에 대해서만 설명드리도록 하겠습니다.
"Ext.data.Store" 의 경우,
proxy -> api -> read 속성에 URL을 기존에는 JSON 파일경로를 지정해주었지만, 서버페이지 관련 파일 URL을 지정해주었습니다.
지난 시간 말씀드렸다시피, 각자 사용하는 웹서버 페이지 언어가 다를 수 있으므로 서버파일명은 알아서... (asp, asp.net, php, nodeJS 등....)
※ 여기서 "server.jsp" 의 역할은 데이터 조회 후, JSON값을 규격에 맞춰서 응답해줄때 사용되는 페이지입니다.
"Grid Panel의 bbar config"
bbar 속성은 예전시간에 툴바관련 포스팅할 때 다루었습니다.
bbar -> 하단툴바에 "pagingtoolbar"라는 페이징툴바 컴포넌트를 적용한 후, store config에서는 그리드에 사용되는 동일한 데이터스토어가 담겨있는 변수를 적용시켜줬습니다.
※ 페이징툴바와 그리드의 목록데이터는 서로 공유하는 관계라 이해하시면 되겠습니다.
마지막으로, displayInfo / displayMsg / emptyMsg
3가지 속성은 페이징툴바에 데이터의 총 갯수 및 데이터 출력에 관련 된 메시지를 출력하기 위한 config 속성값입니다.
displayInfo 를 'false'로 지정해줄 경우, displayMsg / emptyMsg 속성은 정의하실 필요가 없습니다.
displayInfo 를 'true'로 지정해주고 메시지 출력을 하였다면,
서버로부터 받아온 데이터가 존재하지 않을 시, emptyMsg에 정의된 문구가 출력이 될 것이며, 데이터가 존재하면 displayMsg 메시지가 출력 될 것입니다.
{0} - 현재페이지의 시작번호
{1} - 현재페이지의 마지막번호
{2} - 총 데이터 갯수
서버페이지(server.jsp) 샘플코드
Spring 기반으로 코드 작성하는 것이 편하긴 하지만, 지난시간 MODEL1 방식으로 진행을 해서 이번페이지 역시 MODEL1 방식으로 진행을 하도록 하겠습니다.
DB통신과 JSON 파싱을 위하여 사용한 라이브러리는 다음과 같습니다.
▷ MYSQL JDBC 5.1
▷ JSON SIMPLE 1.1
서버페이지에 대한 대략적으로 코딩한 방식은 다음과 같습니다. ▽
<%@page import="java.io.PrintWriter"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<%
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try{
JSONObject jsonObject = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject subObject = null;
int start = Integer.parseInt(request.getParameter("start"));
int end = Integer.parseInt(request.getParameter("limit"));
int total = 0;
/**
* JDBC 정보 설정 (MySQL)
*/
String url = "jdbc:mysql://db호스트:포트번호/db명";
String id = "계정";
String pwd = "비밀번호";
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection(url,id,pwd);
stmt = conn.createStatement();
/**
* 전체카운트 조회
*/
String count_sql = "SELECT COUNT(*) FROM blog";
rs = stmt.executeQuery(count_sql);
if(rs.next()) {
total = rs.getInt(1);
}
/**
* 목록조회 + 페이징
*/
String list_sql = "SELECT * FROM blog LIMIT " + start + " , " + end;
rs = stmt.executeQuery(list_sql);
while(rs.next()){
subObject = new JSONObject();
subObject.put("title", rs.getString("title"));
subObject.put("contents", rs.getString("contents"));
subObject.put("author", rs.getString("author"));
subObject.put("create_date", rs.getString("create_date"));
jsonArray.add(subObject);
}
jsonObject.put("total", total);
jsonObject.put("success", true);
jsonObject.put("data", jsonArray);
response.setContentType("text/plain; charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.print(jsonObject);
pw.flush();
pw.close();
}catch(Exception e){
e.printStackTrace();
}
%>
예를들기 위한 코드이므로, 코드리뷰는 하지말아주세요...
위 코드에서 DB 조회를 2번하는데,
첫번째는 테이블의 총 카운트를 세는쿼리
두번째는 테이블의 START/END 값을 받아서 일정 데이터만 뽑아서 출력하기위한 쿼리
일반적으로 사용하는 게시판용 쿼리방식은 동일(?)합니다.
그런 다음, 각 object를 파싱 후, JSON 객체를 클라이언트 페이지에 응답을 해줍니다.
JSON의 구조는 다음과 같습니다. ▽
total이란 key로 데이터의 카운트 쿼리의 결과값을 담아서 넘겨주었고, data는 데이터 목록을 조회한 결과값을 JSON ARRAY로 담겨서 넘겨주었습니다.
마지막으로 success는 boolean 결과값으로, 성공/실패를 구분짓기 위한 flag JSON 키값입니다.
data는 데이터스토어의 reader -> rootProperty로 지정해준 value값과 매칭이 되어야 합니다.
그외 total / success는 default value값이며, 만일 해당 key 값을 변경하고 싶다하신다면, totalProperty / successProperty config 값에 value를 작성하여 변경해주시면 되겠습니다.
그럼 실행결과를 확인해보도록 하겠습니다. ▽
페이징처리에 대해서 알아보았습니다.
MySQL이 아닌, ORACLE 또는 MS-SQL 관련해서 페이징 처리 로직이 다를 수 있습니다.
서버페이지에서 요청받은 start / limit 에 대한 값을 응용해서 적용해주셔야 합니다.
페이징 플러그인(Progressbar / Sliding)
ExtJS 플러그인 중에서 페이징툴바에 대한 UX를 변경해주는 플러그인에 대해서 간단하게 적용해보고 이번강좌를 마무리 하겠습니다.
초기에 다운로드 받은 ExtJS 5.X GPL 압축해제 한 폴더의 하단 경로를 들어갑니다. ▽
ExtJS폴더/build/examples/ux/
다양한 플러그인이 존재합니다만, 페이징관련 플러그인(ProgressBarPager.js / SlidingPager.js) 만 자신의 프로젝트에 가지고오도록 하겠습니다. ▽
※ 저는 plugin이라는 폴더를 생성하여 복사한 JS 파일들을 붙여놓았습니다.
다음으로, 자신의 프로젝트에 import 해준 JS 파일을 코드안에 INCLUDE 해줍니다.
ext-all.js가 include 되어있는 코드 하단에 적용시켜주세요.
<!--
슬라이딩바 페이징 플러그인
-->
<script type="text/javascript" src="./plugin/SlidingPager.js"></script>
<!--
프로그레스바 페이징 플러그인
-->
<script type="text/javascript" src="./plugin/ProgressBarPager.js"></script>
파일을 INCLUDE 해주었으니, 페이징툴바에 각 플러그인들을 적용시켜보도록 하겠습니다.
기존코드에서 xtype : 'pagingtoolbar' 부분에 plugins config를 이용하여 include한 페이징 플러그인을 적용 할 수 있습니다.
(emptyMsg config 하단에 이어서 작성해주도록 합니다.)
//프로그레스바 페이징 플러그인적용
plugins: new Ext.ux.ProgressBarPager()
또는
//슬라이딩 페이징 플러그인적용
plugins: new Ext.ux.SlidingPager()
각 플러그인을 적용한 결과는 아래와 같습니다.
▶ 프로그레스바 페이징 적용
▶ 슬라이딩 페이징 적용
플러그인만 적용했음에도 불구하고, 페이징관련 화면이 전체적으로 변경된 것을 확인 할 수 있었습니다.
다음장에는 대용량 데이터 ( 10만건? 100만건? ) 를 그리드에 적용 시켜보았을때 발생되는 문제점과 해결책에 대해서 다루도록 하겠습니다.
