[ExtJS 3] 12. ExtJS Grid (Reader 객체)

꽤 쌀쌀해진 날씨덕에 출 , 퇴근이 곤욕이다...
오늘은 그리드를 알아보도록 하자.
그리드란? 한마디로 말해 우리가 HTML 에서 Table Tr Td 로 표를 만든 것을 생각 하면 되겠다.
게시판의 글 목록 정도.. ^^

ExtJS 의 데이터 저장소는 XML 과 JSON 같은 서로 다른 데이터 형태를 읽어오기 위한 일관된 방식을 제공한단다.
모든 ExtJS 위젯이 일관된 방식으로 이 데이터를 사용할 수 있게 하며,
데이터 저장소의 일관성과 가공되지 않은 데이터를 처리하는 reader 클래스의 존재 덕분에 제공된 데이터 형태에 관계없이 같은 방식으로 접근이 가능하다.

* 용어 개념 *

* Record(레코드) : 데이터의 한 행 ( 가로 줄~)
* Filed (필드) : 데이터의 이름 정도?로 생각하면 되겠다..

---

* Reader 객체

먼저, reader 객체에 대해서 알아 보자.
저장소의 설정은 Reader 객체를 통해 이루어 진다.
Reader 객체는 가공되지 않은 객체를 이용가능한 데이터로 변환한다.
ExtJS 에 내장된 Reader 클래스는 3가지가 있다.

1. ArrayReader

ArrayReader 클래스는 배열 값으로 부터 레코드를 생성한다.

필드를 정의한 순서대로 미가공 배열 값을 읽어 들여 레코드로 가져온다.
필드와 행의 값이 같은 순서로 되어 있지 않을 경우를 위해 필드 정의에는 mapping 옵션이 포함되어 있다.
mapping 옵션에는 필드 값을 가지고 있는 배열의 인덱스를 넣는다.

2. JSONReader

JSONReader 클래스는 가장 일반적으로 사용된다.
가공되지 않은 JSON 으로 부터 속성을 디코딩(decoding) 하여 레코드를 생성한다.

필드의 이름은 속성이름으로 사용되며,
이 속성 이름을 통해 필드의 값을 가져온다.
만일 다른 속성 이름이 필요하다면, 필드 정의에 mapping 옵션을 포함시켜야 한다.
이는 속성이름을 통해 값을 가져올 수 있게 한다.

3. XMLReader
XMLReader 클래스는 요소의 하위 노드에 접근하여 XML 요소로부터 레코드를 생성할 수 있다.

필드의 이름은 XPath로 mapping 된다.
다른 매핑이 필요한 경우, 필드 정의 부분에 필드 값을 가져오기 위한 mapping 옵션을 포함시키면 됨다.

---

오늘은 Reader 객체가 무엇인 지만 살펴 보도록 해야겠다.

다음에 할 미리 예제 데이터를 여기다 적어 두고 가야 겠군..

넘 피곤.. ㅠ-ㅠ

// movieData 라는 가짜 저장소 데이터 생성
 var movieData = [
   [ 1, "Office Space1", "Mike Judge1", 89, "1999-02-19", 2, "Work 1",
     "19.95", 1 ],
   [ 2, "Office Space2", "Mike Judge2", 90, "2000-02-19", 3, "Work 2",
     "19.95", 1 ],
   [ 3, "Office Space3", "Mike Judge3", 91, "2001-02-19", 4, "Work 3",
     "19.95", 1 ],
   [ 4, "Office Space4", "Mike Judge4", 92, "2002-02-19", 5, "Work 4",
     "19.95", 1 ],
   [ 5, "Office Space5", "Operator", 93, "2003-03-08", 6, "Work 5",
     "19.95", 1 ],
   [ 6, "Office Space6", "jimme", 95, "2003-05-22", 7, "Work 6",
     "19.95", 1 ],
   [ 7, "Office Space7", "Kate", 96, "1995-12-24", 8, "Work 7",
     "19.95", 1 ],
   [ 8, "Office Space8", "Seo YunJung", 97, "1985-02-17", 9, "Work 8",
     "19.95", 1 ] ];
 
 var store = new Ext.data.Store({
   data: movieData,
   reader : new Ext.data.ArrayReader({idIndex : 0 }, Movie)
  });

부족한 블로그에 무한 관심 감사드립니다 (_ _);
행복한 밤 보내세요~*