다음과 같은 alert 창 띄우는 것을 만들어 봅시다 ^^
1. 이클립스가 작업하기 편하기 때문에 이클립스로 사용하여 보여드리겠어요~ ^^
앞서 다운받은 ExtJS 라이브러리를 다음과 같은 파일들만 복사하여 이러한 웹 어플리케이션 구조를 만들겠습니다.
복사할 파일은 adapter , resources, ext-all-debug.js 파일입니다.
다음과 같은 구조로 만듭니다.
2. WebContent 폴더 아래에 ch01_01.html 파일을 만들어 다음과 같이 코딩하도록 합니다.
(일단 자자, 따라해 보아요~)
3. 이제 Run 시켜서 동작해 보아요! 다음과 같은 Alert 창이 뜰 겁니다! ^-^
주소는 http://호스트:포트/프로젝트명/파일이름 이 되겠죠?
( ex> http://localhost:8080/extjs3/ch01_01.html )
* 너무너무 귀찮다면 예제파일 첨부할테니 돌려 보아요~ ^-^
1. 이클립스가 작업하기 편하기 때문에 이클립스로 사용하여 보여드리겠어요~ ^^
앞서 다운받은 ExtJS 라이브러리를 다음과 같은 파일들만 복사하여 이러한 웹 어플리케이션 구조를 만들겠습니다.
복사할 파일은 adapter , resources, ext-all-debug.js 파일입니다.
다음과 같은 구조로 만듭니다.
2. WebContent 폴더 아래에 ch01_01.html 파일을 만들어 다음과 같이 코딩하도록 합니다.
(일단 자자, 따라해 보아요~)
3. 이제 Run 시켜서 동작해 보아요! 다음과 같은 Alert 창이 뜰 겁니다! ^-^
주소는 http://호스트:포트/프로젝트명/파일이름 이 되겠죠?
( ex> http://localhost:8080/extjs3/ch01_01.html )
* 너무너무 귀찮다면 예제파일 첨부할테니 돌려 보아요~ ^-^
extjs3.war
자, 각 파일의 역할에 대해 알아 보아요~
# 파일의 역할! ^-^
* ext-all.css : ExtJS 위젯의 디자인 부분을 관리하는 스타일시트 파일 입니다.
( 이 파일은 수정 없이 그.대.로 링크되어 있어야 합니다. 이파일의 CSS 수정은 ExtJS 의 업그레이드를 불가능하게 만듭니다.)
ExtJS 의 디자인 부분 조절이 필요하다면, CSS 가 재정의된 다른 스타일 시트파일이 ext-all.css 파일 뒤에
include 되어야 합니다!
* ext-base.js : ExtJS의 핵심기술을 제공합니다.
ExtJs 가 제공하는 클래스들의 기반이며, 브라우저 환경의 인터페이스 입니다.
ExtJS를 JQuery 와 같은 다른 라이브러리와 함께 사용하고 싶다면 변경할 수도 있는 파일 입니다.
* ext-all-debug.js / ext-all.js : 모든 위젯은 이 파일에 있습니다.
ext-all-debug.js 는 개발하는 동안에 사용되고, 결과물에서는 ext-all.js 로 교체됩니다.
'JavaScript > ExtJs' 카테고리의 다른 글
| [ExtJS 3] 6. Ext.Panel 클래스 (0) | 2011.08.21 |
|---|---|
| [ExtJS 3] 5. Ext.get 함수와 Ext.fly 함수 (1) | 2011.08.21 |
| [ExtJS 3] 4. 위젯과 클래스 (0) | 2011.08.07 |
| [ExtJS 3] 3. ExtJS 환경설정 객체란? (0) | 2011.08.07 |
| [ExtJS 3] 1. ExtJs 라이브러리 다운받기 (3) | 2011.08.02 |
