Extjs 기본 사용법 - JsonReader를 이용한 Grid [펌]

1. json.php

// php 파일내에는 grid 로 가져갈 데이터를 생성하자
$arr[person][0]['name'] = "홍길동";
$arr[person][1]['name'] = "이순신";
$arr[person][0]['grade'] = "도둑";
$arr[person][1]['grade'] = "장군";
$arr[person][0][country] = "조선";
$arr[person][1][country] = "조선";
$arr[totalcount] = sizeof($arr);  // 페이징 처리시 토탈카운트 값이다. ( 쿼리인 경우 쿼리의 토탈값을 지정 )

// json_encode 는 오브젝트 형태로 배열을 출력한다.
// 예 ) ({"홍길동":"도둑":"조선"})
echo json_encode($arr);


2. index.php
// 이곳은 실제 그리드가 생성될 페이지 이다.
// 대충 디자인을 하고 extjs 관련 라이브러리를 링크하자
// 링크는 했다고 치자

// 이부분은 그리드가 생성될 부분이다.
<div id="list"></div>



grid.js 에서는 먼저 Ext.onReady 를 통해 Extjs 라이브러리가 충분히 실행될 준비가 되었나 판단하고
코드를 실행시킨다.
참고로 간혹가다가 준비가 덜되서 오류가 나는 경우도 있어서 나는 안전빵으로 grid.js 링크를 페이지 최 하단에
넣어버렸다 ( w3c 에 위반? )

3. grid.js 

Ext.onReady(function() {

 listdata();    // 이 안에 코드를 심어도 된다.
                  // 하지만 나는 다른 파라미터값을 이용해 재수신 받기 난감하여
                  // 함수로 뺏다. (내가 분명히 메서드를 몰라서 그런것이라 생각한다)

});

function listdata(){

    // 파라미터를 오브젝트로 생성

     var params = {};
   // 쿼리조건을 주고 싶을때 params 오브젝트에 속성을 추가하면 이따가 자동으로 오브젝트를 json.php 로 가져간다.
     params['country'] = "조선";   // 이렇게 가져가서 조선인것만 빼온다 뭐 이런 뜻
   
    var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy(

           new Ext.data.Connection({

url: 'json.php',                   // 데이터를 가져올 파일경로
  extraParams: params,        // 아까 지정한 파라미터 대충 보니 ajax 를 쓰려고 선언하는 부분인듯하다.
          method: 'POST'
         })
  ),

// json data (오브젝트형) 를 읽어드리는 메서드이다.
  reader: new Ext.data.JsonReader({
   totalProperty: 'totalcount',        // 자료의 총 개수를 알아낸다.
   root: "person",                       // 자료의 first Element
   id:"name",                        // 자료의 primary key
   remoteSort: true,
   fields: ['name', 'grade','country']   // 데이터와 필드 매칭 말안해도 알리라,,
  })
    });

       store.setDefaultSort('name', 'desc');   // 그리드에 추가할때 정렬을 설정한다.


 // 헤더와 공간을 설정하고 데이터와 행간 index를 일치시킨다.
    var cm = new Ext.grid.ColumnModel([
       {header: '이름', width: 70, sortable: true, dataIndex: 'name'},
    {header: '직위', width: 70, sortable: true, dataIndex: 'grade'},
    {header: '국가', width: 70, sortable: true, dataIndex: 'country'}
   ]);

 var grid = new Ext.grid.GridPanel({
  renderTo: 'emplist',
     store: store,
  cm: cm,
     viewConfig: {
   forceFit: true
  },
  title: '영웅리스트',
  width: 220,
  height: 500,
  loadMask: true,
  frame: false,


// 페이징 사용시 사용하는 부분
 // 페이징 사용안할거면 삭제하자.

        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: store,
            displayInfo: false,
//   displayMsg: 'Total: {2} 中 {0} - {1}',
   emptyMsg: "조회할 사람이 없습니다."
  }),

  // 행 클릭시 사원 성명등을 알아낸다.
  onClick:function(e){
   var t  = e.target;
   var v  = this.view;
            var row  = v.findRowIndex(t);
   if(row){
    var record = this.store.getAt(row);
     alert(record.data.name);   // 이름
     alert(record.data.grade);  // 직위
     alert(record.data.country); // 국가

   }
  }

 });

  // 페이징 이용시 페이지 파라미터를 전송한다.
  // 여기서 자동으로 시작값과 지정값을 정해주니 쿼리시
// limit $_POST['start'] , $_POST['limit']   만 지정해주면 된다.

    store.load({params:{start:0, limit:20}});


}

[원문] http://shesbe.tistory.com/entry/Extjs-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-JsonReader%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-Grid