ExtJS 기초강좌 1 - ExtJS 5.1 GPL 다운로드 및 연동하기
ExtJS 첫번째 무료 강좌를 시작해보도록 하겠습니다.
ExtJS 프레임워크 다운로드를 하기 위해서는
센차 홈페이지를 방문하여 다운로드를 받으면 되겠습니다.
그러나 얼마전에 홈페이지 리뉴얼이 되는바람에
링크주소와 페이지들이 모두 바뀌었네요..
30일 평가판버전을 받을 수 있는 버튼만 상단 메뉴부분에 존재하여
처음에는 "GPL 버전을 사이트에서 제거했나?"
라는 생각을 가졌습니다.
하지만, 결국 GPL 버전을 찾아냈습니다.!!
센차쪽 라이센스는 모호한 부분이 많으므로
자세히 확인하신 후 실무에 사용하셔야 합니다.
저는 그냥 GPL버전으로 강좌를 진행하겠습니다.
입력하신 메일주소로 센차측에서 보낸 메일이 날라올겁니다.
"ext-5.1.1-gpl.zip" 압축파일을 다운받으셨다면, 압축을 해제해줍니다.
실질적으로는 Sencha CMD를 이용하여 효율적으로 개발환경 구축을 해야하지만, 기존 빌드되어있는 파일들을 이용하여 ExtJS 프레임워크를 연동하도록 하겠습니다.
ExtJS 강좌의 목적은
① 센차 문법에 대한 습득
② 다양한 컴포넌트들에 대한 사용법에 대한 이해
이기 때문입니다.
이어서 압축해제를 하였다면,
아래와 같은 폴더구조를 확인 할 수 있습니다.
build 디렉토리를 들어가주도록 합니다.
빌드 디렉토리내에서 "packages" 디렉토리와 "ext-all.js" 파일을
이용하여 연동을 해보도록 하겠습니다.
웹서버(PHP/ASP/ASP.NET/JSP...) 를 이용하지 않고
단순히 폴더구조로 묶어서 HTML 페이지로만 진행하도록 하겠습니다.
아래와 같은 순서로 진행해주세요
① extjs 폴더생성
② 이전에 압축해제한 "packages" 디렉토리와 "ext-all.js"파일을
디렉토리내에 위치
③ "1" 이라는 디렉토리 생성
④ 생성한 "1" 디렉토리내에 helloworld.html 파일 생성 (UTF-8)
hellowold.html 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ExtJS 기초강좌 1. HelloWold 메시지 출력</title>
<link href="../packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet">
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
//자바스크립트의 onload, jQuery의 $(document).ready와 동일한 기능
Ext.onReady(function(){
Ext.Msg.alert("Chapter 1","HelloWorld");
})
</script>
</head>
<body></body>
</html>
실행결과
일반적인 alert창이 아닌 ExtJS의 테마가 입혀진 메시지창이 출력되었다면, 연동까지 완료되었습니다.
오늘 ExtJS 강좌는 여기서 마무리 하겠습니다.
항상 처음에 시작하는 강의는 간단하면서도 Ctrl + C / V 로 한 후 출력물만 보는것이 제일 심플하면서 좋다고 생각됩니다 ^^
다음장은 해당 코드에 대한 설명 및 추가 기능들에 대해서 다루도록 하겠습니다.