Sencha Touch - 第一個程式

在本章中，我們將列出在 Ext JS 中編寫第一個“Hello World”程式的步驟。

步驟 1

在您選擇的編輯器中建立一個 index.htm 頁面。在 html 頁面的 head 部分包含所需的庫檔案，如下所示。

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 應用程式的起點。它建立一個名為“Sencha”的全域性變數（透過 name 屬性宣告）——所有應用程式的類，例如其模型、檢視和控制器，都將位於此單一名稱空間下，從而減少了全域性變數和檔名衝突的可能性。
launch() 方法在頁面準備好並且所有 JavaScript 檔案載入後呼叫。
Ext.create() 方法用於在 Sencha Touch 中建立物件。在這裡，我們建立了一個簡單的面板類 Ext.tab.Panel 的物件。
Ext.tab.Panel 是 Sencha Touch 中用於建立面板的預定義類。
每個 Sencha Touch 類都有不同的屬性來執行一些基本功能。

Ext.Panel 類具有各種屬性，例如：

fullscreen 屬性用於使用整個螢幕，因此面板將佔據全屏空間。
items 屬性是各種專案的容器。
iconCls 是用於顯示不同圖示的類。
title 屬性用於為面板提供標題。
html 屬性是在面板中顯示的 html 內容。

步驟 2

在標準瀏覽器中開啟 index.htm 檔案，您將獲得以下輸出。

列印頁面