ExtJS 학습 주제(1)ExtJS 를 어떻게 사용 하 는 지(인 스 턴 스 첨부)

ExtJS 를 사용 하려 면 ExtJS 라 이브 러 리 파일 을 먼저 받 아야 합 니 다.ExtJS 라 이브 러 리 파일 은 ExtJS 홈 페이지 에서 다운로드 할 수 있 습 니 다.주 소 는 www.extjs.com/products/gxt/download.php 입 니 다.다운로드 한 ZIP 압축 파일 을[D:\ExtCode]디 렉 터 리 로 압축 해제 하면 다음 과 같은 내용 을 얻 을 수 있 습 니 다.
 adapter:안에 제3자 바 텀 라 이브 러 리(Ext 자체 의 바 텀 라 이브 러 리 포함)를 Ext 가 지원 하 는 바 텀 라 이브 러 리 에 투사 하 는 것 을 책임 집 니 다. 　　build：  압축 된 ext 의 모든 소스 코드(안에 분류 하여 저장). 　　docs：  API 도움말 문서. exmaples:ExtJs 기술 로 만 든 작은 인 스 턴 스 를 제공 합 니 다. resources:Ext UI 자원 파일 디 렉 터 리,예 를 들 어 CSS,그림 파일 이 모두 여기에 저 장 됩 니 다. source:압축 되 지 않 은 Ext 의 모든 소스 코드(내부 분류 저장)는 Lesser GNU(LGPL)의 소스 오픈 프로 토 콜 을 따 릅 니 다. Ext-all.js:압축 된 Ext 의 모든 원본 코드 입 니 다. ext-all-debug.js:압축 되 지 않 은 Ext 의 모든 소스 코드(디 버 깅 에 사용).ext-core.js:압축 된 Ext 의 핵심 구성 요 소 는 sources/core 의 모든 종 류 를 포함 합 니 다.ext-core-debug.js:압축 되 지 않 은 Ext 의 핵심 구성 요 소 는 sources/core 의 모든 종 류 를 포함 합 니 다.
ExtJS 라 이브 러 리 파일 을 받 으 면 extjs 를 페이지 에 적용 할 수 있 습 니 다.extjs 를 사용 하려 면 페이지 에 extjs 의 스타일 과 extjs 라 이브 러 리 파일 을 도입 해 야 합 니 다.스타일 파일 은 resources/css/ext-all.css 이 고 extjs 의 js 라 이브 러 리 파일 은 주로 두 개 를 포함 합 니 다.adapter/ext/ext-base.js 와 ext-all.js 는 프레임 워 크 기반 라 이브 러 리 를 표시 합 니 다.ext-all.js 는 extjs 의 핵심 라 이브 러 리 입 니 다.adapter 는 어댑터,즉 여러 어댑터 가 있 을 수 있 기 때문에 adapter/ext/ext-base.js 를 adapter/jquery/ext-jquery-adapter.js 또는 adapter/prototype/ext-prototype-adapter.js 등 으로 바 꿀 수 있 습 니 다.
따라서 ExtJS 프레임 워 크 를 사용 하려 는 페이지 에는 다음 과 같은 몇 마디 가 포함 되 어 있 습 니 다. 

ExtJS 라 이브 러 리 파일 및 페이지 내용 을 불 러 온 후 ExtJS 는 Ext.onReady 에서 지정 한 함 수 를 실행 하기 때문에 사용 할 수 있 습 니 다.일반적으로 모든 사용자 의 ExtJS 응용 프로그램 은 Ext.onReady 에서 시작 되 며 ExtJS 응용 프로그램 을 사용 하 는 코드 는 다음 과 같 습 니 다.
function fn(){alert('ExtJS 라 이브 러 리 추가');}Ext.onReady(fn);

fn 도 익명 함수 형식 으로 쓸 수 있 기 때문에 위의 코드 는 아래 형식 으로 바 꿀 수 있 습 니 다.
function fn(){alert('ExtJS 라 이브 러 리 가 불 러 왔 습 니 다!');}Ext.onReady(function(){alert('ExtJS 라 이브 러 리 가 불 러 왔 습 니 다!');});

어 때,이상 의 내용 을 보 았 는데,잠시 도 지체 하지 않 고 손 을 써 보 려 고 하 는 거 아니 야?서 두 르 지 마 세 요.다음은 가장 간단 한 ExtJS 응용 프로그램 을 쓰 고 hello.html 파일 에 다음 코드 를 입력 하 겠 습 니 다.

페이지 효과 보기:

더 나 아가,우 리 는 페이지 에 창 을 표시 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

Ext.onReady(function()
{
var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
win.show();
});

hello.html 를 탐색 하면 화면 에 창 을 표시 할 수 있 습 니 다.그림 과 같 습 니 다.

4.567913.이것 은 간단 한 사례 일 뿐 입 니 다.복잡 한 기능 을 하려 면 많은 지식 을 배 워 야 합 니 다.다음 글 에서 ExtJS 라 이브 러 리 와 구성 요 소 를 소개 할 것 입 니 다.제 블 로그 에 계속 관심 을 가 져 주 십시오!