Sencha Touch-첫 번째 프로그램

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

1 단계

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

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

설명

Ext.application () 메서드는 Sencha Touch 응용 프로그램의 시작점입니다. name 속성으로 선언 된 'Sencha'라는 전역 변수를 생성합니다. 모델, 뷰 및 컨트롤러와 같은 모든 응용 프로그램의 클래스는이 단일 네임 스페이스에 상주하므로 전역 변수와 파일 이름이 충돌 할 가능성이 줄어 듭니다.
페이지가 준비되고 모든 JavaScript 파일이로드되면 launch () 메서드가 호출됩니다.
Ext.create () 메서드는 Sencha Touch에서 개체를 만드는 데 사용됩니다. 여기에서는 간단한 패널 클래스 Ext.tab.Panel의 객체를 생성합니다.
Ext.tab.Panel은 패널을 만들기 위해 Sencha Touch에서 미리 정의 된 클래스입니다.
모든 Sencha Touch 클래스에는 몇 가지 기본 기능을 수행하기위한 서로 다른 속성이 있습니다.

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

fullscreen 속성은 전체 화면을 사용하는 것이므로 패널은 전체 화면 공간을 차지합니다.
items property는 다양한 항목의 컨테이너입니다.
iconCls 다른 아이콘을 표시하는 데 사용되는 클래스입니다.
title 속성은 패널에 제목을 제공하는 것입니다.
html property는 패널에 표시 할 html 컨텐츠입니다.

2 단계

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