[ExtJS] ExtJS란, 설치 방법, 기초문법, Theme 종류

Frontend/ExtJS

[ExtJS] ExtJS란, 설치 방법, 기초문법, Theme 종류

jungmin.park 2024. 3. 20. 17:34

ExtJS 란?

ExtJS는 Client-Side 기반의 JavaScript Framework 으로 상용 프레임워크입니다.

수백가지가 넘는 강력한 UI 컴포넌트를 지원하며, Classic, Gray, Crisp 등의 여러 테마 또한 지원하고 있습니다.

컴포넌트 제작은 key value 형태를 가진 JSON 구조로 생성됩니다.

예시) 컴포넌트의 일부입니다.

...
{
            xtype : 'panel',
            border : true,
            flex : 1,
            region : 'center'
        }
        ...
        ..

하지만 React, Vue.js, Angular에 비해 상용 프레임워크로 자료들을 구글에서 많이 찾을 수는 없습니다.

공식문서를 참고하여 개발을 하거나 현재 인프런에서 ExtJS 무료 강의가 오픈되어있어 기본기를 쌓을 수 있습니다.

현재 저희 회사에서는 ExtJS 6.2.1.29버전을 사용하고 있기 때문에 이 버전으로 설치를 진행해보고자 합니다.

ExtJS SDK / Sencha CMD 설치

1. ExtJS를 사용하기 위해 SDK와 CMD 설치가 필요합니다.

ExtJS GPL 6.2.0는 여기서 다운이 가능합니다.

wget -c http://cdn.sencha.com/ext/gpl/ext-6.2.0-gpl.zip

Sencha CMD 6.2.1.29는 이 링크를 통해 다운로드가 가능합니다.

wget -c http://cdn.sencha.com/cmd/6.2.1.29/release-notes.html

2. 파일을 다운받아서 설치하면 경로를 지정하고 설치를 하게 됩니다. 이때 이 경로는 환경변수 설정할때 필요합니다.

설치 진행 시 이부분은 체크하실 필요는 없습니다. (사진은 참고용으로 버전이 다를 수 있습니다.)

3. 설치 후 sencha 명령어 입력시 not found command 찾을 수 없다는 말이 나오면 환경변수 설정이 필요합니다.

vi ~/.zshrc

환경 변수를 지정해줍니다.

export PATH="$PATH:/Users/.../[sencha 설치된 디렉토리]

입력한 환경변수를 적용시켜줍니다.

source ~/.zshrc

4. sencha 기본 앱을 생성할 폴더를 만듭니다. 저는 extjs 폴더 밑에서 진행 예정입니다.

mkdir extjs

이후 ext-6.2.0-gpl.zip 압축을 extjs 폴더 밑에 압축을 풀어줍니다.

5. sencha App 생성 코드를 입력해줍니다.

sencha -sdk /.../extjs/ext-6.2.0-gpl generate app MyApp /.../extjs/MyApp

6. sencha app build

이 명령어는 마크업 페이지와 자바스크립트 코드, Sass 및 테마 파일을 "build" 폴더에 생성한다.

sencha app build

7. sencha app watch / sencha web start

App을 실행시킵니다. 두가지 명령어 중 하나를 이용하여 실행시킵니다.

sencha app watch로 실행하면 코드의 수정이 일어나도 즉각적으로 반영이 됩니다.

sencha app watch

8. 접속

http://localhost:1841/

ExtJS 기초 문법

Ext.onReady(...)

Ext.onReady(function(){
  ...
});

Ext.onReady(...) 은 기존 JavaScript 의 window.onload 와 같은 역할을 합니다. 또는 Jquery $(document).ready(function(){}) 와 같은 역할을 수행합니다.

기초문법에 들어가기전 HTML에서 text 필드와 button은 이런식으로 코드를 작성하게 됩니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="text" value="텍스트"/>
    <input type="button" value="버튼"/>
  </body>
</html>

Ext.onCreate()

ExtJS에서는 에서 컴포넌트를 정의하기 대신에 다른 도화지가 필요합니다. onCreate(...)는

그리고 그 도화지 안에 그리고 싶은 컴포넌트 items라는 속성의 배열값으로 줍니다. 컴포넌트의 값을 줄때 json구조로 정의해줍니다.

Ext.create(컴포넌트 클래스, {속성 : 값, 속성 : 값})

위에서 onReady는 onload와 같은 역할을 한다고 설명했습니다. 그 안에 도화지를 지정해주는 것입니다.

Ext.onReady(function(){
    Ext.create("Ext.panel.Panel", {
    	renderTo : Ext.getBody(),
        width : 500,
        height : 300,
        border : true
        items : [{
            xtype : 'textfield'
        },{
            xtype : "numberfield"
        },
        {
            xtype : 'button',
            text : '버튼'
        }]
    })
)

컴포넌트 클래스로 Ext.panel.panel / Ext.container.Viewport 가 올 수 있습니다.
Panel의 크기는 width height로 지정할 수 있습니다.
rendyTo는 컴포넌트 클래스의 속성입니다.
Ext.getBody()는 도화지를 body태그 영역위에 올리겠다는 의미입니다.
xtype
- xtype의 값으로는 클래스에 대한 별명, 명칭이 옵니다.
- 현재 xtype : 'textfield' 은 HTML에서 <input type="text> 와 유사합니다.
- xtype : 'button' 은 <button ..> or <input type="button"> 와 유사합니다.
- https://docs.sencha.com/extjs/7.7.0/modern/Ext.html 이쪽에서 컴포넌트들을 어떻게 사용하는지 찾아서 쓸 수 있습니다.

ExtJS Theme

app.json 파일의 builds .. theme 부분을 수정

"builds": {
        "classic": {
            "toolkit": "classic",
            
            "theme": "theme-gray",
            
            "sass": {
                "generated": {
                    "var": "classic/sass/save.scss",
                    "src": "classic/sass/save"
                }
            }
        },

        "modern": {
            "toolkit": "modern",
            
            "theme": "theme-ios",
            
            "sass": {
                "generated": {
                    "var": "modern/sass/save.scss",
                    "src": "modern/sass/save"
                }
            }
        }
    },

ExtJS(Classic) Theme 종류	Sencha Touch(Modern) Theme 종류
theme-classic	theme-material
theme-gray	theme-ios
theme-neptune	theme-neptune
theme-crisp	theme-triton
theme-triton