Ext.js-첫 번째 프로그램

이 장에서는 Ext JS에서 첫 번째 Hello World 프로그램을 작성하는 단계를 나열합니다.

1 단계

선택한 편집기에서 index.htm 페이지를 만듭니다. 다음과 같이 html 페이지의 헤드 섹션에 필요한 라이브러리 파일을 포함하십시오.

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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 JS가 Ext JS 요소를 렌더링 할 준비가되면 Ext.onReady () 메서드가 호출됩니다.
Ext.create () 메서드는 Ext JS에서 객체를 생성하는 데 사용됩니다. 여기에서는 간단한 패널 클래스 Ext.Panel의 객체를 생성합니다.
Ext.Panel은 패널을 만들기 위해 Ext JS에 미리 정의 된 클래스입니다.
모든 Ext JS 클래스에는 몇 가지 기본 기능을 수행하기위한 서로 다른 속성이 있습니다.

Ext.Panel 클래스에는 다음과 같은 다양한 속성이 있습니다.

renderTo이 패널이 렌더링해야하는 요소입니다. 'helloWorldPanel'은 Index.html 파일의 div ID입니다.
Height 과 width 속성은 패널의 크기를 사용자 정의하기위한 것입니다.
Title 속성은 패널에 제목을 제공하는 것입니다.
Html property는 패널에 표시 할 html 컨텐츠입니다.

2 단계

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