ExtJS 기초강좌 2 - 여러가지 테마 확인 및 지난 강좌 추가설명
지난시간에 ExtJS 5.1 GPL 버전을 다운로드 받고 연동하는 법까지 해봤습니다.
오늘은 ExtJS에서 제공하는 각종 다야한 테마들에 대해서 알아보도록 하겠습니다.
연동작업을 했을때 "packages"라는 폴더를 이용했었습니다.
이 "packages" 디렉토리를 들어가 보시면 하단과 같이 ext-theme-xxxx 와 같은 디렉토리들이 여러가지가 존재할 것입니다.
▶ 테마 폴더명
ext-theme-aria - 블랙 계열의 테마
ext-theme-classic- 푸른계열의 클래식 테마
ext-theme-classic-sandbox - 현재는 지원안하는 테마인듯...
ext-theme-crisp - ExtJS 5부터 지원시작한 깔끔한 테마
ext-theme-crisp-touch - ExtJ5부터 지원시작한 깔끔한 테마
(태블릿 APP 개발시 추천)
ext-theme-gray - 회색계열의 테마
ext-theme-neptune - ExtJS 4부터 지원시작한 테마
ext-theme-neptune-touch - ExtJS 5부터 지원시작한 테마
(태블릿 APP 개발시 추천)
그럼 이전에 작성해놓은 코드를 기준으로 css 디렉토리만 변경해보면서 각 테마들을 확인해 보시기 바랍니다.
▶ 블랙계열 테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-aria/build/resources/ext-theme-aria-all.css" rel="stylesheet">
▶ 결과 확인
▶ 클래식 테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" rel="stylesheet">
▶ 결과 확인
▶ Crisp 테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet">
▶ 결과 확인
▶ Crisp 터치테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-crisp-touch/build/resources/ext-theme-crisp-touch-all.css" rel="stylesheet">
▶ 결과 확인
▶ 회색계열 테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-gray/build/resources/ext-theme-gray-all.css" rel="stylesheet">
▶ 결과 확인
▶ Neptune 테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" rel="stylesheet">
▶ 결과 확인
▶ Neptune 터치테마를 위한 CSS 경로 변경
<link href="../packages/ext-theme-neptune-touch/build/resources/ext-theme-neptune-touch-all.css" rel="stylesheet">
▶ 결과 확인
각 CSS 를 변경해준 결과, 다양한 테마들을 확인 할 수 있었습니다.
마음에 드는 테마를 이용하셔서 강좌를 진행해주시면 되겠습니다.
이어서, 지난 코드에 대해서 주석을 잠시 달긴 했습니다만, 그냥 설명해보도록 하겠습니다.
Ext.onReady(function(){
Ext.Msg.alert("Chapter 1","HelloWorld");
})
위 코드를 보시면
Ext.onReady 라는 부분이 있는데, 이부분은
"HTML 페이지가 전체 출력이 완료 된 다음 onReady로 감싼 영역을 실행 하겠다"
라는 의미로 알고 계시면 되겠습니다.
주석에 작성된 것처럼,
JAVASCRIPT 의 window.onload와 유사하며
jQuery 문법으로는 $(document.ready({});/$(function(){});
이 있겠습니다.
다음으로 onReady내에 정의한 Ext.Msg.alert함수는 ExtJS에서 제공하는 메시지 alert 창이 되겠습니다.
첫번째 입력부분은 결과물을 보시다시피, 메시지창의 타이틀 영역에 적용되는 부분입니다.
두번째 입력부분은 메시지창에 출력될 내용 부분입니다.
일반 ALERT 경고창의 경우, 줄바꿈을 할 경우 "\n"을 사용하지만,
ExtJS의 ALERT 경고창은 HTML로 구성이 되어있으므로 "<br/>" 이라고 적용 해주시면 되겠습니다.
※ 이외의 다른 html 코드를 작성해주시면 내용부분에 적용이 가능
이상! ExtJS 기초강좌 chapter 2 마무리 하도록 하겠습니다.
