From Learn About the Ext JavaScript Library

지난 몇 개월간 저는 ExtJS 라이브러리내의 컴포넌트들의 사용법을 탐구했습니다. 수많은 시행착오와 오랜 기간 동안의 노력 끝에 라이브러리에 대한 많은 이해와 구현방법을 터득하게 되었으며 이제 가장 쉬운 방법으로 여러분들과 공유를 하고자 합니다. 이렇게 함으로서 여러분들은 제가 겪었던 고생을 하실 필요가 없을 겁니다. 이 시리즈들은 여러분들이 자신만의 데이타 그리드를 만들 수 있게 해주며 개별 파트로 나누어서 설명 합니다.

여기에서는 ExtJS 라이브러리 내에서 제공되는 기능이 아닌 서버 측의 페이징 쿼리에 대해서는 언급하지 않습니다. 참고로 저의 홈페이지인 Cutter's Crossing 에 ColdFusion 으로 만든 예제를 보실 수 있습니다. 이 튜토리얼을 진행하기 위해서 여러분은 자신이 선택한 서버 측 언어에서 페이징 쿼리를 직접 구현해야 합니다.

데이터스토어(The Data Store)

서버 측 페이징 쿼리 서비스와 부수적으로 필요한 파일의 작성이 완료 되었다면 이제 데이터를 데이터그리드(DataGrid)에 붙여봅시다. ExtJS 라이브러리 는 데이터를 컴포넌트에 집어 넣기 위해 다양한 방법을 제공합니다. 우리는 HttpProxy(동일한 도메인 내에서 데이터를 끌어오기 위한 유틸리티)와 XmlReader(리턴된 데이터 셋을 파싱하기 위해서 필요함)를 조합시켜서 '데이터스토어'를 만들어 볼 겁니다.

'데이터스토어'는 "위젯에 데이터를 제공하기 위해 클라이언트쪽에 캐쉬되어 있는 Ext.data.Record 객체" 입니다. 서버 측의 데이터를 어느 위치에 어떻게 보이게 할 것인지 간단히 만들어 봅시다. 본 예제에서는 서버 측의 서비스 스크립트(pagingService.cfm)와 호출하는 페이지 양쪽이 동일한 도메인에 있는 상황에서 진행되므로 HttpProxy를 사용합니다. 그리고 서버 측 서비스 스크립트는 XML 문서를 제공하게 되므로 데이터 가공을 위해 XmlReader가 필요합니다.

첫 번째로 기본 블록을 설정합니다

var ds = new Ext.data.Store({
 
});

이제 서버 측 서비스 스크립트의 위치를 추가해 봅시다.

var ds = new Ext.data.Store({
	// load using HTTP
    proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
 
});

그리고 XML '리더'를 설정합니다.

var ds = new Ext.data.Store({
     // load using HTTP
     proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
 
     // the return will be XML, so lets set up a reader
     reader: new Ext.data.XmlReader({
          // records will have an "T4" tag
          record: 'T4',
          id: 'ID',
          totalRecords: "recCount"
     }, [
          // set up the fields mapping into the xml doc
          'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
     ]),
 
});

좋습니다, 여기서 잠시 리더에 대한 자세한 설명을 하겠습니다. 좀더 쉽게 이해하기 위해 서버 측 서비스 스크립트에서 리턴 되는 레코드셋(recordset)을 살펴봅시다. Firefox는 더 멋지게 표시하니까 Firefox에서 보실 것을 권장하지만 대충 아래와 비슷하게 보일 겁니다:

<userList>
	<T4>
		<recCount>5802</recCount>
		<ID>2350</ID>
		<vcFirstName>Robin</vcFirstName>
		<vcLastName>Williams</vcLastName>
		<bIsAdministrator>0</bIsAdministrator>
		<bIsActive>1</bIsActive>
		<tsDateLastLogin>2007-05-01T14:34:57</tsDateLastLogin>
	</T4>
	<T4>
		<recCount>5802</recCount>
		<ID>4027</ID>
		<vcFirstName>Howie</vcFirstName>
		<vcLastName>Mandel</vcLastName>
		<bIsAdministrator>0</bIsAdministrator>
		<bIsActive>1</bIsActive>
		<tsDateLastLogin>2007-04-29T16:29:33</tsDateLastLogin>
	</T4>
	...
</userList>

XML을 살펴보면 개별 레코드들이 ‘T4’ 노드로 구분되어 있는데, 이것은 리더에서 ‘record’ 속성(attribute)으로 대응(mapped) 됩니다. XML 문서 내 'ID' 노드가 'id'로 대응되는데 이것은 개별 레코드를 식별하기 위한 유일한 식별자로 사용되며 전체 레코드 수를 구하기 위해 'recCount' 노드를 'totalRecords'로 대응시켰습니다. 그리고 데이터그리드에 포함될 노드들을 콤마로 구분하여 정리하였습니다.

본 예제에서는 리턴 값으로 아주 간단한 XML을 사용하였는데, XML내의 속성과 내부의 노드들에 대한 대응관계를 설정하려고 할 때 좀더 강력한 기능을 제공하는 XPath 구문을 사용할 수도 있습니다. 그리고 대응관계를 식별 할 때 '필드' 명 변경도 가능합니다. 다운로드 받은 ExtJS내의 예제들을 살펴보면 여러분이 원하는 기능을 구현을 하는데 있어서 좋은 아이디어들을 얻을 수 있을 겁니다.

이제, 데이터스토어 정의의 마지막인데 클라이언트 측 자체 내에서의 데이터 정렬 사용 여부를 결정하고 정렬에 기본값으로 사용될 컬럼과 정렬 순서를 정합니다.

var ds = new Ext.data.Store({
     // load using HTTP
     proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
 
     // the return will be XML, so lets set up a reader
     reader: new Ext.data.XmlReader({
          // records will have an "T4" tag
          record: 'T4',
          id: 'ID',
          totalRecords: "recCount"
     }, [
          // set up the fields mapping into the xml doc
          'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
     ]),
     // turn on remote sorting
     remoteSort: true
});
ds.setDefaultSort('vcLastName', 'desc');

드디어 데이터그리드를 생성하기 위한 스크립트 작성단계까지 왔습니다. 저는 여기까지 진행하면서 비기(gotchas)를 사용하여 대응관계를 정의할 때 항목을 누락시킨다거나 콤마를 빼먹는 멍청한 실수를 피할 수 있었습니다. 여러분들도 Firebug와 자바스크립트 콘솔(Firefox)을 친구로 삼으세요.

다음 장에는 컬럼모델(ColumnModel) 정의를 할 예정입니다. 컬럼 표시방법 초기화와 컬럼 제목 정의 그리고 화면 레이아웃을 예쁘게 만드는 과정 직전까지의 모든 초기화 단계를 살펴볼 것입니다.

이번 장의 소스코드 는 저의 홈페이지인 Cutter's Crossing 에서 얻으실 수 있습니다..

• Ext Programmer's API Documentation
• Ext User Forums