[ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

ExtJS 5.0이 릴리즈가 되었다... ㅠㅠ

한번 다운로드를 받고 세팅을 해보자!! +_+ㅋㅋ

 현재 메인화면에서 다운로드는 45일 TRIAL 버전밖에 보이지 않지만  GPL 버전의 소스를 받아

서 문법을 익혀보겠다!

다운로드 주소는 http://www.sencha.com/products/extjs/details 여기에서 맨밑으로 

스크롤 내려보시면 다음과 같은 화면이 나올것임 

주저하지 말고 다운로드버튼 클릭!!

다운로드를 받았으면 압축파일이 나오는데 압축을 해제해주시고~

개발툴은 뭐가 되든 상관이 없음! 

저는 이클립스툴로 작업하도록하겠습니다.

개발환경은

이클립스 + JDK 1.7, + TOMCAT 7 + EXTJS 5입니다.

프로젝트 생성 및 서버 돌리는 방법은 알고 계신다고 가정하고 해당 부분은 생략!!

1.  생성 프로젝트명 : extjs_sample

우선은 ext-5.0.0에서 packages 디렉토리를 extjs_sample 디렉토리에 복사! 붙여넣기!!

그리고 /ext-5.0.0/build/내에  extxxxx.js 파일들이 많은대 그냥 ext-all.js 파일만 

복사 + 붙여넣기 하자.

최상단에 있는 extxxxx.js는 동작안됨 build 내에 있는 extxxxx.js를 include 해야함!

이걸로 ExtJS 세팅은 끝났다.

다음 3개의 소스를 신규 생성한 HTML 페이지에 include해준다

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>

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

<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

테마는 다양하지만 본인은 이번에 새로 추가된 crisp 테마를 적용하도록 하겠다.

jquery의 

$(document).ready(function(){

});

문법처럼 ONLOAD시 HELLO WORLD 메시지창을 띄워줄것이다.

EXTJS는 

Ext.onReady(function(){

});

에 기술할것이다.

단순하게 스크립트 alert을 띄워도 되지만 있어보이게 Ext에서 제공하는 alert 메시지 UI를 적용해보겠다

Ext.Msg.alert('타이틀영역', '헬로우 월드'); 

코드를 onready 안에 넣어보고 html페이지를 실행하면

다음 화면과 같이 나올것이다!

아 crisp 테마 ... neptune보다 더 깔끔해보여서 좋다!! ^_______________________^ ㅋㅋㅋ

소스랑 프로젝트 구조도 캡처!!

- 소스 -

-디렉토리 구조 -

이클립스 쓰시는 분들중, maven 쓰시는 분들은 저구조가 아닐것입니다.

세팅은 참 심플하죠잉~~~ ? ㅎㅎ

천~~~천~~~히 가는거임...

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!