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 파일을 열면 다음과 같은 출력이 표시됩니다.