오늘 부터 연재할 글은 Sencha사이트의 내용을 기준으로 ExtJs를 설명하도록 하겠습니다.
(http://docs.sencha.com/ext-js/4-0)
1. Requirements
1.1. Web Browsers
Ext JS 4는 IE6에서 크롬까지 모든 브라우저를 지원한다. 뭐 모두 지원한다고 하지만 실제로는 아시는분은 아시겠지만 IE계열이 제일 형편없고 나머지 크롬이나 FF에 경우는 상당히 좋은 성능을 내고 있습니다.
IE6에 경우에는 아예 포기하는 것이 좋습니다. 저의 경우도 고객에게 IE6는 절대 사용하면 안되는 브라우저로 설득하고 꼭 업데이트 하여 최소 IE7도 아니고 IE8을 사용하도록 권고 아닌 강제하고 있습니다. 뭐 고객이 할아버지 일 경우도 있어서 아무리 강제해도 말을 듯지 않는 경우도 있습니다
1.2. Web Server
웹서버에 경우 뭘 쓰든 상관이 없습니다. Apache보다는 톰캣을 설치? 아니 설치하지 마시고 파일로 받아 압축 푸시고 사용하시는게 좋겠죠. 따로 설명하지 않겠습니다. 별게 없으니까요!!
1.3. Ext JS 4 SDK
일단 아래 주소에서 다운 받아 설치하자
http://www.sencha.com/products/sdk-tools/download/
2. Application Structure
2.1. Basic Structure
강제 사항은 아니지만 ExtJS 의 디렉토리 구조는 아래와 같이 하라고 권고 하고 있다.
일단 Document Root아래 index.html을 생성하고 아래와 같이 코딩하자.
이제 app.js를 아래와 같이 코딩합니다.
우선 코드를 실행합니다. 뷰포트위에 패널을 올리고 패널이름은 'Hello Ext'이고 패널의 내용부분에 'Hello! Welcome to Ext JS'라고 보여집니다.
이제 빌드를 해보겠습니다. 위에서 설치한 Sencha SDK가 정상적으로 설치되어 있어야 합니다.
확인은 cmd창에서 sencha라고 입력해보자. 아래와 같이 보여지면 정삭적으로 설치된것입니다.
빌드 전에 jsb파일을 생성하자. index.html파일이 있는 폴더로 이동해서 아래와 같이 실행하자.
index.html파일을 검사하고 관련 된 클래스등을 참조하여 jsb3파일을 만들게 됩니다.
이제 jsb3파일을 이용해 빌드 작업을 해봅니다.
이제 위의 작업을 실행한 폴더에 아래와 같은 두개의 파일이 생성되는 것을 볼수 있습니다.
1. all-classes.js 이 파일은 어플리케이션에서 사용할 클래스들을 모아놓는다. 현재는 비어 있을 것이다.
2. app-all.js 이 파일은 열어보시면 알겠지만 우리가 코딩한 app.js를 최소화 버전으로 만들어 은 것이다. 실제 배포시에는 이런식에 공백을 제가한 최소화빌드를 하게 되고 더 나아가면 최적화를 해서 용량을 더 줄이기도 한다.
기존 index.html파일을 카피하여 index-prod.html을 만들고 빌드 된 app-all.js파일을 이용해 실행해 보자.
동일한 실행 결과를 얻을 것이다.
(http://docs.sencha.com/ext-js/4-0)
1. Requirements
Ext JS 4는 IE6에서 크롬까지 모든 브라우저를 지원한다. 뭐 모두 지원한다고 하지만 실제로는 아시는분은 아시겠지만 IE계열이 제일 형편없고 나머지 크롬이나 FF에 경우는 상당히 좋은 성능을 내고 있습니다.
IE6에 경우에는 아예 포기하는 것이 좋습니다. 저의 경우도 고객에게 IE6는 절대 사용하면 안되는 브라우저로 설득하고 꼭 업데이트 하여 최소 IE7도 아니고 IE8을 사용하도록 권고 아닌 강제하고 있습니다. 뭐 고객이 할아버지 일 경우도 있어서 아무리 강제해도 말을 듯지 않는 경우도 있습니다
1.2. Web Server
웹서버에 경우 뭘 쓰든 상관이 없습니다. Apache보다는 톰캣을 설치? 아니 설치하지 마시고 파일로 받아 압축 푸시고 사용하시는게 좋겠죠. 따로 설명하지 않겠습니다. 별게 없으니까요!!
1.3. Ext JS 4 SDK
일단 아래 주소에서 다운 받아 설치하자
http://www.sencha.com/products/sdk-tools/download/
2. Application Structure
강제 사항은 아니지만 ExtJS 의 디렉토리 구조는 아래와 같이 하라고 권고 하고 있다.
- Document Root
- app
- Class1.js
- Class2.js
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
일단 Document Root아래 index.html을 생성하고 아래와 같이 코딩하자.
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css">
<script type="text/javascript" src="/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});이제 빌드를 해보겠습니다. 위에서 설치한 Sencha SDK가 정상적으로 설치되어 있어야 합니다.
확인은 cmd창에서 sencha라고 입력해보자. 아래와 같이 보여지면 정삭적으로 설치된것입니다.
Sencha Command v1.2.2
Copyright (c) 2011 Sencha Inc.
usage: sencha COMMAND [ARGS]
The available commands are:
build build a JSB project
create jsb generate a minimal JSB project for an application
slice theme slice a custom theme's images for IE
See 'sencha help COMMAND' for more information on a specific command.
빌드 전에 jsb파일을 생성하자. index.html파일이 있는 폴더로 이동해서 아래와 같이 실행하자.
index.html파일을 검사하고 관련 된 클래스등을 참조하여 jsb3파일을 만들게 됩니다.
D:\AppTeam\03_Project\02_eMarket\01_DevRoot\extDesigner\war\study>sencha create jsb -a http://localhost:8080/study/index.html -p app.jsb3
이제 jsb3파일을 이용해 빌드 작업을 해봅니다.
sencha build -p app.jsb3 -d .
이제 위의 작업을 실행한 폴더에 아래와 같은 두개의 파일이 생성되는 것을 볼수 있습니다.
1. all-classes.js 이 파일은 어플리케이션에서 사용할 클래스들을 모아놓는다. 현재는 비어 있을 것이다.
2. app-all.js 이 파일은 열어보시면 알겠지만 우리가 코딩한 app.js를 최소화 버전으로 만들어 은 것이다. 실제 배포시에는 이런식에 공백을 제가한 최소화빌드를 하게 되고 더 나아가면 최적화를 해서 용량을 더 줄이기도 한다.
기존 index.html파일을 카피하여 index-prod.html을 만들고 빌드 된 app-all.js파일을 이용해 실행해 보자.
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css">
<script type="text/javascript" src="ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>'자바스크립트 > Ext JS' 카테고리의 다른 글
| Ext JS 4.1 beta Doc 어플리케이션 분석1 (0) | 2011.12.30 |
|---|---|
| Ext JS 4.1 Beta 출시 (0) | 2011.12.30 |
| ExtJS 기반 시스템 구성도 (2) | 2011.10.05 |
| ExtJS4 모바일 스크롤 문제 해결 (1) | 2011.10.04 |
| Extjs AutoID (0) | 2011.08.13 |
