Ext JS 시작해보기

1. Ext JS는 고성능의 변형가능한 UI 위젯을 지원.
2. 다양한 벡엔드 소스에 맞출 수 있는 데이터 패키지 포함. 최소한의 조작으로 서버의 데이터를 가져와 사용할 수 있도록 지원
3. 다양한 화면에 적합한 레이아웃 매니저와 설정을 지원. 반응형 레이아웃을 이용하여 데스크탑, 모바일 또는 화면 크기에 따른 세부적인 제어 가능
4. 진보된 차트 패키지 지원.
5. 쉽게 사용하거나 변경할 수 있는 테마 지원.

내부에서 사용하는 컨트롤러, 모델, 뷰컨트롤러, 뷰모델 등은 공유하여 사용 가능

이를 위해 classic과 modern이라는 toolkit을 지원

→ 프로젝트를 기본으로 생성하면, 클래식과 모던 두 개의 위젯을 포함한 프로젝트가 생성됨.

센차 컴맨드를 이용해 프로젝트를 만들고 컴파일.

센차 컴맨드

• 작업공간 및 패키지 관리
• 기본적인 application의 기본 형태를 만들고 코드를 생성, 장애 발견. 빌드 시 잘못된 코드 확인
• 자바스크립트의 컴파일러, application 튜닝, 이미지 변환 등 지원
• 네이티브 팩킹 지원.

Ext JS 6 자체는 라이브러리이다.

환경설정

jdk 17 설치

Download the Latest Java LTS Free

• 환경 변수 에서 새로만들기 - JAVA_HOME 과 설치된 경로 추가
• path 더블클릭해서 새로만들기 - bin추가한 설치 경로 붙여넣기
• cmd창에서 java -version으로 설치 확인

센차 컴멘드 6 설치

• cmd에 sencha -info로 설치 확인

workspace 경로 생성

C:\Workspace\workspaceExtjs

cmd창에서

sencha generate app -ext MyApp ./app
cd app
sencha app watch

→ http://localhost:1841로 접속

수정해보기

• C:\Workspace\workspaceExtjs\app\app\view\main 경로의 MainModel.js 수정해보기

Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',

alias: 'viewmodel.main',

data: {
    name: 'MyApp',

    loremIpsum: 'MyApp 수정해보기'
}

//TODO - add data, formulas and/or methods to support your view
});

• C:\Workspace\workspaceExtjs\app\app\store 경로에서 Personnel.js 수정해보기
  • 데이터에 나의 정보 추가해보기