extjsextjs 시작하기

비고

ExtJS 는 Rich Internet Applications을 구현하기위한 Sencha의 JavaScript 프레임 워크입니다. 사전 빌드 된 모듈 식 UI 구성 요소 중 가장 큰 라이브러리 중 하나를 자랑합니다.

버전 5.0부터 Sencha는 플랫폼에서 MVVM (Model-View-ViewModel) 아키텍처를 사용하도록 옹호했습니다. 또한 버전 4.x까지 지원되는 기본 아키텍처 스타일 인 MVC (Model-View-Controller) 아키텍처에 대한 지원을 유지 관리합니다.

또한 Sencha는 모바일 중심의 응답 성있는 웹 응용 프로그램 기능을 갖춘 ExtJS에 중점을 두었습니다. 이전 Sencha Touch 프레임 워크는 버전 6.0부터 ExtJS와 통합되어 고객 기반을 결합하고 새로운 결합 된 프레임 워크에서 중복을 통합했습니다.

버전

번역 출시일
6.2 2016-06-14
- 6.0 2015-08-28
5.0 2014-06-02
4.0 2011-04-26
3.0 2009-07-06
2.0 2007-12-04
1.1 2007-04-15

Hello World 응용 프로그램 만들기 - Sencha Cmd를 통해

이 예제는 프로세스를 부트 스트랩하기 위해 Sencha Cmd를 사용하여 ExtJS에서 기본 응용 프로그램을 만드는 방법을 보여줍니다.이 메서드는 프로젝트의 일부 코드와 스켈레톤 구조를 자동으로 생성합니다.

콘솔 창을 열고 작업 디렉토리를 작업 할 적절한 공간으로 변경하십시오. 동일한 창과 디렉토리에서 다음 명령을 실행하여 새 응용 프로그램을 생성하십시오.

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 

주 : -sdk 플래그는 프레임 워크 아카이브에서 추출 된 디렉토리의 위치를 ​​지정합니다.

ExtJS 6+ Sencha에서는 ExtJS 및 Touch 프레임 워크를 모두 단일 코드베이스로 병합하여 클래식모던 이라는 용어로 구분했습니다. 단순하게하기 위해 모바일 장치를 대상으로 지정하지 않으려는 경우 명령에 추가 플래그를 지정하여 작업 영역의 복잡도를 줄일 수 있습니다.

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 

더 이상 구성하지 않으면 모든 기능을 갖춘 데모 응용 프로그램이 이제 로컬 디렉토리에 있어야합니다. 이제 작업 디렉토리를 새로운 HelloWorld 프로젝트 디렉토리로 변경하고 다음을 실행하십시오.

> sencha app watch

이렇게하면 기본 빌드 프로파일을 사용하여 프로젝트를 컴파일하고 간단한 HTTP 서버를 시작하여 웹 브라우저를 통해 로컬에서 응용 프로그램을 볼 수 있습니다. 기본적으로 포트 1841에 있습니다.

설치 및 설정

ExtJS의 일반적인 사용법은 프레임 워크를 활용하여 단일 페이지 RIA (Rich-Application)를 구축합니다. 시작하는 가장 간단한 방법은 주로 배포 수명주기의 일반적인 문제 대부분을 다루는 CLI 빌드 도구 인 Sencha Cmd를 사용하는 것입니다.

  • 패키지 및 종속성 관리
  • 코드 컴파일 / 번들링 및 축소
  • 다른 타겟 및 플랫폼을위한 빌드 전략 관리

» 다운로드 Sencha Cmd


두 번째 단계는 SDK를 다운로드하는 것입니다. ExtJS는 상용 제품입니다. 사본 하나를 얻으려면 다음 중 하나를 수행하십시오.

  • 로그인 Sencha 상용 라이센스 버전 지원 ( 제품 페이지 )
  • 30 일 동안 유효한 평가 사본 을 신청하십시오.
  • 오픈 소스 프로젝트에 사용할 수있는 GPL v3 버전을 요청하십시오.
    (이 옵션으로 최신 버전에 액세스하지 못할 수도 있습니다)

SDK를 다운로드 한 후 진행하기 전에 압축 파일을 추출하십시오.


참고 : ExtJS 프로젝트에 대한 포괄적 인 안내서는 공식 시작 설명서를 참조하십시오.

Sencha Cmd를 설치 한 후에는 콘솔 창을 열고 실행하여 가용성을 확인할 수 있습니다.

> sencha help

이제는 ExtJS 응용 프로그램을 만들고 배포하는 데 필요한 도구가 있으며 SDK가 추출 된 디렉토리 위치를 기록하므로 추가 예제에서이 도구가 필요합니다.

Hello World 응용 프로그램 만들기 - 수동

ExtJS를 사용하여 간단한 웹 애플리케이션을 작성해 봅시다.

우리는 오직 하나의 물리적 페이지 (aspx / html)를 가질 간단한 웹 애플리케이션을 생성 할 것입니다. 최소한 모든 ExtJS 애플리케이션에는 하나의 HTML과 하나의 JavaScript 파일 (보통 index.html과 app.js)이 포함됩니다.

index.html 파일 또는 기본 페이지에는 ExtJS의 CSS 및 JavaScript 코드에 대한 참조와 응용 프로그램 코드 (기본적으로 웹 응용 프로그램의 시작 지점)가 포함 된 app.js 파일이 포함됩니다.

ExtJS 라이브러리 컴포넌트를 사용할 간단한 웹 애플리케이션을 작성해 보겠습니다.

1 단계 : 빈 웹 응용 프로그램 만들기

스크린 샷에서 볼 수 있듯이 빈 웹 응용 프로그램을 만들었습니다. 간단하게 만들려면 편집기 나 IDE에서 웹 응용 프로그램 프로젝트를 사용할 수 있습니다. 여기에 이미지 설명을 입력하십시오.

2 단계 : 기본 웹 페이지 추가

빈 웹 응용 프로그램을 만든 경우 응용 프로그램의 시작 페이지가 될 웹 페이지를 포함시켜야합니다.

여기에 이미지 설명을 입력하십시오.

3 단계 : Default.aspx에 Ext Js 참조 추가

이 단계에서는 extJS 라이브러리를 어떻게 사용하는지 보여줍니다. Default.aspx의 스크린 샷에서 볼 수 있듯이 3 개의 파일을 참조했습니다.

  • ext-all.js
  • ext-all.css
  • app.js

Sencha는 ExtJS 프레임 워크를위한 무료 CDN 호스팅을 제공하기 위해 글로벌 콘텐츠 네트워크 인 CacheFly와 파트너 관계를 맺었습니다. 이 샘플에서는 Ext의 CDN 라이브러리를 사용했지만 프로젝트 디렉토리의 동일한 파일 (ext-all.js 및 ext-all.css)을 대신 사용할 수도 있고 CDN을 사용할 수없는 경우 백업으로 사용할 수도 있습니다.

app.js를 참조하면 브라우저에로드되고 응용 프로그램의 시작점이됩니다.

이 파일들 외에도 UI가 렌더링 될 자리 표시자가 있습니다. 이 샘플에서는 나중에 UI를 렌더링하는 데 사용할 "공백"id를 가진 div가 있습니다.

여기에 이미지 설명을 입력하십시오.

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

4 단계 : 웹 프로젝트에 app 폴더 및 app.js 추가

ExtJS는 MVC 패턴으로 코드를 관리하는 방법을 제공합니다. 스크린 샷에서 볼 수 있듯이 ExtJS 응용 프로그램을위한 컨테이너 폴더 (이 경우 'app')가 있습니다. 이 폴더에는 모델, 뷰, 컨트롤러, 상점 등과 같은 다양한 폴더로 분할 된 모든 응용 프로그램 코드가 들어 있습니다. 현재 app.js 파일 만 있습니다.

여기에 이미지 설명을 입력하십시오.

5 단계 : app.js에 코드 작성

App.js는 애플리케이션의 시작점입니다. 이 샘플에서는 응용 프로그램을 시작하는 데 필요한 최소 구성을 사용했습니다.

Ext.application 은 여러 가지 작업을 수행하는 ExtJS 응용 프로그램을 나타냅니다. 이름 구성에 제공된 전역 변수 ' SenchaApp '를 작성하며 모든 응용 프로그램 클래스 (모델, 뷰, 제어기, 상점)는 단일 이름 공간에 상주합니다. Launch는 모든 애플리케이션이 준비되면 (모든 클래스가 올바르게로드 된 경우) 자동으로 호출되는 함수입니다.

이 샘플에서는 Panel을 몇 가지 구성으로 만들고 Default.aspx 에서 제공 한 자리 표시 자에 렌더링합니다 .

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

스크린 샷 출력

이 웹 응용 프로그램을 Default.aspx로 시작 페이지로 실행하면 다음 창이 브라우저에 나타납니다.

여기에 이미지 설명을 입력하십시오.