From Learn About the Ext JavaScript Library

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

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

그리드(Grid)

우리는 지난 튜토리얼에서 컬럼모델을 설정하는 방법을 배웠습니다. 데이터그리드내 컬럼들에 대한 기초적인 레이아웃 설정과 데이터스토어내의 컬럼들과 대응관계 설정과 같은 작업들이었는데요. 이제 실제로 그리드를 만들어 봅시다.

이제 우리가 첫 번째로 할 일은 그리드 객체를 만들고 페이지내의 어떤 html 엘리먼트에 담을지 알려주는 것입니다. div 엘리먼트의 ID와 어떤 데이터스토어 객체를 사용할건지, 그리고 어떤 컬럼모델 객체를 사용할건지를 간단히 함수에 알려주면 됩니다.

// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
     ds: ds,
     cm: cm
});

이것은 아주 간단한 형식인데요, 지금은 예쁘게 보이는 것과는 거리가 멀지만 다음 장에서 모델선택하기와 꾸미기를 진행할 예정입니다. 이 장에서는 간단히 그리드의 사이즈가 조절 가능한(resizble) 상태로 되는 것을 설정 해봅시다.

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
     wrap:true,
     minHeight:100,
     pinned:true,
     handles: 's'
});
rz.on('resize', grid.autoSize, grid);

상단의 코드는 그리드의 사이즈 조절이 가능하게 해주며 그리드가 렌더링 되기 이전에 선언해도 됩니다. 다음 차례는 그리드를 렌더링 하는 것인데 보이는 것처럼 간단합니다.

// render it
grid.render();

이것보다 더 쉬운 방법은 없습니다. 다음으로 풋터에 페이징 툴바 추가 해야 하는데 먼저 풋터를 구하고 페이징 툴바를 추가 시키면 됩니다.

var gridFoot = grid.getView().getFooterPanel(true);
 
// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
     pageSize: 25,
     displayInfo: true,
     displayMsg: 'Displaying users {0} - {1} of {2}',
     emptyMsg: "No users to display"
});

PagingToolbar() 함수의 인자는 풋터 객체와 데이터스토어객체 그리고 페이지사이즈(한 페이지에 보여줄 레코드수), 데이터셋 정보 노출여부, 페이지 카운트 메시지, 보여줄 레코드가 없을 때 표시할 메시지와 같은 설정 속성들을 담고 있는 JSON 객체들로 구성되어 있습니다.

마지막 단계는 데이터스토어를 로드하는 것입니다. 이것만 완료하면 기본적인 데이터그리드를 표시하는 작업이 모두 완료 됩니다.

// trigger the data store load
ds.load({params:{start: 0, limit: 25}});

'params'를 살펴봅시다. 언제든 다음페이지를 호출할 때 POST방식으로 이름/값 쌍으로 전달이 되며 값들은 초기화 요청에 맞게 설정됩니다(0번째 행에서 시작하여 25개의 레코드를 리턴). pagingService.cfm을 살펴보시면 이 값들이 어떻게 사용되는지 살펴볼 수 있습니다.

이제 이 튜토리얼이 끝났습니다. 여러분은 이제 기초적인 데이터그리드를 가지게 되었습니다. 다음 튜토리얼에서는 개별 컬럼데이터를 위한 사용자 정의 렌더러에 몇 가지 스타일을 설정해보도록 하겠습니다.

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

• Ext Programmer's API Documentation
• Ext User Forums