ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편

ExtJS에 대한 강좌를 진행하도록 하겠습니다.

이전 강좌내용에 추가로 내용을 보완하며 좀더 쉽게 접근하도록 강좌를 진행하도록 하겠습니다.

ExtJS를 공부하시기전 우선적으로 습득하셔야 할 지식이 있다면 

1. JSON에 대한 지식 ( object 형과 array object형에 대한 이해)

2. 자바스크립트 및 jQuery 선지식

위 2가지정도에 대한 기술을 습득하신 상태라 가정하고 

ExtJS강좌를 본격적으로 진행하도록 하겠습니다.

제일먼저 ExtJS 구동을 위하여 ExtJS 프레임워크 다운로드를 받도록 하겠습니다.

※ 보통은 sencha cmd인가 그걸로 설치를 하는거 같으나 이부분은 생략하고 

기존 빌드되어있는 파일을 다운받아 진행하도록 하겠습니다.

http://www.sencha.com/products/extjs/details

위 주소로 접속하신 후 DOWNLOAD 버튼을 클릭하여 파일을 다운받도록 합니다.

스크롤 밑에까지 내리시면 위와같은 다운로드 페이지가 보이실 겁니다.

전 버전보다 0.0.1버전이 올라서 현재기준 ext-5.0.1-gpl.zip 파일로 다운로드 받아지네요 

다운로드가 완료되었으면 압축해제 한다음, build 디렉토리로 이동합니다.

여러가지 JS파일들이 존재하지만 ext-all.js 파일을 기준으로 연동을 진행하겠습니다.

다음은 ExtJS 테마가 필요하기 때문에 /builds/packages/ 디렉토리로 이동합니다.

위와같이 ext-theme-xxxx 의 다양한 테마들이 존재합니다.

일정 테마하나를 사용하시면 리소스 용량을 절약할수 있습니다.

저는 개인적으로 crisp테마가 마음에 들긴 하지만 테마비교를 위해 

위에 네모친 모든 테마를 프로젝트에 이동시키도록 하겠습니다.

※ 참고로 다운로드 받으신 extjs 파일들은 지우지 마시고 보관하시고 있으셔야 합니다.

    추후에 차트관련 강좌 진행시 ext-charts같은 폴더들이 추가로 필요하기 때문입니다 ^^

다음과 같이 이클립스 기준 프로젝트 WEB ROOT에 다음과 같이 디렉토리를 잡아주시면 되겠습니다.

 ext-theme-classic-sandbox 테마 디렉토리는 제외하였습니다.

무슨 테마인지 정확히 모르겠지만 테마적용이 되지 않는듯 합니다.

이제는 index.html파일에 onload시  "HelloWorld" 문구를 

메시지 창에 출력을 해보도록 하겠습니다.

필수로 ext-all.js 파일을 include하는 작업이 필요하겠습니다.

필수 ExtJS 파일

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

include하셨다면 다음은 테마관련 css 파일 및 js 파일을 include 하도록 하십니다.

총 7개의 테마들중 마음에 드시는 테마에 대한 css/js 파일을 자신의 파일에 include하시면 되겠습니다.

테마별 ExtJS CSS 파일

<!--1.classic 테마--> 
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-classic/build/resources/ext-theme-classic-all.css"/>
<!--2.black 테마-->
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-aria/build/resources/ext-theme-aria-all.css"/>
<!--3.Crisp테마 깔끔함-->
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<!--4.Crisp터치테마 깔끔하며 Crisp테마보다 사이즈가 조금씩 더 큼(모바일용?)-->
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-crisp-touch/build/resources/ext-theme-crisp-touch-all.css"/>
<!--5.Gray 회색테마-->
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<!--6.Neptune테마 (Facebook?Window8과 비슷)-->
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>
<!--7.Neptune터치테마 (Facebook?Window8과 비슷) 모바일용?-->
<link rel="stylesheet" type="text/css" href="/extjs/ext-theme-neptune-touch/build/resources/ext-theme-neptune-touch-all.css"/>

테마별 ExtJS JS파일

<!--1.classic 테마-->
<script type="text/javascript" src="/extjs/ext-theme-classic/build/ext-theme-classic.js"></script>
<!--2.black 테마-->
<script type="text/javascript" src="/extjs/ext-theme-aria/build/ext-theme-aria.js"></script>
<!--3.ExtJS5부터 추가된 Crisp테마 깔끔함-->
<script type="text/javascript" src="/extjs/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<!--4.Crisp터치테마 깔끔하며 Crisp테마보다 사이즈가 조금씩 더 큼 모바일용 추천테마-->
<script type="text/javascript" src="/extjs/ext-theme-crisp-touch/build/ext-theme-crisp-touch.js"></script>
<!--5.Gray 회색테마-->
<script type="text/javascript" src="/extjs/ext-theme-gray/build/ext-theme-gray.js"></script>
<!--6.Neptune테마 (Facebook?Window8과 비슷)-->
<script type="text/javascript" src="/extjs/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!--7.Neptune터치테마 (Facebook?Window8과 비슷) 모바일용 추천테마-->
<script type="text/javascript" src="/extjs/ext-theme-neptune-touch/build/ext-theme-neptune-touch.js"></script>

소스코드내에 INCLUDE 하셨다면 

출력관련 설명을 해보도록 하겠습니다.

MVC구조를 적용전까지는 기본 컴포넌트 출력은 

항상 ONLOAD FUNCTION 내에 컴포넌트 생성을 위한 코드를 작성하도록 하겠습니다.

일반 자바스크립트의 경우 window.onload

jQuery의 경우 $(document).ready(function(){}) 또는 $(function(){})

와 같은 기능의 ExtJS의 LOAD함수는

Ext.onReady(function(){
   // code here
})

위처럼 작성하실 수 있겠습니다.

그럼 onready 함수내에 메시지 출력을 해보도록 하겠습니다.

//code here 란에 다음과 같이 코드작성을 해줍니다.

Ext.Msg.alert('Header', 'HelloWorld!!');

Ext.Msg.alert()는 메시지 문구를 띄워주는 함수인대 각 테마별 출력결과를 확인해보겠습니다

CLASSIC 테마결과

BLACK테마결과

Crisp 테마결과

Crisp Touch 테마결과

Gray 테마결과

Neptune 테마결과

Neptune Touch 테마결과

각 테마별 결과를 위와같이 확인해 보았습니다.

다음 장부터는 컴포넌트들을 하나씩 생성해보는 작업을 진행하도록 하겠습니다 

by 개발로짜