From Learn About the Ext JavaScript Library

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

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

컬럼모델(ColumnModel)

오늘은 배울 컬럼모델은 ExtJS 데이터그리드의 레이아웃 초기화를 담당합니다. 우린 이미 초기화 준비 와 페이징 쿼리, 그리고 데이터스토어 만들기 를 배웠습니다.

이제 제일 먼저 컬럼모델을 급조해봅시다.

var cm = new Ext.grid.ColumnModel([{
     // cm is our ColumnModel object
 
}]);

다음으로 그리드내 첫 번째 컬럼의 레이아웃을 정의해봅시다

var cm = new Ext.grid.ColumnModel([{
        id: 'fname',
        header: "First Name",
        dataIndex: 'vcFirstName',
        width: 120
     }
}]);

이 작은 코드를 살펴봅시다. 이 컬럼에 id 를 설정하였는데 추후에 스타일을 적용하기 위해 본 컬럼의 참조(reference)로 사용되게 됩니다. 특별한 이유가 있어서 이 위치에 작성을 한 것은 아니고 단지 설명을 하기 위해서 여기에 작성 한 것 일뿐입니다. 다음으로 header 가 있는데 데이터그리드 내에서 컬럼의 제목으로 표시됩니다. 그리고 dataIndex 는 데이터스토어에서 정의된 컬럼을 지정 합니다. 마지막으로 컬럼 내부의 width 속성을 설정 하였습니다.

설명한 것 말고도 다양한 설정 가능한 속성('설정 옵션')이 있으며, 전부 ExtJS API에서 정확한 설명을 얻을 수 있습니다. 앞으로 몇 개 남지 않은 튜토리얼에서 살펴볼 테지만 지금은 단순하게 컬럼모델의 레이아웃을 정의 하겠습니다.

var cm = new Ext.grid.ColumnModel([{
        id: 'fname',
        header: "First Name",
	dataIndex: 'vcFirstName',
	width: 120
     },{
	header: "Last Name",
	dataIndex: 'vcLastName',
	width: 120
     },{
	header: "Is Admin",
	dataIndex: 'bIsAdministrator',
	width: 40
     },{
	header: "Is Active",
	dataIndex: 'bIsActive',
	width: 40
     },{
	id: 'last',
	header: "Last Login",
	dataIndex: 'tsDateLastLogin',
	width: 150
}]);
// by default columns are sortable
 
cm.defaultSortable = true;

설정한 사항이 최종적으로 레이아웃 초기화에 반영되게 하기 위해 각각 컬럼 정의는 중괄호({})사이에 있어야 하고 쉼표로 구분되어야 합니다. 그리고 각각의 속성은 쉼표로 경계를 짓고 속성 이름은 따옴표로 감싸지 말아야 합니다. 속성의 값은 문자형일 경우 작은따옴표로 감싸며 숫자 형은 감싸지 말아야 합니다. 단, header 속성 값의 경우는 반드시 큰따옴표로 감싸야 합니다. 이것 외에 나머지 속성들의 값은 작은따옴표를 사용하는데, 저는 이게 원래 문법 규격(intentional) 인지는 모르겠고 달리 테스트 해보지는 않았지만 다른 모든 예제에서 이렇게 사용하고 있으니 그냥 코딩 관례(convention)라고 생각하기로 했습니다. 마지막에 기본값으로 컬럼모델내의 컬럼 들이 정렬이 가능하도록 설정하였습니다.

좋습니다, 이제 여러분은 자신만의 컬럼모델을 정의하였습니다. 아직까지 몇 단계가 남아있는데 그리드 본체와, 사용자정의 렌더러(custom renderers), 스타일 그리고 소방울(cowbell) 보다 조금 더 큰 잡다 구리한 것들이 남아 있습니다. 이제 다음 장에서 이것들을 다룰 예정입니다.

(주: 저자는 작다라는 의미에서 'cowbell' 이란 단어를 사용한 것 같은데 우리말로 '쥐꼬리' 라고 표현하려다가, 제가 실물을 본적이 없어서 사진자료 를 찾아보니 생각보다 큰 것 같아서 그냥 원어를 사용했습니다. 근데 저자가 미국인이니 미국인의 체격을 고려해봤을 때는 작아 보일 수도 있겠네요.)

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

• Ext Programmer's API Documentation
• Ext User Forums