From Learn About the Ext JavaScript Library

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

준비사항

자, 이제 슬슬 진행해봅시다. 첫 번째로 먼저 JQuery 와 ExtJS 라이브러리가 필요합니다. 하필 왜 JQuery 냐구요? 왜냐하면 제가 사용하기 때문이죠, 물론 간단히 Prototype 이나 YUI를 사용하실 수 도 있습니다. 또한 Dimensions JQuery Plugin 이 필요합니다.(이 부분은 설치 문서에 포함되어 있지 않아 좀 어렵습니다) ExtJS 전체 다운로드는 프로젝트 코어 파일들, JS 라이브러리 어댑터 파일들과 모든 Ext 컴포넌트들, 예제들, 문서들 그리고 이미지들과 스타일 시트들이 담긴 '리소스' 디렉터리가 있어서 여러분에게 도움이 될 겁니다.

이제 문서의 header에 중요 스크립트 태그를 위치 시키는 것으로 시작합니다. 놓는 순서가 중요합니다.

<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/plugins/dimensions.js"></script>
<script type="text/javascript" src="js/ext-1.0/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="js/ext-1.0/ext-all.js"></script>
// This is our custom script file
<script type="text/javascript" src="js/paging.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

이번 예제에서는 반드시 '전체(all)' ext 라이브러리가 필요하지는 않지만 진행 과정 중에 몇 가지 테스트를 할 것이고 그 와중에 문제가 발생할 수 도 있으니 사용 하시는 것을 권합니다. '전체(all)' 라이브러리는 모든 컴포넌트 컬렉션과 코어 그리고 유틸리티들이 하나의 스크립트 파일 안에 포함되어 있으며 모든 기능을 갖지만 대신 용량이 큽니다. 만약 필요한 컴포넌트만 담고 싶다면 ExtJS 사이트 내에 있는 'Build your own Ext' 섹션을 참고 하시어 어떻게 필요한 부분만 넣는지 보시면 됩니다.

이제 paging.js 파일을 ExtJS 예제 디렉터리의 바깥인 루트 밑에 js 디렉터리로 복사합시다. 첫 번째 페이징 그리드를 만들기 위해 기존에 있던 파일을 수정하는 방식을 사용합니다. 기존코드를 사용하므로 새로 작성할 필요가 없지요. 인클루드가 될 스타일 시트 파일은 resources 디렉터리에 있음을 기억하세요. 이제 데이터그리드를 담을 컨테이너 div를 아래와 같이 문서 내 body 내에 입력해 봅시다:

<div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div>

여기까지가 초기화의 끝입니다. ExtJS Learn 메뉴에 있는 API and Examples 섹션 만큼이나 다운로드 받은 ExtJS내의 'examples' 디렉터리를 잘 살펴보시기 바랍니다. 그리고 오늘 우리가 작업한 코드의 전체를 여기에서 다운로드 할 수 있습니다.

• Ext Programmer's API Documentation
• Ext User Forums