샘플 사이트
http://3pl.ezadmin.co.kr/extjs/grid_test_json2.html
구성을 보자..
1. 먼저 라이브러리들을 가져와야 한다.
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/examples/examples.css" /><!-- script -->
<script type="text/javascript" src="/js/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-2.0.2/ext-all.js"></script>
2. store객체를 만든다.
store객체는 Grid에 출력할 데이터를 가져오는 역할을 수행한다.
여기서는 json방식을 사용할 것이다.
json은 모 테스트라 간단히 json_encode를 사용해서 만들었다.
$_val = array();
$_val[totalCount] = 40;
$_val[data][] = array( id => 1, title=> iconv( 'CP949','UTF-8','하하하'));
$_val[data][] = array( id => 2, title=> iconv( 'CP949','UTF-8','2 jacking') );
$_val[data][] = array( id => 3, title=> iconv( 'CP949','UTF-8','3 jacking 흠흠 123') );
echo json_encode ( $_val );
json을 가져오기 위해 메뉴얼에서는 jsonStore를 사용하라고 했지만 아무리 해도 안된다. 개구라가 아닌가 싶다. 모르지 공력이 쌓이면 될런지..일단은 Ext.data.Store 를 사용했다.
var store = new Ext.data.Store({흠..다 날려 먹었다.
proxy: new Ext.data.HttpProxy(
new Ext.data.Connection({
url: './json_data.php',
extraParams: params,
method: 'POST'
})),
reader: new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: "data",
fields: ['id', 'title']
})
});
proxy:
Ext.data.HttpProxy는 외부의 데이터를 연동할 때 사용한다.
Ext.data.Connection은 파라미터를 전송하기 위해 사용함
Grid에서 footer를 사용할 경우 starter, limit은 기본 parameter롤 전송된다.
reader:
Ext.data.JsonReader 를 사용한다, 서버로 부터 받는 데이터가 Json방식일 경우 사용한다.
totalProperty: jSon방식의 값에서 Total 파라미터를 보낼 경우 정의 이 값은 나중에 footer와 자동연동된다.
root: 데이터들의 root 엘리먼트라고 하면 될까?
field: [] 다음과 같은 방식으로 저장되어 있다라고 포맷을 알려 줌 향후 값, 포맷의 설정이 가능함
3. Grid 생성 부분
///////////////////////////////////////////////////////////
// grid 생성 부분
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'id', width: 120, sortable: true, dataIndex: 'id'},
{header: 'title', width: 190, sortable: true, dataIndex: 'title'}
],
viewConfig: {
forceFit: true
},
renderTo: 'div_grid',
title: '그리드',
width: 500,
height: 500,
loadMask: true,
frame: false,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: '총계 {2}중 {0} - {1}',
emptyMsg: "조회값이 없습니다."
})
});
4. data 로드
store.load();
5. html 소스 부분
</head>
<body>
<h1>XML Grid 테스트</h1>
<div id="div_grid"></div>
</body>
</html>
