프로페셔널 ext js 5 ria 프로그래밍

지은이 곽옥석

펴낸이 박찬규 엮은이 윤가희 디자인 북누리 표지디자인 아로와 & 아로와나

펴낸곳 위키북스 전화 031-955-3658, 3659 팩스 031-955-3660

주소 경기도 파주시 문발로 115 세종출판벤처타운 #311

가격 35,000 페이지 528 책규격 188 x 240mm

초판 발행 2015년 01월 03일

ISBN 978-89-98139-73-5 (93000)

등록번호 제406-2006-000036호 등록일자 2006년 05월 19일

홈페이지 wikibook.co.kr 전자우편 [email protected]

Copyright © 2015 by 곽옥석

All rights reserved.

First published in Korea in 2015 by WIKIBOOKS

이 책의 한국어판 저작권은 저작권자와의 독점 계약으로 위키북스가 소유합니다.

신 저작권법에 의해 한국 내에서 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다.

이 책의 내용에 대한 추가 지원과 문의는 위키북스 출판사 홈페이지 wikibook.co.kr이나

이메일 [email protected]을 이용해 주세요.

이 도서의 국립중앙도서관 출판시도서목록 CIP는

e-CIP 홈페이지 http://www.nl.go.kr/cip.php에서 이용하실 수 있습니다.

CIP제어번호 CIP2014036010

4

2005년 즈음이였다. 필자는 자바스윙(Java Swing )에 빠져 누가 시키지도 않은 데이터베이스

관리솔루션을 혼자서 개발 중이였다. 완성된 이후 만들어진 스윙 애플리케이션을 애플릿 형태

로 웹 브라우저에 이식하는 작업을 수행하며 웹 UI에 대한 한계와 아쉬움을 확인하게 되었다.

이때부터였던 것 같다. 업무 대부분이 웹 기반이었고 당시 서버 측 기술에는 큰 변화가 없어 웹

에서 실행할 수 있는 화려한 컴포넌트 기반의 무언가를 찾아 헤매게 되었다.

이쯤 Ext JS의 초기버전을 접했을 것이다. 소문난 잔치에 먹을 것 없다고 했던가! 그럴듯해 보

였으나 실무에 적용하기엔 어려움이 많은 미완의 프레임워크였다. 이후 시간이 흘러 필자는

GWT (Google Web Toolkit )에 주목했다. GWT는 자바 개발자를 위한 웹 프레임워크로

HTML과 자바스크립트를 모르더라도 자바 코드만으로 웹 UI를 만들 수 있게 해주었다. 당시

HTML과 엄청난 양의 자바스크립트에 질려 있던 시절이라 단비와도 같은 기술이었다. 더 재밌

는 것은 이시기에 지금의 센차(그때는 extjs.com )에서 GXT (http://www.sencha.com/

examples/)라는 라이브러리를 내놓은 것이다. GXT 라이브러리는 GWT용 플러그인으로,

GWT 개발 시 이 GXT 라이브러리를 이용하면 결과물로 Ext JS가 생산되는 것이다. 이즈음에

블로그에 GWT 관련 포스트를 시작했고 사내 백오피스 시스템 개발의 표준으로 적합한지 테스

트하기 위해 파일럿 프로젝트를 진행하게 되었다.

사실 결과물은 상당히 높은 수준에 UI와 적당히 느리지 않은 속도를 보장해 주었고 오픈플래시

차트는 예쁜 색상과 부드러운 움직임을 보였다. 시스템은 좋은 평가를 얻었지만 사내 표준 기술

로 선정할 수는 없었다. 문제는 생산성이었다. GWT는 자바로 개발하고 구글 앱 엔진에 의한

컴파일을 통해 최적화된 자바스크립트 코드를 만들어 냈다. 이것이 그리 가벼운 작업이 아니어

서 기존 웹 방식의 수정에서 확인으로 이어지는 단순한 개발 패턴도 GWT에서는 너무도 버거

운 기다림의 연속이었다. 또한, 런타임시 브라우저에서 발생하는 여러 에러를 디버깅하는 것 또

한 쉽지 않은 작업에 연속이었다. 이 과정에 얻은 것은 GXT를 적용한 UI가 많은 이들에게 호

평을 받았다는 것에 만족해야 했다. 지금도 GWT와 GXT는 명맥을 이어가고 있고 필자의 블로

그에 문의 글(해외 한국 개발자)이 가끔 올라오는 걸 보면 외국에서는 꾸준히 사용하는 듯하다.

이후 필자의 고민은 좋은 UI와 개발 생산성, 유지보수 용이성 등을 모두 만족하는 새로운 기술

을 찾아야 하는 절박함이었을 것이다. 시간이 흘러 2011년 Ext JS는 어느덧 버전 4를 내놓으

며 상당한 자신감을 보였다. 필자는 다시 한 번 파일럿 프로젝트를 통해 새로운 버전 4를 시험

머리말

5

해 보기로 했다. 버전 4는 기존보다 많은 컴포넌트를 지원했고 나름에 클래스 시스템을 통해 코

드에 객관성을 유지하려 노력한 흔적이 보였다. 그러나 이 또한 쉽지 않았다. 러닝 커브가 상당

해 밤을 새우길 반복하며 코드를 만들어 내야 했고 새로운 버전 4의 레퍼런스는 구글에서도 검

색되지 않아 상당한 어려움이 있었다. 결국, 만들어진 결과는 제대로 된 성능을 보장해 주지 못

했다. 당시만 해도 IE6를 꼭 만족하게 해야 하는 상황이었기에 많은 예외 코드가 발생했고 그

래도 해결되지 않은 IE 성능 문제는 당시 고객들에게 생소했던 크롬 브라우저를 설치하라고 유

도하기에 이르렀다. 시스템 초기 화면에 크롬 설치를 유도하는 팝업을 띄워 설치를 유도했고

Adobe AIR에 패키징해 AIR의 내장 브라우저를 통해 실행되도록 설치 프로그램을 배포하기

도 하였다.

이런 어려움을 겪으면서도 필자가 Ext JS를 포기하지 않았던 이유는 Ext JS가 기업용 웹 애플

리케이션의 미래라고 생각했기 때문이다. 필자가 몸담았던 회사의 어느 시스템은 수백억을 들

여 개발되었으나 사용자의 PC마다 수십 개의 액티브엑스를 설치해야 했고 그중 하나라도 오류

가 발생하면 모두 지우고 다시 설치하는 과정을 반복했다. 이런 일을 전담하는 OA 요원을 상주

시켜야 할 정도였으니 말이다. 웹은 액티브엑스나 플래시 같은 이 기종이 지배하기엔 너무 변화

무쌍하며 연약한 존재이기도 하다. 그러하기에 HTML과 자바스크립트가 아니라면 미래를 보

장할 수 없다는 결론이 나오게 된다.

센차가 앞으로 Ext JS를 얼마나 잘 발전시킬지만 예상한다면 앞으로 기업용 웹 애플리케이션

개발의 표준으로 우뚝 설 것이라는 확신을 하게 했다. 버전 4 이후 짧은 시간에 센차는 성능개

선, MVC 패턴 추가, 센차 SDK, 센차 Cmd를 출시해 개발 전반을 책임질 수 있는 토탈 솔루션

의 모양새를 갖춰나갔다. 필자 또한 자신감을 얻어 사내 웹 표준 기술로 정착시켜 좋은 결과를

얻을 수 있었다.

Ext JS는 분명 좋은 기술이고 미래가 보장된 기술이다. 국내의 저변확대가 어려운 것은 많은 이

유가 있겠지만, 국내 기업의 보수적인 성향과 오픈 소스에 대한 이해 부족, 러닝커브에 걸맞은

교재의 부족 등이 있을 것이다. 이 책을 통해 Ext JS가 널리 보급되길 원하고 우리 개발자가 직

접 쓴 책이 꼭 한 권이라도 있었으면 하는 바람에서 어렵사리 완성하게 되었으니 많은 이들에게

도움이 되길 바란다.

머리말

6

목차

01Ext JS 5 시작하기 12

01.설치 14

Ext JS SDK 설치 15

루비 설치 18

센차 Cmd 설치 24

Java JRE 설치 28

02.ExtJS시작하기 30

03.예제코드구현 34

04.예제코드의공유와피드백 39

02클래스 시스템 42

01.클래스선언과생성 44

02.Config구성요소 48

03.스태틱 52

04.동적클래스로딩과Alias 54

PART

PART

7

목차

03컴포넌트 레이아웃 58

01.Flex이해하기 60

02.Absolute레이아웃 63

03.Fit레이아웃 66

04.Border레이아웃 68

05.Anchor레이아웃 71

퍼센트를 이용한 Anchor 설정 71

오프셋을 이용한 Anchor 설정 73

퍼센트와 오프셋을 모두 이용한 Anchor 설정 74

06.Column레이아웃 75

07.Table레이아웃 77

08.HBox레이아웃 80

09.VBox레이아웃 84

10.Card레이아웃 86

deferredRender를 이용한 렌더링 지연 92

11.Accordion레이아웃 95

Accondion 레이아웃 이벤트 97

PART

04돔 조작 100

01.Ext.dom.Helper클래스 105

02.돔요소를포함한사용자클래스 109

03.컨테이너를이용한돔요소배치 112

04.돔요소이벤트제어 115

05.Ext.query,Ext.get,Ext.select메서드활용 120

Ext.get() 메서드 120

Ext.select() 메서드 121

Ext.query() 메서드 125

06.돔요소추가,삭제 128

Ajax 통신을 이용한 동적 탭 추가 131

컨텍스트 메뉴 추가 134

돔 이벤트 처리 139

05Ext JS 데이터 패키지 144

01.모델 146

모델의 정의 146

모델의 검증 148

프록시를 이용한 입력 및 수정 150

프록시를 이용한 데이터의 읽기 및 삭제 154

모델 간의 관계 설정을 이용한 손쉬운 데이터 로딩 156

목차

PART

PARTPART

8

02. 스토어 168

스토어 생성 168

스토어의 조작 171

06폼 필드와 폼의 로딩, 제출 182

01.폼과폼필드 184

Base 클래스 186

텍스트 필드 187

숫자 필드 189

체크박스와 체크박스 그룹 190

라디오버튼과 라디오 그룹 193

콤보 박스의 서버 데이터 로드와 자동 완성 195

HTML 리치 에디터 199

피커 필드를 활용한 간단한 팝업 만들기 204

02.복잡한폼구성 213

필드셋과 필드 컨테이너를 이용한 폼 필드 배치 217

컨테이너를 이용한 폼 필드 배치 220

동적으로 폼 필드 추가 225

폼 데이터 채우기 232

재활용 가능한 폼 필드 클래스 244

목차

PART

9

07그리드 258

01.기본그리드패널 260

02.그리드칼럼 266

03.칼럼렌더러 272

04.셀렉션모델 280

05.셀렉션이벤트 285

06.그리드소트 288

07.피처 293

08.셀에디팅플러그인 304

09.로우에디팅플러그인 313

10.그리드페이징 318

11.그리드 324

12.대용량데이터처리 324

13.그리드상태유지 334

08새로운 Ext JS 5 338

01.터치디바이스지원과 340

02.새로운테마 340

목차

PART

PART

10

03.새로운아키텍처 342

04.MVVM,MVVC 356

09실전 예제 382

01.센차앱설정 385

02.시스템뼈대구현 391

03.상단메뉴구현 394

04.애플리케이션정보 402

05.애플리케이션 406

06.전체화면보기 406

07.에러처리 410

08.메인프로그램영역 418

09.메뉴트리 426

10.코드미리보기 442

11.애플리케이션상태유지 453

12.라우팅을이용한 457

13.이벤트제어 457

14.대시보드 462

15.빌드 514

목차

PART

11

01

01. 설치

02. Ext JS 시작하기

03. 예제 코드 구현

04. 예제 코드의 공유와 피드백

ExtJS5시작

하기PART

Ext JS 버전 4가 출시된 지 4년 만에 Ext JS 5가 출시됐다. B2B 분야의 웹 시

스템은 B2C 분야와 달리 생산성과 유지보수 측면에서 특별한 발전을 이루지

못하고 있었다. 웹상에서 CS의 장점을 받아드리기 위해 ActiveX를 이용하였

고 이러한 과도한 ActiveX의 사용은 오늘날에 이르러 환영받지 못하는 처지

에 놓였다.

보안과 OS에 대한 종속, IE버전별 문제 등은 결코 해결될 수 없는 숙제로 남

게 되었다. 이때 Ext JS는 화려하고 다양한 기업용 컴포넌트와 자신만의 클래

스 시스템으로 생산성과 코드의 유지보수 측면에서 큰 이점을 주었다. Ext JS

5는 버전 4의 단점을 개선하고 MVVC, MVVM 등 최신 개념과 더 많은 종류

의 차트, 새로운 컴포넌트를 추가함으로써 시스템 구축에 필요한 모든 요소

를 갖추게 됐다.

Ext JS 5 시작하기14

Ext JS는 자바스크립트 언어로 텍스트 편집기와 디버깅할 수 있는 브라우저만 있다면 개발 환

경으로 충분할지도 모른다. 그러나 이러한 얘기도 Ext JS 5에 와서는 달라질 수밖에 없다.

Ext JS 5에서는 센차 Cmd를 통해 애플리케이션을 생성하고 개발, 테스트하여 배포하는 과정

으로 진행한다. 센차 Cmd가 개발에 필수적으로 사용되고 시작과 끝을 책임지게 된 것이다.

이러한 개발환경을 위해 SDK라 불리는 코어라이브러리와 센차 Cmd가 필요하며 테마의 빌드

및 컴파일을 위한 루비도 반드시 설치해야 한다.

필자가 구축한 개발 환경은 아래와 같다.

• OS : 윈도우8(64비트)

• Ext JS 버전 : 5.0.1

• 센차 Cmd 버전 : 5.0.1.231-windows

Ext JS SDK 설치

SDK는 Ext JS를 실행하는 데 필요한 모든 컴포넌트 클래스와 설정 파일, 이미지, 샘플 등 개발

에 필요한 모든 요소를 압축 파일로 배포하고 있다.

설치

01

설치 15

센차 공식 홈페이지(http://www.sencha.com/)에 접속한 뒤 [Products] → [Sencha

Ext JS] 링크를 클릭해 Ext JS 페이지(http://www.sencha.com/products/extjs/)로 이동

한다.

그림 1-1 센차 공식 홈페이지(http://www.sencha.com/)

그림 1-2 Ext JS 전용 페이지(http://www.sencha.com/products/extjs/)

GPL 버전 내려받기

Trial 버전 내려받기


상단에 있는 내비게이션 메뉴에서 “DETAILS”를 클릭하면 오픈소스 GPL 버전을 내려받을 수

있는 페이지로 이동한다.

그림 1-2에서 “DOWNLOAD” 링크를 클릭하고 이메일을 입력하면 Trial 버전 SDK를 내려받을 수

있으나 실행한 UI에 “Ext JS Trial”이라는 문구를 출력하게 된다. 이 책에서는 GPL 버전을 사용했다.

참고

Ext JS Detail 페이지로 이동한 뒤 “DOWNLOAD” 버튼을 클릭해 GPL 버전 SDK를 내려받

는다.

그림 1-3 GPL 버전 SDK 내려받기

설치 17

그림 1-4 Ext JS SDK 내려받기 완료

내려받은 압축 파일을 해제하고 ext-5.0.1 폴더를 C 드라이브의 Sencha\SDK로 복사한다.

그림 1-5 압축 해제한 SDK 폴더 복사


루비 설치

루비(Ruby )는 Sass 파일을 컴파일하기 위한 환경을 제공한다. 이후 설치할 센차 Cmd는 빌드

과정에서 테마 또한 빌드하게 되는데, 이 테마의 개발이 Sass를 통해 이뤄진다. 따라서 루비를

설치해야 센차 Cmd를 이용한 빌드를 정상적으로 완료할 수 있다.

http://rubyinstaller.org/down loads/에 접속해 사용하고 있는 운영 체제에 적합한 최신

버전의 루비를 내려받는다. 여기에서는 Ruby 2.0.0을 내려받았다.

그림 1-6 루비 내려받기

내려받은 실행 파일을 실행하고 보안 경고가 보이면 “실행(R )” 버튼을 클릭한다.

설치 19

그림 1-7 루비 설치하기 1 - 설치 보안 경고

Select Setup Laungage 창에서 언어를 “English”로 선택하고 “OK” 버튼을 클릭한다.

그림 1-8 루비 설치하기 2 - 설치 언어 선택

라이선스에 동의하고 “Next” 버튼을 클릭한다.

그림 1-9 루비 설치하기 3 - 라이선스 동의


루비를 설치할 경로를 지정하고 “Install” 버튼을 클릭한다.

그림 1-10 루비 설치하기 4 - 설치 경로 지정

설치가 완료되면 “Finish” 버튼을 클릭해 설치를 마친다.

그림 1-11 루비 설치하기 5 - 루비 설치 완료

루비를 설치했으면 OS 내부의 모든 경로에서 루비를 실행할 수 있게 클래스 패스를 지정해야

한다. 시스템 환경 변수에 루비를 추가해 센차 Cmd로 앱을 빌드할 때 루비를 호출할 수 있게

하자.

설치 21

탐색기를 실행한 뒤 “내 PC”를 마우스 오른쪽 버튼으로 클릭하고 “속성(R )” 메뉴를 클릭한다.

그림 1-12 환경 변수 등록하기 1 – 시스템 창 열기

시스템 창이 보이면 왼쪽 메뉴에서 “고급 시스템 설정”을 클릭한다.

그림 1-13 환경 변수 등록하기 2 – 시스템 창


시스템 속성 창이 보이면 “고급” 탭을 선택한 뒤 “환경 변수” 버튼을 클릭한다.

그림 1-14 환경 변수 등록하기 3 – 시스템 속성 창

환경 변수 창이 보이면 “새로 만

들기” 버튼을 클릭한다. 변수 이

름에 “Ruby”를 입력하고, 변수

값에 루비를 설치한 경로(C:\

Ruby200-x64 )를 입력한 뒤 “확

인” 버튼을 클릭한다.

그림 1-15 환경 변수 등록하기 4 – 환경 변수 추가

➋

➌

➊

설치 23

시스템 변수에 “Ruby”가 추가됐다.

그림 1-16 환경 변수 등록하기 5 - 시스템 환경 변수에 추가된 Ruby

새로 추가한 Ruby 변수를 “Path” 변수에 추가해 시스템의 어디서든지 호출할 수 있게 하자. 시

스템 변수에서 “Path” 변수를 더블 클릭해 편집 창을 띄운 후 변수 마지막에 “;%Ruby%\bin”

을 추가하고 “확인” 버튼을 클릭한다.

그림 1-17 환경 변수 등록하기 5 – Path 환경 변수에 Ruby 변수 추가

➋

➌

➊


명령 프롬프트를 실행해 Ruby가 정상적으로 호출되는지 확인해보자. [시작] → [실행](또는

윈도우 + R 키)을 클릭해 “실행” 창을 띄운 뒤 입력필드에 “cmd”를 입력하고 “확인” 버튼을 클

릭하면 명령 프롬프트가 실행된다.

그림 1-18 루비 설치 확인 1 - 실행 창 실행

명령 프롬프트가 실행되면 ruby –v를 입력한다. 루비 버전이 출력되면 클래스 패스가 정상적

으로 적용된 것이다.

그림 1-19 루비 설치 확인 2 - 루비 클래스 패스 확인

센차 Cmd 설치

센차 Cmd (Sencha Cmd )는 Ext JS 개발에 있어서 없어서는 안 될 프로그램으로 성장했다.

이 프로그램은 센차 클래스 시스템을 기반으로 앱을 생성하고 테스트, 빌드하며, 내장 웹 서버

를 이용해 앱을 직접 실행할 수 있게 지원한다.

http://www.sencha.com/products/sencha-cmd/download에 접속해 적절한 버전의

센차 Cmd를 내려받고 설치한다. 이 책을 쓰는 시점에서 최신 버전은 5.0.1 버전이다.

설치 25

그림 1-20 센차 Cmd 내려받기

내려받은 파일을 더블클릭해 실행한다.

그림 1-21 내려받은 센차 Cmd 실행 파일

그림 1-22 Java 설치 에러

실행 시 그림 1-22와 같은 에러

가 나타난다면 적합한 Java JRE가

설치되지 않은것으로 1.1.4절의 Java

JRE 설치 과정을 참고해 Java JRE를

설치한다.

참고


Java JRE가 정상적으로 설치돼 있다면 그림 1-23과 같이 설치 화면이 보일 것이다. “Next” 버

튼을 클릭해 설치를 진행한다.

그림 1-23 센차 Cmd 설치하기 1 – Setup 페이지

라이선스 동의 화면에서 “I accept the agreement”에 체크하고 “Next” 버튼을 클릭한다.

그림 1-24 센차 Cmd 설치하기 2 - 라이선스 동의

설치 27

이후 센차 Cmd를 설치할 경로를 지정하고 “Next” 버튼을 클릭해 설치를 완료한다.

그림 1-25 센차 Cmd 설치하기 3 – 설치 완료

Ext JS를 위한 설치 작업을 완료했다. 명령 프롬프트를 실행하고 센차 Cmd가 정상적으로 작동

하는지 확인해보자.

그림 1-26과 같이 명령 프롬프트에서 “sencha”라고 입력했을 때 관련된 정보가 출력된다면

정상적으로 설치된 것이다.

그림 1-26 센차 Cmd 설치 확인


Java JRE 설치

센차 Cmd를 설치하려면 최소 Java 1.6 이상의 JRE가 설치돼 있어야 한다. 센차 Cmd를 설치

하면서 Java 설치 에러를 확인했다면 다음 과정을 거쳐 Java JRE를 설치해야 한다.

https://java.com/ko/download로 이동한 뒤 JRE를 내려받는다.

그림 1-27 Java JRE 내려받기

내려받은 설치 파일을 더블클릭해 실행한다. 그림 1-28과 같은 창이 뜨면 “예(Y )”를 클릭한다.

그림 1-28 Java JRE 설치하기 1 - 사용자 계정 컨트롤 확인

설치 29

Java 설치 시작 화면이 보이면 “설치” 버튼을 클릭한다.

그림 1-29 Java JRE 설치하기 2 - Java 설치 시작

설치 과정이 진행된 후 Java 설치 완료 화면이 확인되면 설치가 완료된 것이다.

그림 1-30 Java JRE 설치하기 3 - Java 설치 완료


개발을 위한 환경 설정이 끝났다면 앞으로 배울 내용을 정리할 수 있게 예제 앱을 생성해보자.

C:\Sencha 폴더에 workspace 폴더를 생성하고 이 폴더에 예제 용 앱을 생성하겠다. 명령 프

롬프트를 실행하고 C:\Sencha\workspace로 이동해 예제용 앱을 생성하는 코드를 실행한다.

cd c:\Sencha\workspace

sencha generate app -ext ext5 MyExtJS

generateapp: 앱 생성(센차 Cmd 명령)

ext5: 생성된 앱 이름. 클래스 네임스페이스의 맨 앞을 결정(예: ext5.view.Main..)

MyExtJS: workspace 폴더 내부에서 앱이 위치할 폴더명

이 책의 예제 코드는 다음 주소로 접속해 “Download ZIP” 버튼을 클릭하면 내려받을 수 있다. 예

제에 포함된 이미지, css, Javascript 파일은 resources 폴더에 있으므로 이후 복사해 사용하고 미리 실

행해 보는 것도 좋을 것이다.

https://github.com/wikibook/extjs5

더 자세한 내용은 1.4절 예제 코드의 공유와 피드백에서 살펴보자.

필독사항

이 책이 출판될 시점에 5.1 버전이 출시되어 앱 생성시 앱이름에 “ext”가 포함될 경우 에러를 유발해 앱 생

성코드를 변경해야 했다.

sencha generate app -ext ext5 MyExtJS

위의 명령은 내려받은 sdk를 사용하지 않고 트라이얼 버전을 자동으로 내려받아 앱이 생성되며, 트라이

얼 문구가 패널의 title에 표기됨을 유의하자. 내려받은 sdk를 사용하려면 “ext5”라는 앱이름을 변경하고

다음 명령을 사용하자.

sencha -sdk sdk패스 generate app myext MyExtJS

참고

Ext JS 시작하기

02

Ext JS 5 시작하기 31

그림 1-31 센차 Cmd로 앱 생성

탐색기에서 C:\Sencha\workspace로 이동해 앱이 생성된 모습을 확인하자.

그림 1-32 센차 Cmd로 생성한 앱 확인


앱 폴더 내부에 자동으로 생성된 파일을 간단하게 살펴보자.

• .sencha: 앱과 관련된 설정 파일이 위치한다. 빌드 및 개발과 관련된 세부 속성을 변경할 때 관련 파일을

수정할 수 있다.

•app: 앱에서 실행되는 모든 클래스 파일이 위치한다. 내부에 MVC에 해당하는 각 폴더가 있다.

• build: 앱을 빌드하면 해당 파일들이 위치한다. 빌드는 production, development, testing 3가지로 구분

된다.

•ext: 앱 생성시 참조한 –sdk 경로에서 관련 파일만 추출해 복사하여 앱이 실행될 수 있게 한다.

• override: 기존 클래스를 변경하지 않고 오버라이드해 변경된 내용으로 작동할 수 있는 클래스 코드를 추

가한다.

•packages: 별도 테마나 패키지가 위치한다.

•resources: 관련 이미지 등 리소드 파일이 위치한다.

•sass: 테마 또는 사용자 스타일을 적용하기 위한 scss 파일이 위치한다.

•app.js: 앱의 인트로 클래스다. 이 클래스로 실행될 수 있는 앱의 형태를 띄게 된다.

• app.json: 앱의 설정 파일이다. 테마 변경, 외부 패스 설정, 로케일, 다중 테마, 차트 등을 사용할 수 있게

설정한다.

• bootstrap.css: 앱에 연결된 테마 파일 링크가 위치한다. 이 파일은 sencha app watch 명령으로 개발

시 build 폴더 내부의 development를 참조하고, sencha app build 명령 이후에는 production 폴더를

참조하는 것으로 변경된다.

• bootstrap.js: 앱이 실행될 때 사용되는 index.html 파일에서 앱을 로딩하기 위해 이 파일을 로드한다. 이

파일은 앱을 실행하는 데 관련된 모든 파일을 로드할 수 있게 돕는다.

• bootstrap.json: 센차 Cmd가 생성하며 계속 변경된다. sencha app build 또는 sencha app watch 명

령이 새로 추가된 클래스 또는 필요한 모든 파일 정보를 기록한다. 이 파일은 bootstrap.js가 호출하므로

사용자가 수정하지 않는다.

•build.xml: 아파치 Ant를 이용해 빌드 프로세스를 변경할 때 사용한다.

•index.html: 앱을 최종 실행하는 데 필요한 파일이다. app.json 내부에서 이 파일의 위치 및 이름을 변경

할 수 있다.

Ext JS 5 시작하기 33

생성된 앱의 파일 구조를 알아봤으니 센차 Cmd에 내장된 jetty 웹 서버를 이용해 앱을 실행한

다. 명령 프롬프트에서 생성된 앱 폴더로 이동하고 웹 서버를 실행하는 명령을 수행한다.

cd c:\Sencha\workspace\MyExtJS

sencha web start

그림 1-33 센차 Cmd 내부의 jetty 웹 서버 실행

sencha web start는 기본적으로 1841번 포트에서 실행된다. 포트를 변경하고자 한다면 sencha fs

web -port 8000 start와 같이 원하는 포트를 명시해 실행할 수 있다.

참고

브라우저를 실행해 생성된 앱을 확인하자. 웹 서버의 기본 포트는 1841이다. 센차 Cmd가 만

든 기본 앱이 실행될 것이다.

그림 1-34 센차 Cmd로 생성한 앱 확인


이번에는 예제를 실습하기 위한 파일 구조를 알아보겠다. 각 예제는 app 폴더 내부에 클래스 파

일로 추가할 것이다. 이 클래스 파일은 장별로 HTML 파일에서 호출돼 실행될 것이며, HTML

파일은 앱 폴더 내부에 examples 폴더를 생성하고 그 아래에 장별로 폴더를 생성해 위치시킬

것이다.

그림 1-35 예제 코드의 파일 구조

예제 코드 구현

03

예제 코드 구현 35

모든 예제는 기본적으로 같은 HTML을 사용한다. 다른 부분이 있다면 따로 설명을 추가할 것

이고, 각 HTML 파일명은 각 장별로 제시하겠다.

examples 폴더에 chapter1 폴더를 생성한다. HTML 파일을 생성해 아래와 같이 코드를 작

성하고 chapter1 폴더에 1_HelloWorld.html로 저장한다.

HTML /examples/chapter1/1_HelloWorld.html

변경 내용 �파일을�생성하고�다음과�같이�작성한다.

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>SAT</title>

<link rel="stylesheet" type="text/css"

href="/ext/packages/ext-theme-gray/build/resources/ext-theme-gray-all-debug.

css">�

<script type="text/javascript" src="/ext/build/ext-all-debug.js"></script>

</head>

<body>

<script type="text/javascript">

Ext.Loader.setConfig({

enabled: true,

paths: {

'ext5': '/app' // ➊

}

});

Ext.require([

'ext5.view.chapter1.HelloWorld' // ➋

]);

Ext.onReady(function () { // ➌

Ext.create('ext5.view.chapter1.HelloWorld', { // ➍

renderTo: document.body, // ➎

width: '100%', // ➏

height: 150, // ➐

bodyPadding: 5

});

})

</script>

</body>

</html>


Ext JS를 실행하려면 <head> 영역에서 테마 파일(ext-theme-gray-all-debug.css )과 코

어라이브러리(ext-all-debug.js )를 로딩해야 한다. 이 두 파일은 독립적인 HTML 파일로

Ext JS 애플리케이션을 실행할 때 사용된다.

➊ 예제 코드의 실행은 각 HTML을 통해 이뤄지고 HTML에서 사용되는 클래스는 생성된 ext5라는 앱에 패키

지 형태로 존재한다. 각 HTML에서는 이 앱을 인식하기 위한 코드가 필요하다. 이 코드는 ext5라는 앱의

클래스들이 app 폴더에 있음을 알려준다.

➋ 예제를 실행하는 데 필요한 클래스를 동적 로딩한다. 동적 로딩은 이후 배울 예정이므로 여기서는 관련 클

래스를 명시한다고 생각하자.

➌ Ext.onReady는 Ext JS가 실행될 수 있는 코드 영역을 의미하며 이는 브라우저에서 로딩할 때 자바스크립

트가 실행될 수 있는 타이밍을 체크하고 코드가 안전하게 실행될 수 있게 도와준다.

➍ 실습을 위해 작성한 클래스를 인스턴스화한다.

➎ 인스턴스가 생성되면 브라우저에 렌더링한다.

➏, ➐ 작성된 UI 클래스에 크기(너비와 높이)를 부여한다.

이제 HTML에서 호출할 Ext JS 클래스 파일을 작성하자. 클래스 파일은 app 폴더에 있는 4개

의 폴더(model, store, view, controller )에 분류해 저장하겠다.

그림 1-36은 chapter1의 HelloWorld 클래스로 examples/chapter1/1_HelloWorld.

html 파일에서 실행될 것이다.

그림 1-36 HelloWorld 클래스(MyExtJS/app/view/HelloWorld.js)

예제 코드 구현 37

앞서 작성한 HTML에서 사용할 HelloWorld.js 클래스 파일을 view\chapter1 폴더에 생성

하고 다음과 같이 작성한다.

JavaScript /app/view/chapter1/HelloWorld.js

변경 내용 �파일을�생성하고�다음과�같이�작성한다.

Ext.define('ext5.view.chapter1.HelloWorld', { // ➊

extend: 'Ext.panel.Panel', // ➋

alias: 'widget.chapter1-helloworld', // ➌

/*otherContent: [ // ➍

{

type: 'Login',

path: 'app/view/dataview/MultiSortButton.js'

},

{

type: 'Data',

path: 'resources/data/sencha-touch-examples.json'

}

],*/

title: 'Hello World', // ➎

��html:�'안녕하세요�ExtJS5를�같이�배워요!!'�� //�➏

});

➊ Ext.define은 클래스를 정의하는 문법이다. 이후 클래스 이름을 정의한다. 클래스명은 온점(.)으로 구분되

는 마지막 단어이고 패키지명을 다시 온점(.)으로 구분한다. 맨 앞의 “ext5”는 모든 클래스에서 공통으로

사용할 앱의 이름이다.

여기에서는 view.chapter1까지가 패키지명에 해당하고 HelloWorld가 클래스명에 해당한다.

ext5.view.chapter1.HelloWorld

➋ 대부분 클래스는 extend를 이용해 확장하며 확장할 클래스의 전체 이름을 명시한다. 이 클래스는 ‘Ext.

panel.Panel’ 클래스를 확장한다.

➌ alias는 클래스의 함축적인 이름이다. 컨테이너에 자식으로 추가할 때 xtype으로 사용한다.

➍ otherContent는 이 클래스에서는 해당 사항이 없어 주석 처리했다. 예제를 실행하는 데 필요한 다른 클래

스가 무엇인지 명시하는 영역으로 클래스 실행에 직접 연관되지는 않으나 이 책의 마지막 실전 예제에서

예제별 연관 클래스를 보여주는 데 필요한 설정이다.

➎, ➏ title과 html 요소를 설정한다.

앱이름 패키지명 클래스명


브라우저에서 http://localhost:1841/examples/chapter1/1_HelloWorld.html로 이동해

결과를 확인하자.

그림 1-37 1_HellowWorld.html 실행 결과

이처럼 Ext JS는 UI를 표현할 css 스타일과 돔 요소를 제어하는 자바스크립트 라이브러리만으

로 작동될 수 있다.

예제 코드의 공유와 피드백 39

이 책의 모든 예제는 깃허브에 오픈소스 형태로 공유하고 있다.

https://github.com/wikibook/extjs5로 접속해 “Download ZIP” 버튼을 클릭해 소스를

내려받고 센차 Cmd를 이용해 실행하면 이 책의 모든 예제를 미리 살펴볼 수 있다.

그림 1-38 깃허브에서 예제 코드 내려받기

예제 코드의 공유와 피드백

04


소스 코드가 실행되는 모습을 직접 확인하려면 http://extuxgroup.com에 접속하기 바란다.

이 애플리케이션은 이 책에서 만들 마지막 실전 예제이기도 하다.

그림 1-39 이 책의 마지막 실전 예제(http://extuxgroup.com)

필자는 독자에게 책의 오탈자 및 오류를 알리고 독자와 소통을 위해 의견을 게시하고 피드백

을 받을 사이트(http://forum.extuxgroup.com )를 제공한다. 또한 필자의 블로그(http://

benney.tistory.com )에서 관련 강좌를 제공하고 있으니 도움이 되길 바란다.

클래스 시스템42

02

01. 클래스 선언과 생성

02. Config 구성 요소

03. 스태틱

04. 동적 클래스 로딩과 Alias

클래스시스템

PART

02. 클래스 시스템 43

Ext JS는 300여 개 이상의 클래스와 이를 기반으로 하는 아키텍처를 가졌다.

객체지향 언어를 표방해 상속, 다중 상속, 이벤트를 통한 접근 등 고급 언어

에서 볼 수 있는 거의 모든 개념을 탑재해 다양하고 복잡한 애플리케이션을

구현할 수 있다.

자바스크립트는 유연한 언어다. 그러나 이러한 유연함이 많은 코딩 스타일과

기법 등을 낳게 됐고 코드를 예측하거나 유지하는 데 많은 비용을 지불하게

됐다. Ext JS 클래스 시스템은 캡슐화를 지원하고, 표준 코딩 컨벤션을 사용

할 수 있어 작성된 코드의 예측과 확장이 용이하다.

Ext JS 클래스 시스템을 통해 시간이 지날수록 애플리케이션의 가치는 증가

하고 안정적인 유지보수를 할 수 있다.


클래스는 Ext JS 컴포넌트의 최소 단위로, 클래스를 만드는 방법과 만들어진 클래스를 실행하

는 방법을 알아야 한다. 1.3절에서 간단한 Panel 클래스를 상속하여 정의했고 정의된 클래스를

HTML 파일에서 호출(인스턴스)해 브라우저에 의도한 UI가 보이게 했다.

Ext JS는 UI 프레임웍으로 대부분 클래스가 정해진 형태를 가지며 이러한 특징적인 형태는

API에 잘 정리돼 있다. 우리가 할 일은 구현하고자 하는 형태의 클래스가 존재하는지 확인하고

원하는 기능과 얼마나 유사한지 판단하는 것이다.

다음 코드는 전형적인 클래스 선언 방법을 보여준다. 클래스를 선언하기 위해 API의 ‘Ext.

panel.Panel’ 클래스를 확장했다. Panel 클래스의 전형적인 모습이 우리가 구현할 클래스 모

습 또는 기능과 적합하다는 판단이 있어야 할 것이다.

HTML /examples/chapter2/2_DefineClass.html

변경 내용 1장에서�작성한�html�파일을�복사해�다음과�같이�변경한다.

Ext.require([

'ext5.view.chapter2.DefineClass’

]);

Ext.create('ext5.view.chapter2.DefineClass’, {

….

});

클래스 선언과 생성

01

클래스 선언과 생성 45

Javascript /app/view/chapter2/DefineClass.js

변경 내용 파일을�생성하고�다음과�같이�작성한다.

Ext.define('ext5.view.chapter2.DefineClass', { // ➊

extend: 'Ext.panel.Panel', // ➋

alias : 'widget.chapter2-defineclass', // ➌

initComponent: function () { // ➍

var me = this;

Ext.apply(me, { // ➎

��title:�'안녕하세요�환영합니다.^^',

items: [ // ➑

{

xtype: 'button',

text: 'Click Me!'

}

]

});

me.callParent(arguments); // ➏

me.on('render', function(component){ // ➐

��console.log('클래스가�브라우저에�렌더링될�때�실행되요.');

});

}

});

➊ Ext.define 함수를 이용해 클래스를 정의했다. 클래스명은 문자와 숫자를 포함할 수 있고 밑줄은 권장하지

않는다. 패키지는 온점(.)으로 구분하며 아래 예시처럼 최상위 이름과 최종 이름은 카멜 표기법을 사용한

다. 그 외에는 소문자 표현을 권장한다.

예) MyClass.form.action.AutoLoad

➋ 확장하려는 클래스를 명시한다. API에서 제공하는 수많은 클래스 중 하나를 선택하고 적절히 수정해 원하

는 기능을 구현한다.

➌ 함축적인 클래스 약칭이며 위젯명이라 불린다. 이와 같이 쓸 수 있는 표현은 xtype으로 아래 예와 같이

xtype으로 사용할 때 ‘widget’ prefix를 제거한 상태로 사용한다.

예) alias : ‘widget.chapter2-defineclass’ >> xtype : ‘chapter2-defineclass’

➍ 확장할 클래스의 기능을 재정의 할 때 initComponent 메서드를 사용한다. 이는 확장한 부모 클래스의 구

성 요소를 초기화하고 사용자가 정의한 클래스에 원하는 로직이 작동될 수 있게 한다.

이 메서드는 (➏)me.callParent(arguments)를 꼭 필요로 하며, 없다면 클래스가 작동하지 않을 것이다.


➎ Ext.apply 메서드의 첫 번째 인자는 추가될 대상 오브젝트이고, 두 번째 인자는 추가할 대상 오브젝트다.

코드에서 Ext.apply의 첫 번째 인자는 this를 참조하는 me 변수다. 이 me 변수는 this를 참조하고 this는

Ext.panel.Panel 클래스를 확장한 DefineClass 클래스 자신을 의미한다. 즉 DefineClass 클래스에 두 번

째 인자인 title, items 등의 구성 요소를 DefineClass의 것으로 만들겠다는 의미다.

이러한 코드는 일반적으로 클래스를 정의하고 변경하는 방법으로 아래 예의 결과와 같다.

this.title�=�"안녕하세요�환영합니다.";

this.items = [

{

xtype: 'button',

text: 'Click Me!'

}

];

➐ on 구문은 이벤트 리스너를 정의하는 함축적인 사용법이다. me.on이라면 DefineClass에 이벤트 리스너

를 추가한다는 의미로 me.on 이후에는 이벤트 이름과 발생 후 어떤 일을 할 것인지 정의하는 function 구

문이 필요하다.

•me : 이벤트 리스너가 감시할 대상

•on : on 구문 앞 쪽에 위치한 대상에 이벤트 리스너를 추가한다.

•render : 해당 클래스를 렌더링할 때 발생하는 이벤트다.

•function : render 이벤트가 발생되면 즉각 호출돼 구현된 내부의 내용을 실행할 것이다.

➑ items는 Container 클래스에 자식을 추가하는 구성 요소로 API 중 Ext.container.Container 클래스를 확

장한 클래스만 존재한다. Container 클래스는 내부에 자식을 추가하고 배치하는(레이아웃) 기능을 가지며

Ext.panel.Panel 클래스 또한 Container 클래스를 확장해 만든 코어 클래스다.

클래스를 정의했다면 정의된 클래스를 인스턴스화 하는 방법, 즉 실행 방법을 알아보자.

2_DefineClass.html 파일에서 확인할 수 있듯이 Ext.create 메서드를 이용해 정의된 클래스를 인스턴스

화할 수 있다.

Ext.create('ext5.view.chapter2.DefineClass', {

renderTo: document.body,

width: '100%',

height: 150,

bodyPadding: 5

});

클래스 선언과 생성 47

UI 클래스의 특징상 브라우저에 렌더링하는 과정이 필요하므로 renderTo 구성 요소를 정의하게 된다.

document.body는 HTML 파일 내부에 BODY 태그로 BODY에 직접 렌더링한다는 의미다. 아래 예처럼 특정

DIV 태그에 id를 부여해 해당 UI 클래스가 보이게 할 수도 있다.

예) <div id="header"></div>

이 경우 renderTo : ‘header’로 설정하면 된다.

또 다른 방법으로 Ext.widget 메서드를 이용할 수 있다. Ext.widget 메서드는 클래스가 가진

위젯명으로 인스턴스화 하는 것으로 사용법은 기존 Ext.create를 대체하면 된다.

Ext.widget('chapter2-defineclass', { // ➊

renderTo: document.body,

width: '100%',

height: 150,

bodyPadding: 5

});

그림 2-1 클래스 선언과 생성

위 코드에 있는 ➊의 Ext.widget 메서드는 Ext.create와 동일한 결과를 얻기 위해 사용한 것이고 일

반적인 쓰임은 아니다. widget은 클래스의 함축적 이름으로 컨테이너의 자식 컴포넌트로 배치될 경우 유

용하고 컨테이너의 레이아웃에 의해 인스턴스화 되는 시점이 결정되므로 미리 인스턴스화되어 자원을 낭

비하는 것을 막아준다.

자세한 내용은 3장의 컴포넌트 레이아웃을 참조하자.

참고


Ext JS 클래스 시스템은 Config (구성 요소) 기능을 제공한다. 클래스에 Config 옵션을 정의

하면 클래스 시스템은 자동으로 세 개의 메서드(getter, setter, apply )를 생성한다. 이를 이

용해 클래스에 매개변수를 전달해 값을 설정하고 수정할 수 있어 코드 라인이 줄어들고 API 사

이의 일관성을 유지할 수 있는 장점을 제공한다.

Javascript /app/view/chapter2/ClassConfig.js


Ext.define('ext5.view.chapter2.ClassConfig', {

extend: 'Ext.panel.Panel',

xtype: 'chapter2-classconfig',

title: 'ClassConfig',

config: { // ➊

��subject:�'제목을�입력하세요',�� //�➋

bottomBar: { // ➌

height: 50,

width: 200

}

},

applySubject: function (subject) { // ➍

if (!Ext.isString(subject) || subject.length === 0) {

Config 구성 요소

02

Config 구성 요소 49

��console.log('제목은�반드시�입력해야�합니다.');

}

else {

return subject;

}

},

applyBottomBar: function (bottomBar) { // ➎

if (bottomBar) { // ➏

if (!this.bottomBar) { // ➐

return Ext.create('MyInnerClass', bottomBar);

}

else {

this.bottomBar.setConfig(bottomBar); // ➑

}

}

}

});

//�ClassConfig.js�파일�내부의�ClassConfig�클래스�하단에�다음과�같이�기술했다.

Ext.define('MyInnerClass', { // ➒

config: {

height: undefined,

width: 100

}

});

➊ config 설정을 이용해 사용자 클래스 Config를 정의한다.

➋ subject Config를 정의하고 설정한다.

➌ bottomBar를 정의한다. subject과 달리 Object 형태의 Config다.

➍ subject Config를 설정하기 위한 apply 메서드다. 사용자가 세터 메서드를 실행하면 자동으로 호출되는

메서드로 이 메서드가 반환하는 값이 클래스에 최종 설정된다.

➎ bottomBar를 설정하기 위한 apply 메서드다.

➏ 인자로 전달되는 bottomBar 변수가 정상일 때 작동한다.

➐ this.bottomBar가 비어있을 때 작동한다. this.bottomBar는 ➊에서 설정한 bottomBar를 의미한다.

➑ (➐)의 반대 조건일 때 실행되며 this.bottomBar에 새롭게 전달받은 인자를 설정하는 코드다.

➒ config를 가진 클래스로 (➐) 조건일 때 이 클래스가 생성되고 인자로 전달된 bottomBar가 이 클래스에 설

정된다.


클래스 정의가 끝났다면 이 클래스를 생성하고 테스트 할 코드를 HTML 파일에 작성한다. 샘

플용 HTML 파일을 복사해 다음과 같이 작성하자.

HTML /examples/chapter2/4_ClassConfig.html


Ext.require([

'ext5.view.chapter2.ClassConfig'

]);

Ext.onReady(function () {

var myWindow = Ext.create('ext5.view.chapter2.ClassConfig', {

��subject:�'안녕하세요�^^',�� //�➊

renderTo : document.body,

bottomBar: { // ➋

height: 60

}

});

console.log(myWindow.getSubject()); // ➌

��myWindow.setSubject('반갑습니다.^^');�� //�➍

console.log(myWindow.getSubject()); // ➎

myWindow.setSubject(null); // ➏

myWindow.setBottomBar({ height: 100 }); // ➐

console.log(myWindow.getBottomBar().getHeight()); // ➑

})

➊ 클래스를 생성하면서 subject Config를 설정한다.

➋ 클래스를 생성하면서 bottomBar Config를 설정한다. height으로는 60을 전달한다.

➌ 게터를 이용해 subject Config를 확인한다. (➊)로 인해 실행 결과는 “안녕하세요”로 출력된다.

➍ 세터를 이용해 subject Config를 다시 설정한다. (➎)에서 다시 확인하면 “반갑습니다^^”가 출력된다.

➎ 게터를 이용해 (➍)에서 설정한 값을 확인한다.

➏ 세터를 이용해 subject Config를 null로 설정한다. ClassConfig 클래스의 applySubject 메서드를 다시

확인하면 null 값이 입력될 때 “타이틀은 반드시 입력해야 합니다”라고 출력하게 돼 있다.

➐ 세터를 이용해 bottomBar Config를 설정한다. 이 Config는 Object 타입으로 여기에서는 height만 100으

로 설정했다.

➑ (➐)에서 설정한 bottomBar의 height 값을 게터를 이용해 확인한다. 당연히 100이 출력된다.

Config 구성 요소 51

그림 2-2 Config 구성 요소 실행 결과

예제 실행 시 다음과 같은 메시지가 뜬다면 크롬 실행 옵션을 조정해 해결할 수 있습니다.

XMLHttpRequest cannot load http://prosperent.com/settings/getinterfacesettings.

The 'Access-Control-Allow-Origin' header has a value 'http://localhost' that is

not equal to the supplied origin. Origin 'http://localhost:1841' is therefore

not allowed access.

명령 프롬프트에서 크롬이 설치된 경로로 이동한 후 다음과 같이 명령을 실행하면 크롬이 실행되며

실행 옵션이 설정됩니다.

C:\Program Files (x86)\Google\Chrome\Application>chrome.exe --allow-file-

access-from-files

그림 2-3 크롬 엑세스 오류 발생 시 실행 옵션 설정

참고


모든 클래스에는 스태틱 변수와 메서드를 정의할 수 있다. static은 인스턴스를 생성하지 않고

접근할 수 있다. 즉 create로 생성하지 않고 ‘클래스명.변수’ 또는 ‘클래스명.메서드’로 접근

한다.

Javascript /app/view/chapter2/ClassStatic.js


Ext.define('ext5.view.chapter2.ClassStatic', {


xtype: 'chapter2-classstatic',

config : {

studentName : null

},

statics : {

studentCount : 0,

student : function(studentName) {

��return�new�this({� //�강제로�생성자�호출

studentName : studentName,

studentCount: this.studentCount++

});

}

}

});

스태틱

03

스태틱 53

HTML 파일을 준비하고 클래스를 실행하자.

HTML /examples/chapter2/5_ClassStatic.html


Ext.require([

'ext5.view.chapter2.ClassStatic'

]);


var myWindow = Ext.create('ext5.view.chapter2.ClassStatic', {

��title:�'안녕하세요�^^',

renderTo : document.body,

bottomBar: {

height: 60

}

});

��var�static1�=�ext5.view.chapter2.ClassStatic.student('홍길동');

��var�static2�=�ext5.view.chapter2.ClassStatic.student('김철수');

console.log(static2.getStudentName());

console.log(ext5.view.chapter2.ClassStatic.studentCount);

})

그림 2-4 Static Class 실행 결과


동적 클래스 로딩은 페이지를 빠르게 로딩하는 것보다는 유연성이 중요한 개발 환경에서 사용

한다. 자바스크립트를 사용하기 위해 HTML 파일 내부에 다음과 같이 자바스크립트 파일을 포

함시키는 것이 일반적이다.

<script type="text/javascript" src="../../app/view/chapter2/RequireClass.js"></script>

<script type="text/javascript" src="../../app/view/chapter2/DynamicPanel.js"></script>

Ext JS는 개발 모드가 완료되면 운영 단계에서는 모든 클래스 파일을 하나로 모아 압축하고 최

적화 하는 과정을 거쳐 한 개의 파일만 배포한다. 이때 압축 및 최적화 과정을 거치며 소스 코드

는 작은 용량과 빠른 실행 성능을 보이게 된다.

이와 달리 개발 환경에서는 발생된 에러의 위치(클래스 라인)와 에러의 종류에 따른 디버깅 메

시지가 구체적이여야 하므로 API의 모든 클래스와 개발자가 작성하는 클래스가 하나의 클래스

당 하나의 파일로 존재하고 사람이 읽을 수 있어야 한다.

문제는 Ext JS가 방대한 양의 클래스 파일을 보유하며 각 클래스가 서로 연결돼 있어 클래스 하

나를 실행하기 위해 미리 로드해야 할 클래스 파일이 수십 개에 이를 수 있다는 것이다. 이 때

HTML 파일에 조각난 자바스크립트 파일을 순서에 맞춰 로딩시킨다는 것은 불가능할 것이다.

동적 클래스 로딩과 Alias

04

동적 클래스 로딩과 Alias 55

이를 위해 Ext JS는 필요한 클래스를 동적으로 로딩하기 위해 require 설정을 지원한다.

HTML /examples/chapter2/6_DynamicClassLoading.html

변경 내용 �1장에서�작성한�html�파일을�복사해�다음과�같이�변경한다.�

Ext.require([

'ext5.view.chapter2.DynamicPanel'

]);


Ext.create('ext5.view.chapter2.DynamicPanel', {

��title:�'안녕하세요�^^',

renderTo : document.body

});

})

동적 로딩 대상이 될 클래스 파일을 생성하자. Ext.panel.Panel 클래스를 확장하고 html

config만 존재하는 단순한 클래스다.

Javascript /app/view/chapter2/RequireClass.js


Ext.define('ext5.view.chapter2.RequireClass', {


xtype: 'chapter2-requireclass',

��title:�'동적�로딩된�클래스입니다.'

});

RequireClass 클래스를 로딩하기 위해 DynamicPanel 클래스를 정의한다. 이 클래스는

HTML 파일에서 호출될 것이다.

Javascript /app/view/chapter2/DynamicPanel.js


Ext.define('ext5.view.chapter2.DynamicPanel', {


requires: ['ext5.view.chapter2.RequireClass'], // ➊

xtype : 'chapter2-dynamicloading',

title: 'DynamicPanel',


otherContent: [{ // ➋

��type:�'동적�로딩�클래스',

path: 'app/view/chapter2/RequireClass.js'

}],

items: [{

xtype: 'chapter2-requireclass' // ➌

}]

});

➊ DynamicPanel 클래스에서 동적 로딩해 사용할 클래스를 정의한다.

➋ 이 예제와는 무관하지만 이 책의 마지막 예제에서 사용할 관련 클래스 정보다.

➌ (➊)에서 로딩한 클래스의 위젯명을 items에 추가했다. 만약 (➊)이 없다면 정상적으로 작동하지 않는다.

코드를 실행해 결과를 확인해 보면 그림 2-5와 같이 동적 로딩된 클래스를 확인할 수 있다. 동

적 로딩된 클래스는 항상 주소 끝에 “?_dc=1406827960731”와 같은 파라미터를 붙여 브라우

저의 캐시에 저장되지 않게 한다.

그림 2-5 클래스 동적 로딩 실행 결과

동적 클래스 로딩과 Alias 57

다시 (➊)을 주석 처리하고 실행해보자. 콘솔에서 chapter2-requireclass.js를 찾을 수 없다

는 에러 로그를 볼 수 있다.

그림 2-6 동적 클래스 로딩(require) 설정을 제거했을 때의 실행 결과

requires 설정은 브라우저에 클래스가 로딩되게 하고 이렇게 로딩된 클래스는 Ext JS 클래스

매니저가 검증 과정을 거쳐 메모리에 보관한다. 이 과정에서 클래스명과 위젯명은 한 개 세트로

사용할 수 있게 되고 이후에는 함축적인 위젯명을 사용할 수 있게 된다.

위젯명은 alias 외에 xtype으로도 사용할 수 있다. xtype으로 사용할 때에는 “widget”이라는

prefix는 제외하고 사용한다.

alias: ‘widget.chapter2-requireclass’

xtype: ‘chapter2-requireclass’

프로페셔널 ext js 5 ria 프로그래밍

Documents