ExtJS를 활용한 Ria Application 만들기

 

오늘은 첫번째 시간으로 ExtJS를 이용한 Ria어플리케이션개발에 필요한 준비를 해보도록 하겠습니다.

1. 이클립스
  - 일반적인 자바웹프로그래밍 환경과 별다른 것 없습니다.
     단 Spring을 사용할 것이므로 관련 설정과 파일들이 들어가겠죠.
     일단 최신버전 juno를 받아 사용하도록 하겠습니다.
아래 그림과 같이 프로젝트르 만들겠습니다.

 

 

 

 

encoding을 맞춰주자 UTF-8

다음은 ExtJS를 다운받고 파일을 카피해 넣도록 하겠습니다.

 

압축이 풀린 폴더구조는 아래와 같습니다.

이제 아래 폴더 중의 파일들을 정리해서 새로 만든 이클립스 프로젝트에 카피하도록 하겠습니다.
일단 이클립스 프로젝트의 war폴더에 extjs라는 폴더를 만듭니다.
그리고 아래 그림의 압축파일 중 루트에 있는 모든 js파일과 src폴더, resources폴더를 이클립스
프로젝트 war/extjs폴더에 카피한다.

이제 ExtJS로 샘플을 만들고 한번 실행해보겠습니다.
프로젝트의 war폴더에 smpl폴더를 추가하고 아래와 같이 코딩한 후 index.html로 저장하고 실행합니다.

< html>
< head>
    < meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    < title id="page-title">샘플

	< link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
    < script type="text/javascript" src="/extjs/ext-debug.js"/>
    < script type="text/javascript" >    
    Ext.onReady(function() {
    	var panel = new Ext.create('Ext.panel.Panel',{
    		title : '시작해 볼까',
    		html : 'ExtJS 쓸만해요 ^^',
    		renderTo : Ext.getBody()
    	});
    	
    });
    < /script>
< /head>
< body>

< /body>
< /html>