ExtJS 기초강좌 17 - 그리드(Grid)에 JSON/XML 파일 비동기 Ajax방식으로 출력하기
지난 시간까지 데이터 스토어에 직접 다중 배열 또는 JSON 규격의 데이터를 고정하여 그리드에 데이터를 출력해보았습니다. ▽
이번에는 연동 되어있는 웹서버를 이용하여 Ajax 방식을 이용하여 프로젝트내에 존재하는 JSON 및 XML 파일을 이용하여 그리드에 데이터 출력을 시켜보도록 하겠습니다.
앞으로는 웹서버 연동 + JSON 파일을 이용하여 대부분의 강좌를 진행할 예정입니다.
DB연동 및 로직을 처리하는 과정은 그 이후 진행을 하도록 하겠습니다.
지난시간에 말씀 드렸다시피, 제가 구성한 환경의 웹서버는
JAVA 1.7 + Tomcat 7.0 + 이클립스
기반으로 강좌를 진행하도록 하겠습니다.
저는 Model1 방식의 JSP 형식으로 개발진행을 하고 있지만, Spring / Struts2 와 같은 프레임워크를 별도로 사용하셔도 무관하며, JAVA 버전 및 톰캣버전에 관련 역시 제가 진행하는 환경에 맞추지 않으셔도 되겠습니다.
마지막으로, PHP/ASP/ASP.NET/NodeJS 등과 같은 다른 웹서버로 구축을 진행하셔도 되겠습니다.
※ 타언어로 웹서버를 구축하신 분들의 경우, 샘플코드를 해당 언어에 맞게끔 변경작업이 필요하실 겁니다.
프로젝트 생성 및 ExtJS 환경구성
① 이클립스에서 Dynamic Web Project 로 프로젝트 생성 ▽
프로젝트명 : extjs
② 기존 웹서버 연동없이 샘플코드 작성을 진행한 디렉토리내에 있는 "packages" 디렉토리와 "ext-all.js" 파일을 프로젝트의 루트 디렉토리에 INCLUDE
설정이 되있지 않으신분들은 하단 포스팅 참고해주세요 ▽
※ 이클립스의 Dynamic Web Project의 경우, WebContent 하단에 INCLUDE▽
③ HTML 파일 생성(index.html) ▽
이전과 동일하게 생성한 HTML 파일에 ExtJS 관련 스크립트 파일과 CSS 파일들을 INCLUDE 하여 연동테스트를 해보도록 하겠습니다.
▶ 샘플코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="./packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet">
<script type="text/javascript" src="./ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert("Message Test","OK");
})
</script>
</head>
<body>
</body>
</html>
▶ 실행결과
실행결과 정상적으로 메시지 창이 출력되었습니다.
Q : http://호스트:포트번호 다음에 프로젝트명이 어떻게 없이 화면이 뜨는건가요?
A : server.xml 의 Context Root 설정을 하시면 됩니다.
하지만, 꼭 Context Root 설정을 해주실 필요는 없습니다.
Context Root 설정은 하단 이미지를 참고해주세요. ▽
그리드 샘플코드 적용
연동이 완료되었으면, 그리드의 샘플코드를 우선 작성하도록 합니다.
▶ 샘플코드
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
title : 'Grid Example',
columns : [{
text : 'first column',
flex : 1,
dataIndex : 'first'
},{
text : 'second column',
flex : 1,
dataIndex : 'second'
},{
text : 'third column',
flex : 1,
dataIndex : 'third'
},
{
text : 'fourth column',
flex : 1,
dataIndex : 'fourth'
}],
store : Ext.create('Ext.data.Store',{
fields : ['first','second','third','fourth'],
data : [{
first : '1-1',
second : '1-2',
third : '1-3',
fourth : '1-4'
},{
first : '2-1',
second : '2-2',
third : '2-3',
fourth : '2-4'
},{
first : '3-1',
second : '3-2',
third : '3-3',
fourth : '3-4'
},{
first : '4-1',
second : '4-2',
third : '4-3',
fourth : '4-4'
}]
}),
renderTo : Ext.getBody(),
})
})
▶ 실행결과
위와같이 대략적인 틀을 제작하였습니다.
위의 생성한 data 속성의 Json 값을 "grid_data1.json" 파일을 생성 후, 다음과 같이 코드작성을 해주도록 합니다.
JSON 타입의 데이터 그리드에 출력하기
※ 이전 코드와 별차이 없습니다. 대신, 시작을 JSON Object 형식으로 작성을 합니다.
▶ grid_data1.json
{
data : [{
first : '1-1',
second : '1-2',
third : '1-3',
fourth : '1-4'
},{
first : '2-1',
second : '2-2',
third : '2-3',
fourth : '2-4'
},{
first : '3-1',
second : '3-2',
third : '3-3',
fourth : '3-4'
},{
first : '4-1',
second : '4-2',
third : '4-3',
fourth : '4-4'
}]
}
▶ Ajax 통신으로 변경한 ExtJS 샘플코드
Ext.onReady(function(){
Ext.create('Ext.grid.Panel',{
title : 'Grid Example',
columns : [{
text : 'first column',
flex : 1,
dataIndex : 'first'
},{
text : 'second column',
flex : 1,
dataIndex : 'second'
},{
text : 'third column',
flex : 1,
dataIndex : 'third'
},
{
text : 'fourth column',
flex : 1,
dataIndex : 'fourth'
}],
// Code Chnage
store : Ext.create('Ext.data.Store',{
fields : ['first','second','third','fourth'],
autoLoad : true,
proxy : {
type : 'ajax',
api : {
read : './grid_data1.json'
},
reader : {
type : 'json',
rootProperty : 'data'
}
}
}),
renderTo : Ext.getBody(),
})
})
▶ 실행결과는 상단 결과와 동일
비동기방식으로 출력한 그리드 데이터 관련 코드 설명을 드리겠습니다.
우선적으로 data config에서 proxy config 속성으로 변경을 하였습니다.
그리고 autoLoad : true 또한 추가되었습니다.
① Ajax 비동기 통신을 위해서는 autoLoad config가 필요함
어떤 특정 이벤트를 받을 다음 데이터 출력을 위해서는 autoLoad 를 false로 지정함
현재 코드에서는 그리드 생성 즉시, 데이터 출력을 위하여 true로 설정
② proxy 속성
type 은 통신 방식에 따라 여러가지 타입을 지원
대표적인 몇가지만 설명을 진행하도록 함.
memory : 서버통신이 이루어지지 않을 경우, 사용되는 타입
이전 강좌에서 진행한 코드가 Memory 타입인대 별도로 해당 속성을 지정해주지 않아도 출력이 되는 듯하다.
ajax : 서버통신에서 응답받은 데이터를 로드하여 어플리케이션에 적용할때 주로 사용하는 방식
jsonp : 다른 도메인간의 Ajax 통신을 하여 응답값을 주고받을때 사용되는 방식
전송시, callback parameter가 별도로 필요
※ 해당 방식을 이후에 다루도록 하겠음
rest : RESTful 방식의 CRUD 처리를 할때 사용되는 방식
※ 해당 방식 역시 이후에 다루도록 함
이외에도 HTML5 기반의 localstorage / sessionstorage 등이 존재함
③ api 속성
create / read / update / destroy 의 url 정보를 입력하는 config 속성값이다.
현재는 단순 조회용을 위함으로 read 속성만 정의하였음
나머지 create/update/destroy 는 이후에 다룰예정
④ reader 속성
서버응답 또는 클라이언트로부터 데이터를 읽을때 사용되는 config
● reaer -> type
타입은 json / xml 이 존재함
(default : 'json')
● reader -> rootProperty
응답받은 JSON 데이터 목록이 들어있는 json 의 key값
이외의 successPropert / totalProperty 가 존재하는데 이역시 이후에 다룰예정
단순 단어형태로 되어있다보니, 대략적인 유추가 가능할거라 생각됩니다.
ajax type으로 json 데이터를 읽어서 그리드영역에 출력을 해보았습니다.
XML 타입의 데이터 그리드에 출력하기
▶ grid_data1.xml
<?xml version="1.0" encoding="UTF-8"?>
<data>
<row>
<first>1-1</first>
<second>1-2</second>
<third>1-3</third>
<fourth>1-4</fourth>
</row>
<row>
<first>2-1</first>
<second>2-2</second>
<third>2-3</third>
<fourth>2-4</fourth>
</row>
<row>
<first>3-1</first>
<second>3-2</second>
<third>3-3</third>
<fourth>3-4</fourth>
</row>
<row>
<first>4-1</first>
<second>4-2</second>
<third>4-3</third>
<fourth>4-4</fourth>
</row>
</data>
위와같은 규격의 XML 양식을 호출해보도록 하겠습니다.
데이터 스토어의 일부만 변경된 것이므로 store config 부분만 변경토록 하겠습니다.
Ext.create('Ext.data.Store',{
fields : ['first','second','third','fourth'],
autoLoad : true,
proxy : {
type : 'ajax',
api : {
read : './grid_data1.xml'
},
reader : {
type : 'xml',
rootProperty : 'data',
record : 'row',
}
}
})
JSON과 다른 점이 있다면, type이 XML이라는 점과 record config가 reader 속성에 추가되었다는 것입니다.
rootProperty는 최상단 XML 태그명을 입력해주시면 되고, record의 경우 반복이 되는 데이터의 태그명을 입력해주시면 되겠습니다.
실행결과는 역시 동일합니다.
지금까지 Ajax 통신을 이용하여 데이터 출력을 해보았습니다.
JSON / XML 어느 타입으로 데이터를 출력할지는 여러분이 선택하시면 되겠습니다.
본인은 JSON 규격으로 앞으로 강좌를 진행하도록 할 예정입니다.
다음장에는 그리드 컬럼 및 데이터 재설정에 관하여 다루도록 하겠습니다.
