ExtJS 첫번째 무료 강좌를 시작해보도록 하겠습니다.


    ExtJS 프레임워크 다운로드를 하기 위해서는 

    센차 홈페이지를 방문하여 다운로드를 받으면 되겠습니다.


    그러나 얼마전에 홈페이지 리뉴얼이 되는바람에 

    링크주소와 페이지들이 모두 바뀌었네요..


    30일 평가판버전을 받을 수 있는 버튼만 상단 메뉴부분에 존재하여 


    처음에는 "GPL 버전을 사이트에서 제거했나?"

    는 생각을 가졌습니다.


    하지만, 결국 GPL 버전을 찾아냈습니다.!! 


    센차쪽 라이센스는 모호한 부분이 많으므로 

    자세히 확인하신 후 실무에 사용하셔야 합니다.


    저는 그냥 GPL버전으로 강좌를 진행하겠습니다.


    ExtJS 5.1 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 로 한 후 출력물만 보는것이 제일 심플하면서 좋다고 생각됩니다 ^^


    다음장은 해당 코드에 대한 설명 및 추가 기능들에 대해서 다루도록 하겠습니다. 





    Posted by 몽고