서문: extjs는 OOP 언어로 Java를 학습하는 과정에 따라 학습할 수 있으며 Java의 이미지 인터페이스 JWT에 비유하여 학습할 수 있습니다.

도구

주로 프로덕션 레벨을 위한 Ext JS 애플리케이션 개발을 위해 sencha에서 제공하는 도구입니다.
Sencha Cmd
Sencha CMD는 Ext JS 코드 축소, 스캐폴딩, 프로덕션 빌드 생성을 제공하는 도구입니다.

센차 IDE 플러그인

Sencha 프레임워크를 IntelliJ, WebStorm IDE에 통합하는 Sencha IDE 플러그인입니다. 이는 코드 완성, 코드 검사, 코드 탐색, 코드 생성, 코드 리팩토링, 템플릿 생성, 맞춤법 검사 등의 기능을 제공하여 개발자 생산성을 높이는 데 도움이 됩니다.

센차 인스펙터

Sencha Inspector는 디버거가 개발하는 동안 모든 문제를 디버깅하는 데 도움이 되는 디버깅 도구입니다.

환경 구축

extjs6.0 버전이 너무 오래되었습니다.

Baidu 네트워크 디스크 다운로드 주소:
ext-6.0.0-gpl.zip_free 고속 다운로드|Baidu 네트워크 디스크 무제한 공유

버전 번호: ext-6.0.0

ext-6.0.0/build다음에서 찾을 수 있습니다:

CSS 파일

ext-6.0.0/build/classic/아래에서 여러 테마 세트를 찾으세요.

환경 테스트

index.html 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 100,
            width: 200,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel"></div>
   </body>
</html>

Ext.js 명명 규칙

클래스 이름의 첫 글자를 대문자로 표기

모두 대문자로 된 상수

다른 첫 글자는 소문자, 여러 단어, 두 번째 글자 다음은 모두 대문자입니다.

Ext.js 아키텍처

업데이트 날짜: 2022-05-19 11:18

Ext JS는 MVC/MVVM 아키텍처를 따릅니다.

MVC - 모델(model) - 뷰(view) - 컨트롤러(controller) 아키텍처(버전 4)

MVVM - 모델(model) - 뷰(view) - 모델 뷰(Viewmodel) (버전 5)

첫 번째 안녕 세계

1 단계

선택한 편집기에서 index.htm 페이지를 만듭니다. 아래 설명된 대로 HTML 페이지의 헤드 섹션에 필수 라이브러리 파일을 포함합니다.

index.html

<!DOCTYPE html>
<html>
   <head>
    <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>

설명

Ext.onReady() 메소드는 Ext JS가 Ext JS 요소를 렌더링할 준비가 되면 호출됩니다.
Ext.create() 메소드는 Ext JS에서 객체를 생성하는 데 사용됩니다. 여기서는 간단한 패널 클래스 Ext.Panel의 객체를 생성합니다.
Ext.Panel은 Ext JS에서 패널 생성을 위해 미리 정의된 클래스입니다.
각 Ext JS 클래스에는 몇 가지 기본 기능을 수행하기 위한 서로 다른 속성이 있습니다.

Ext.Panel 클래스는 다음과 같은 다양한 속성을 가지고 있습니다:

renderTo 는 이 패널이 렌더링해야 하는 요소입니다. \'helloWorldPanel\'은 Index.html 파일의 div ID입니다.
Height 및 Width 속성은 패널의 사용자 정의 치수를 제공하는 데 사용됩니다.
Title 속성은 패널의 제목을 제공하는 것입니다.
Html 속성은 패널에 표시될 HTML 콘텐츠입니다.

2 단계

표준 브라우저에서 index.html 파일을 열면 브라우저에 다음과 같은 출력이 표시됩니다.

ext.js 시작하기

도구