EXTJS 노트(1)--입문 안내

ExtJS 는 Ajax 프레임 워 크 로 자바 script 으로 작 성 된 것 으로 클 라 이언 트 에서 다양한 웹 응용 프로그램 인터페이스 를 만 드 는 데 사 용 됩 니 다.ExtJS 는 RIA 즉 부 클 라 이언 트 의 AJAX 응용 프로그램 을 개발 할 수 있 습 니 다.ExtJS 는 주로 전단 사용자 인터페이스 를 만 드 는 데 사용 되 며 배경 기술 과 무관 한 전단 ajax 프레임 워 크 입 니 다.따라서 ExtJS 를.Net,Java,Php 등 다양한 개발 언어 개발 애플 리 케 이 션 에 활용 할 수 있다.ExtJs 는 처음에 YUI 기술 을 바탕 으로 했다.
ExtJS 패키지 디 렉 터 리:

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 라 이브 러 리 파일 을 도입 해 야 합 니 다.스타일 파일 은 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 프레임 워 크 를 사용 하려 는 페이지 에는 다음 과 같은 몇 마디 가 포함 되 어 있 습 니 다.

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script>

ExtJS 는 일련의 라 이브 러 리 로 구성 되 어 있 으 며,ExtJS 의 라 이브 러 리 는 다음 과 같은 부분 을 포함한다.
   
4.567917.바 텀 API(core):바 텀 API 에서 DOM 작업,조회 에 대한 패 키 징,이벤트 처리,DOM 조회 기 등 기본 적 인 기능 을 제공 합 니 다.다른 컨트롤 은 모두 이러한 바 텀 api 를 바탕 으로 바 텀 api 는 소스 코드 디 렉 터 리 의 core 서브 디 렉 터 리 에 위치 하고 DomHelper.js,Element.js 등 파일 을 포함한다.

컨트롤(widgets):컨트롤 은 페이지 에 직접 만 들 수 있 는 시각 화 된 구성 요 소 를 말 합 니 다.예 를 들 어 패 널,옵션 보드,표,트 리,창,메뉴,도구 모음,버튼 등 이 있 습 니 다.우리 의 응용 프로그램 에서 이러한 컨트롤 을 직접 응용 하여 우호 적 이 고 상호작용 이 강 한 응용 프로그램의 UI 를 실현 할 수 있 습 니 다.컨트롤 은 원본 코드 디 렉 터 리 의 widgets 하위 디 렉 터 리 에 있 습 니 다.
실 용 도구 Utils:Ext 는 많은 실 용 도 구 를 제공 하여 데이터 내용 포맷,JSON 데이터 디 코딩 또는 디 코딩,Date,Array,Ajax 요청 발송,쿠키 관리,CSS 관리 등 확장 기능 을 편리 하 게 실현 할 수 있 습 니 다.
Ext 구성 요 소 는 Component 클래스 에서 정의 합 니 다.모든 구성 요 소 는 지정 한 xtype 속성 값 을 가지 고 있 습 니 다.이 값 을 통 해 구성 요소 의 유형 을 얻 거나 지정 한 형식의 구성 요 소 를 정의 할 수 있 습 니 다.구성 요 소 는 크게 세 가지 로 나 눌 수 있 는데 그것 이 바로 기본 구성 요소,도구 모음 구성 요소,폼 과 요소 구성 요소 이다.
구성 요 소 는 new 키 를 통 해 직접 만 들 수 있 습 니 다.예 를 들 어 컨트롤 창,new Ext.Window()를 사용 하고 표를 만 들 면 new Ext.GridPanel()을 사용 합 니 다.물론 일반적인 구성 요 소 를 제외 하고 구조 함수 에서 구조 적 인 파 라 메 터 를 전달 하여 구성 요 소 를 만 듭 니 다.구성 요소 의 구조 함수 에는 일반적으로 하나의 대상 을 포함 할 수 있 습 니 다.이 대상 은 구성 요 소 를 만 드 는 데 필요 한 설정 속성 과 값 을 포함 하고 구성 요 소 는 구조 함수 의 매개 변수 속성 값 에 따라 구성 요 소 를 초기 화 합 니 다.모든 구성 요 소 는 Ext.Component 에서 계승 합 니 다.
Viewport 는 renderTo 를 더 이상 지정 할 필요 가 없습니다.또한 Viewport 는 전체 브 라 우 저 디 스 플레이 영역 을 채 우 고 브 라 우 저 디 스 플레이 영역 크기 에 따라 달라 집 니 다.
  
   Viewport 는 주로 응용 프로그램의 메 인 인터페이스 에 사용 되 며,서로 다른 레이아웃 을 사용 하여 서로 다른 스타일 의 응용 프로그램의 메 인 인터페이스 를 구축 할 수 있 습 니 다.Viewport 에서 자주 사용 하 는 레이아웃 은 fit,border 등 이 있 습 니 다.물론 필요 할 때 다른 레이아웃 도 자주 사용 합 니 다.
   일반 대화 상 자 는 보통 confirm 의 방법 으로 confirm(String title,String msg,[Function fn],[Object scope])로 서명 하고 매개 변수 title 은 대화 상자 의 제목 을 표시 하 며 매개 변수 msg 는 대화 상자 의 알림 정 보 를 표시 합 니 다.이 두 매개 변 수 는 필수 입 니 다.선택 할 수 있 는 매개 변수 fn 은 대화 상 자 를 닫 은 후에 실행 되 는 반전 함 수 를 표시 하고 매개 변수 scope 는 반전 함수 의 실행 역할 도 메 인 을 표시 합 니 다.리 셋 함 수 는 button 과 text,button 은 클릭 단 추 를 표시 하고 text 는 대화 상자 에 활성 입력 옵션 이 있 을 때 입력 한 텍스트 내용 을 표시 합 니 다.리 셋 함수 에서 button 매개 변 수 를 통 해 사용자 가 어떤 선택 을 했 는 지 판단 할 수 있 습 니 다.텍스트 를 통 해 대화 상자 에 입력 한 내용 을 읽 을 수 있 습 니 다.
   ExtJS 2.0 은 모두 10 가지 구 조 를 포함 하고 자주 사용 하 는 구 조 는 border,column,fit,form,card,tabel 등 구조 가 있 습 니 다.
   Form 레이아웃 은 클래스 Ext.layot.FormLayout 에서 정의 합 니 다.이름 은 form 입 니 다.폼 에 입력 한 필드 를 관리 하 는 레이아웃 입 니 다.이 레이아웃 은 주로 프로그램 에서 폼 필드 나 폼 요 소 를 만 드 는 데 사 용 됩 니 다.실제 응용 프로그램 에서 Ext.form.FormPanel 과 같은 기본 레이아웃 은 Form 레이아웃 을 사용 합 니 다.또한 FormPanel 은

태그 와 관련 된 구성 요 소 를 만 들 기 때문에 일반적인 상황 에서 저 희 는 FormPanel 을 직접 사용 하면 됩 니 다.
    ExtJS 의 표 기능 은 정렬,캐 시,드래그,특정한 열 숨 기기,줄 번호 자동 표시,열 집합,셀 편집 등 실 용적 인 기능 을 포함한다.표 는 클래스 Ext.grid.GridPanel 에서 정의 하고 Panel 에서 계승 하 며 xtype 은 grid 입 니 다.ExtJS 에서 표 Grid 는 열 정의 정 보 를 포함 하고 표 의 데이터 저장 소 Store 를 지정 해 야 합 니 다.표 의 열 정 보 는 클래스 Ext.grid.ColumnModel 로 정의 되 고 표 의 데이터 저장 소 는 Ext.data.store 로 정의 되 며 데이터 저장 소 는 분 석 된 데이터 에 따라 JSonstore,Simple Stroe,Grouping Store 등 으로 나 뉜 다.