4. ExtJS 테마변경

4 ExtJs 테마변경

4.1 테마 종류

- ExtJS(Classic) Theme 종류

theme-classic

theme-gray

theme-neptune

theme-crisp

theme-triton

- Sencha Touch(Modern) Theme 종류

theme-meterial

theme-ios

theme-neptune

theme-triton

4.2 예전 방식

senchaCmd가 나오기전 초기에는 좌측의 classic 디렉터리와 modern 디렉터리 내의 여러 테마들을 직접 import해서 테마를 변경했어요.

하지만 최근에는 senchaCmd와 연동해  빌드하는 방식으로 테마를 변경합니다.

4.3 senchaCmd가 의존하는 app.json을 이용해 테마 변경

app.json은 프로젝트의 속성을 관리하는 파일입니다.

테마변경 뿐만 아니라 "indexHtmlPath" : "index.html" 의 값을 변경해 시작 페이지를 설정할 수도 있습니다.

4.3.1 app.json 파일을 열고 builds 속성을 찾습니다.

classic부분이 Web 상에서 나타나는 테마이고 modern부분이 Mobile상에서 나타나는 테마입니다.

theme 속성의 값을 위 테마종류로 바꿔주면 됩니다.

4.3.2 코드를 수정했다면 빌드를 해야합니다.

senchaCmd를 연후 sencha app build 명령실행 후 빌드 완료시 sencha web start 명령실행

4.4 명령어

- sencha app build

json, style 등 설정에 관련해서 코드에 변경사항이 있을시에는 빌드를 해줘야합니다.

- sencha web start

즉시 시작

- ctrl + c

종료

- sencha app watch

일부를 재컴파일할때 사용합니다.

자바스크립트 파일에 변경사항이 있을때 컴파일한 후 즉각적으로 볼때 

ex) 메시지, 컴포넌트 추가

4.5 onLoad

- 초창기 senchacmd가 없을때는 html body 영역에 코드를 작성했어야 했지만 지금은 오로지 자바스크립트 파일만으로 화면구성을 구성합니다.

- Ext.onReady()는 JQeury의 document.Ready()와 비슷한 역할을 합니다. (Ext.onReady() == document.Ready())

- Ext.onReady() : HTML 화면의 일부로 사용하는 방법.

     Ext 라이브러리를 불러들인 후 준비가 되면 호출되는 이벤트 링크만으로 간단히 구성

- Ext.application() : 웹 어플리케이션으로 사용하는 방법. (실제 프로젝트 시 많이 사용)

소스보기시 body 영역에는 어떠한 코드도 없는것을 볼 수 있죠.

bootstrap.js 파일만을 호출합니다.

bootstrap.js 파일을 호출하면 해당 파일이 모든걸 로드합니다.

bootstrap.js 내의 코드는 senchaCmd가 컴파일 하면서 생성해주는 코드입니다.

4.6 프로젝트 호출구조

1) app.json(프로젝트 설정파일)의 "indexHtmlPath" : "index.html" 에 따라 index.html을 호출

2) bootstrap.js -> app.js -> application.js -> Main.js(mainView 속성을 수정해 변경 가능)