Sencha Touch 快速指南

Sencha Touch - 概述

Sencha Touch 是 Sencha 推出的一個流行框架，用於建立移動應用程式的使用者介面。它幫助開發者使用簡單的 HTML、CSS、JS 建立移動應用程式，支援許多移動裝置，例如 Android、iOS、BlackBerry 和 Windows。它基於 MVC 架構。Sencha Touch 的最新版本是 2.4。

Sencha Touch 的歷史

在釋出 Sencha 的其他產品 ExtJS（用於 Web 應用程式）之後，需要開發一個也適用於移動裝置的框架。

Sencha Touch 的第一個版本是 0.9 測試版，支援 Android 和 iOS 裝置。隨後，Sencha Touch 1.0 版本於 2010 年 11 月正式釋出，這是第一個穩定版本，也支援 Blackberry 裝置。

Sencha Touch 的最新版本是 2.4 版，於 2015 年 6 月釋出，支援許多裝置，例如 Windows、Tizen 以及 Android、iOS、BlackBerry OS 10、Android 版 Google Chrome 和移動版 Safari 等。

Sencha Touch 的特性

以下是 Sencha Touch 最突出的特性：

可定製且擁有 50 多個內建 UI 小部件，以及豐富的 UI 集合，例如列表、輪播、表單、選單和工具欄，這些都是專門為移動平臺構建的。
新版本與舊版本具有程式碼相容性。
靈活的佈局管理器，有助於在具有不同作業系統的多個移動裝置上組織資料的顯示和內容。
該框架包含一個強大的資料包，可以從任何後端資料來源獲取資料。
自適應佈局、動畫和流暢的滾動，為使用者提供更好的移動 Web 應用程式體驗。
開箱即用的原生主題，適用於所有主要平臺，使 Web 和混合應用程式能夠匹配目標平臺的外觀和感覺。

Sencha Touch ─ 優勢

Sencha Touch 是企業級 Web 應用程式開發的領先標準。它提供了構建適用於大多數移動裝置的強大應用程式所需的工具，提供了一個開發應用程式的單一平臺。以下是其中一些優勢：

提供響應式觸控功能，因此使用者在使用移動應用程式時可以輕鬆導航。
與所有最新版本的 iOS、Android、BlackBerry 和 Windows 相容。
提供任何移動應用程式所需的最快速度。
憑藉其跨平臺相容性，提供具有成本效益的解決方案。
基於原生 API 和基本的 Web 開發語言，例如 HTML、CSS、JS，這使得開發者更容易理解 Sencha Touch。

Sencha Touch ─ 限制

Sencha Touch API 不具備以下功能：

應用程式無法訪問裝置的攝像頭、聯絡人和平板電腦。
它不提供推送通知功能。為此，我們必須使用 WebSockets 或長輪詢。
根據通用公共許可證政策，開源應用程式免費，但商業應用程式需付費。
它不適合用於硬核圖形和動畫應用程式，例如遊戲應用程式。

Sencha Touch ─ 工具

Sencha SDK

這是 Sencha 開發工具包，用於建立專案的框架。我們使用命令“sencha -sdk path/to/touch generate app appName”來建立具有命令中給定名稱的應用程式。

建立應用程式後，您可以在應用程式中看到以下檔案：

app − 此資料夾包含應用程式的模型、檢視、控制器和儲存檔案。
app.js − 這是您的應用程式的主要 JS 檔案。Sencha 程式碼流從此檔案開始。
app.json − 這是應用程式的配置檔案，所有配置詳細資訊都位於此處。
index.html − 這是主要 HTML 檔案，我們在此處包含 app.js 和其他與 Sencha 相關的檔案。
package.json − 此檔案包含所有與應用程式相關的依賴項和其他資訊。
resources − 此資料夾包含應用程式所需的所有 CSS 檔案和影像。

Sencha CMD

Sencha CMD 是一個命令列工具，它提供 Sencha Touch 程式碼縮小、腳手架、構建生成和其他用於生產目的的有用功能。

我們使用命令“Sencha app build package”在命令提示符中構建應用程式。在命令提示符中轉到應用程式目錄並鍵入上述命令。構建成功後，我們將看到應用程式的縮小版本，該版本主要用於生產目的。

可以從此處下載 https://www.sencha.com/products/extjs/cmd-download/

Sencha Inspector

Sencha Inspector 是一個除錯工具，用於在開發過程中除錯 Sencha 程式碼中的任何問題。

Sencha Touch - 環境設定

我們已線上設定了 Sencha Touch 程式設計環境，以便您可以線上編譯和執行所有可用的示例。它讓您對正在閱讀的內容充滿信心，並使您可以使用不同的選項驗證程式。隨意修改任何示例並在網上執行。

<!DOCTYPE html>
<html>
   <head>
      <link href="http://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
      <script type="text/javascript" src="http://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'
                 }]
              });
           }
        });
      </script>
   </head>
   <body>
   </body>
</html>

本地環境設定

本節指導您如何在計算機上下載和設定 Sencha Touch。請按照以下步驟設定環境。

下載庫檔案

從 Sencha 下載 Sencha Touch 庫檔案的商業版本 https://www.sencha.com。您將在您的註冊郵箱中收到網站上的試用版，該試用版將是一個名為 sencha-touch-2.4.2-commercial 的壓縮資料夾。

解壓資料夾，您將找到各種 JavaScript 和 CSS 檔案，您將在我們的應用程式中包含這些檔案。我們主要包含以下檔案

(1) JavaScript 檔案 您可以在資料夾 \sencha-touch-2.4.2-commercial\touch-2.4.2 下找到的 JS 檔案是

檔案和說明
sencha-touch.js 這是包含執行應用程式的所有功能的核心檔案。
sencha-touch-all.js 此檔案包含所有已縮小的程式碼，檔案中沒有註釋
sencha-touch-debug.js 這是 sencha-touch-all.js 的未縮小版本，用於除錯目的。
sencha-touch-all-debug.js 此檔案也未縮小，用於開發目的，因為它包含所有註釋和控制檯日誌，還可以檢查任何錯誤/問題

您可以將這些檔案新增到專案的 JS 資料夾中，或者您可以提供系統中檔案所在的直接路徑。

(2) CSS 檔案 您可以在資料夾 I:\sencha touch\sencha-touch-2.4.2-commercial\touch-2.4.2\resources\css\sencha-touch.css 下找到許多基於主題的檔案

這些庫檔案將在 Sencha Touch 應用程式中按如下方式新增

<html>
   <head>
    <script type="text/javascript" src="../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>  
    <link href="../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
    <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

您將 Sencha Touch 應用程式程式碼儲存在 app.js 檔案中。

CDN 設定

CDN 是內容分發網路，您無需下載 Sencha Touch 庫檔案，而是可以直接將 ExtJS 的 CDN 連結新增到您的程式中，如下所示

<html>
   <head>
    <script type="text/javascript" src="http://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>    
    <link href="http://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
    <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

常用的編輯器

因為它是一個用於開發 Web 應用程式的 JavaScript 框架，所以在我們的專案中我們將有 HTML、JS 檔案，要編寫 Ext JS 程式，您將需要一個文字編輯器。市場上甚至還有多個 IDE 可用。但目前，您可以考慮以下其中一種

記事本：在 Windows 機器上，您可以使用任何簡單的文字編輯器，如記事本（本教程推薦）、Notepad++。
Brackets：是另一個流行的 IDE，可以從 http://brackets.io/ 下載。
Sublime：是另一個流行的 IDE，可以從 https://www.sublimetext.com/3/ 下載。

Sencha Touch - 命名規範

**命名規範**是一套應遵循的識別符號規則。它使程式碼易於閱讀，其他程式設計師也能理解。

Sencha Touch 中的命名規範遵循標準的 JavaScript 規範，這不是強制性的，但這是一個很好的實踐。它應該遵循駝峰式命名法來命名類、方法、變數和屬性。

如果名稱由兩個單詞組合而成，第二個單詞始終以大寫字母開頭。例如，doLayout()、StudentForm、firstName 等。

序號	名稱與約定
1	類名應該以大寫字母開頭，然後是駝峰式命名法。例如，StudentClass
2	方法名應該以小寫字母開頭，然後是駝峰式命名法。例如，studentMethod()
3	變數名應該以小寫字母開頭，然後是駝峰式命名法。例如，studentName
4	常量名應該全部大寫。例如，COUNT、MAX_VALUE
5	屬性名應該以小寫字母開頭，然後是駝峰式命名法。例如，enableColumnResize = true

Sencha Touch - 架構

任何移動應用程式的底層都是作業系統 (OS)，在其之上構建所有內容。然後是我們將執行應用程式的瀏覽器，可能是 Chrome、Safari、IE 或其他任何瀏覽器。上層是 W3 標準，對所有瀏覽器都通用。Sencha Touch 基於或構建在 W3 標準之上，即 HTML5，這使得單個應用程式能夠相容不同裝置的不同瀏覽器。

Sencha Touch 是三個框架的組合：ExtJs、JqTouch 和 Raphael（向量繪圖）。它遵循 MVC 架構。MVC 將程式碼分離成更易於管理的塊。

雖然架構對程式不是強制性的，但遵循這種結構是最佳實踐，可以使您的程式碼高度可維護和井井有條。

Sencha Touch 應用的專案結構

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Sencha Touch 應用資料夾將位於專案的 JavaScript 資料夾中。

該應用程式將包含控制器、檢視、模型、儲存和實用程式檔案以及 app.js。

app.js - 程式流程啟動的主要檔案。它應該使用 <script> 標籤包含在主 HTML 檔案中。應用程式呼叫應用程式的控制器以實現其餘功能。

Controller.js - 這是 Sencha Touch MVC 架構的控制器檔案。它包含應用程式的所有控制、事件監聽器和大部分程式碼功能。它執行以下任務：路由、檢視和模型之間的中介軟體以及事件執行。

View.js - 它包含應用程式的介面部分，顯示給使用者。Sencha Touch 使用各種 UI 富檢視，可以根據需要進行擴充套件和定製。

Store.js - 它包含本地快取的資料，這些資料將藉助模型物件呈現到檢視上。Store 使用代理獲取資料，代理定義了獲取後端資料的服務的路徑。

Model.js - 它包含將儲存資料繫結到檢視的物件。它是現實世界物件的表示，主要處理資料庫。

Utils.js - 它不包含在 MVC 架構中，但使用它是最佳實踐，以便使程式碼更簡潔、更不復雜且更易於閱讀。我們可以在此檔案中編寫方法，並在需要時在控制器或檢視渲染器中呼叫它們。它也有助於程式碼重用。

Sencha Touch - MVC

MVC 代表模型-檢視-控制器。這是一種架構模式，它將應用程式分離成邏輯元件，使其更易於管理。

下圖顯示了 MVC 架構的工作方式：

控制器 - 控制器控制整個應用程式，如果模型發生更改，它會通知檢視，並根據使用者輸入執行操作。

檢視 - 它包含應用程式的介面部分，對使用者可見。它在使用者輸入時通知控制器更改模型。

模型 - 它包含將儲存資料繫結到檢視的物件。它是現實世界物件的表示，主要處理資料庫。它還會在檢視發生任何更改時通知控制器。

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 屬性宣告 - 所有應用程式的類（例如其模型、檢視和控制器）都將位於此單一名稱空間下，從而減少了全域性變數和檔名衝突的可能性。
頁面準備好並且所有 JavaScript 檔案都載入後，將呼叫 launch() 方法。
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 檔案，您將獲得以下輸出。

Sencha Touch - 構建

如今，Web 應用程式的需求是開發快速且開發工作量少的應用程式。Sencha Touch 可以輕鬆做到這一點，因為它提供許多構建庫可供選擇，基於開發或生產程式碼，並具有建立自定義構建的功能。

Sencha Touch 構建庫動態載入類。動態載入是指僅在需要時載入的類，並且僅包含應用程式中需要的那些類。這使得應用程式執行速度更快，因為要載入的檔案數量減少了，同時載入時間也減少了。

Sencha Touch 2.x 提供以下五個構建庫。

序號	構建和用法
1	sencha-touchdebug.js 此構建用於在本地開發應用程式。它是一個非壓縮版本，包含所有註釋和除錯日誌，便於在開發過程中進行除錯。
2	senchatouch.js 此檔案用於生產目的。當我們進行自定義構建時，它是壓縮版本。
3	sencha-touchall.js 此檔案用於生產目的。當我們沒有自定義構建時，它是壓縮版本。
4	sencha-touchall-debug.js 此檔案用於生產環境中的除錯。它不是壓縮的，並且包含所有註釋和除錯日誌。
5	sencha-touchall-compat.js 此構建用於將 1.x 版本遷移到 2.x 版本。它會在 1.x 版本程式碼不相容且需要程式碼修改的地方發出警告。

除了上述構建之外，Sencha Touch 還提供了建立自定義構建的功能。

擁有自定義構建的優勢

自定義構建不會載入所有 touch 檔案。它只加載我們在應用程式中使用的那些檔案，這使得應用程式執行速度更快，並且更易於維護。

Sencha CMD 用於建立自定義構建。要在 Sencha CMD 中建立自定義構建，請轉到應用程式檔案所在的目錄，並鍵入以下命令之一以建立構建。

序號	命令和用法
1	sencha app build native 構建應用程式並準備一個名為 packager.temp.json 的檔案，您可以使用它來打包應用程式 - packager.temp.json 與 packager.json 相同，但包含其他路徑。
2	sencha app build -run native 構建並自動打包應用程式，並啟動相應的模擬器。
3	sencha app build package 構建具有打包支援的應用程式，但不配置 packager JSON 檔案。這對於手動維護多個 packager.json 檔案的專案很有用。

序號

命令和用法

sencha app build native

構建應用程式並準備一個名為 packager.temp.json 的檔案，您可以使用它來打包應用程式 - packager.temp.json 與 packager.json 相同，但包含其他路徑。

sencha app build -run native

構建並自動打包應用程式，並啟動相應的模擬器。

sencha app build package

構建具有打包支援的應用程式，但不配置 packager JSON 檔案。這對於手動維護多個 packager.json 檔案的專案很有用。

構建成功後，它將生成 all-classes.js 檔案，我們需要將其包含在我們的 index.html 中才能使其準備好投入生產。

以下程式碼顯示了為生產就緒程式碼所做的更改。

構建應用程式之前的 index.html

<!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-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

構建應用程式之後的 index.html

<!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.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>

Sencha Touch - 遷移

Sencha Touch 對早期版本進行了各種改進。

Sencha Touch 2 帶有向後相容性構建，這使得從 1.x 版本遷移到 2.x 版本的過程更加容易。

此構建只需在出現任何遷移問題或需要程式碼更改時提供警告和日誌，即可簡化工作，因此使用者將知道必須在哪裡進行更改，以確保應用程式與最新版本一起工作。

Sencha Touch 2.x 遷移需要以下程式碼更改。

類系統

Sencha Touch 1.x 中的程式碼 -

MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
   scroll: 'vertical',
   html: 'Student Panel'
   initComponent: function() {
      Ext.getCmp('StudentIdDiv').update('This is a Student panel');
   }
});

Sencha Touch 2.x 中的程式碼 -

Ext.define('MyApp.view.StudentPanel', {
   extend: 'Ext.Panel',

   config: {
      scroll: 'vertical',
      html: 'Student Panel'
   },

   initialize: function() {
      Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
   }
});

透過檢視這兩個版本，您可以看到建立類的更改方式，現在受到 ExtJs 的啟發，例如：

Ext.extend 已更改為 Ext.define。
現在所有與類相關的配置引數都在 config 引數下定義。
initComponent 已更改為 initialize() 方法。
在 Sencha Touch 2.x 中，我們可以使用 setHtml() 和 getHtml() 函式來更新 html 或獲取值。

MVC 架構

Sencha Touch 1.x 程式碼是模組化的，基於 MVC 架構。Sencha Touch 2.x 遵循不同的語法來編寫模型、檢視和控制器。讓我們看看不同版本中模型、檢視和控制器檔案的區別。

模型

Sencha Touch 1.x 中的程式碼 -

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Sencha Touch 2.x 中的程式碼 -

Ext.define('MyApp.model.StudentModel', {
   extend: 'Ext.data.Model', config: {
      fields: [
         {name: 'name',  type: 'string'},
         {name: 'age',   type: 'int'}
      ]
   }
});

Ext.regModel 已更改為 Ext.define，它擴充套件了 Ext.data.Model。

現在在 2.x 版本中，所有欄位都位於 config 部分下。

檢視

Sencha Touch 1.x 中的程式碼 -

Ext.Panel("studentView", {
   items: [{}]
});

Sencha Touch 2.x 中的程式碼 -

Ext.define('MyApp.view.StudentView', {
   extend: 'Ext.tab.Panel',
   items: [{}]
});

檢視幾乎相同，唯一的變化是檢視名稱遵循 2.x 版本的名稱空間，例如 Myapp.view.StudentView，並且程式碼像模型一樣在 Ext.define 方法中編寫。

控制器

Sencha Touch 1.x 中的程式碼 -

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Sencha Touch 2.x 中的程式碼 -

Ext.define('MyApp.controller.studentController', {
   extend: 'Ext.app.Controller', someMethod: function() {
      alert('Method is called');
   }
});

與模型在控制器中相同。此外，Ext.regController 已更改為 Ext.define，它擴充套件了 Ext.app.Controller。

應用程式

Sencha Touch 1.x 中的程式碼 -

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Sencha Touch 2.x 中的程式碼 -

Ext.application({
   name: 'MyApp',
   models: ['studentModel'],
   controllers: ['studentController'],
   views: ['studentView'],
   stores: ['studentStore'],

   launch: function() {
      Ext.create('MyApp.view.Main');
   }
});

1.x 版本和 2.x 版本之間的主要區別在於，在 2.x 版本中，我們在應用程式本身中宣告所有模型、檢視、控制器和儲存。

Sencha Touch - 核心概念

Sencha Touch 有各種核心概念，例如類系統、ajax、控制器等。

下表列出了 Sencha Touch 核心概念的連結。

序號	概念和描述連結
1	類系統
2	元件
3	控制器
4	BlackBerry 支援
5	Ajax 的使用

Sencha Touch - 資料包

Sencha Touch 中的資料包負責執行任何型別的資料操作，無論是儲存還是載入資料。

資料包與模型、儲存和代理相關。

序號	概念和描述連結
1	模型它是資料和欄位的集合，我們用它在 UI 上顯示所有值。描述
2	儲存它是模型例項的集合，基本上在本地儲存資料。在儲存中，我們編寫所有事件和 REST 呼叫以獲取資料。描述
3	代理它主要負責在儲存中載入資料。我們主要使用 ajax 代理來載入儲存資料。描述

序號

概念和描述連結

模型

它是資料和欄位的集合，我們用它在 UI 上顯示所有值。描述

儲存

它是模型例項的集合，基本上在本地儲存資料。在儲存中，我們編寫所有事件和 REST 呼叫以獲取資料。描述

代理

它主要負責在儲存中載入資料。我們主要使用 ajax 代理來載入儲存資料。描述

Sencha Touch - 主題

Sencha Touch 提供許多主題可用於您的應用程式。您可以用不同的主題替換 classic 主題，並檢視根據我們用於應用程式的裝置而產生的輸出差異。這隻需替換主題 CSS 檔案即可完成，如下例所示。

桌面主題

考慮一下你第一個“Hello World”應用程式。以下 CSS 程式碼用於桌面主題。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

要檢視效果，請嘗試以下程式：

即時演示

<!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>
</html>

這將產生以下結果：

Windows主題

考慮一下你第一個“Hello World”應用程式。從應用程式中刪除以下 CSS 程式碼：

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

新增以下 CSS 程式碼以使用 Windows 主題。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

要檢視效果，請嘗試以下程式：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.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>
</html>

這將產生以下結果：

IOS 主題

考慮一下你第一個“Hello World”應用程式。從應用程式中刪除以下 CSS 程式碼。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

新增以下 CSS 程式碼以使用 Windows 主題

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

要檢視效果，請嘗試以下程式：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.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>
</html>

這將產生以下結果：

IOS 經典主題

考慮一下你第一個“Hello World”應用程式。從應用程式中刪除以下 CSS 程式碼：

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

新增以下 CSS 程式碼以使用 Windows 主題：

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

要檢視效果，請嘗試以下程式：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.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>
</html>

這將產生以下結果：

Android 主題

考慮一下你第一個“Hello World”應用程式。從應用程式中刪除以下 CSS 程式碼。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

新增以下 CSS 程式碼以使用 Windows 主題。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

要檢視效果，請嘗試以下程式：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.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>
</html>

這將產生以下結果：

BlackBerry 主題

考慮一下你第一個“Hello World”應用程式。從應用程式中刪除以下 CSS 程式碼。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

新增以下 CSS 程式碼以使用 Windows 主題。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

要檢視效果，請嘗試以下程式：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.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>
</html>

這將產生以下結果：

Sencha Touch - 裝置配置檔案

在當今的技術世界中，我們擁有多種裝置，例如移動裝置、平板電腦、桌上型電腦和筆記型電腦，它們具有不同的螢幕尺寸。因此，需要開發可在所有裝置上訪問且外觀良好的應用程式。但是，為不同的裝置開發不同的程式碼非常耗時且昂貴。

Sencha Touch 在這方面透過提供裝置配置檔案功能來幫助我們。基於活動配置檔案，將執行並應用不同的依賴項。

我們在編寫應用程式程式碼時可以宣告裝置配置檔案。我們可以有多個裝置，例如：

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

完成後，將載入配置檔案，如下所示：

MyApp.profiles.Phone.js
MyApp.profiles.Tablet.js

編寫簡單的手機配置檔案

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

編寫簡單的平板電腦配置檔案

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

正如我們在配置檔案中看到的，我們有 isActive 函式，它確定特定裝置是否處於活動狀態。如果裝置處於活動狀態，則將載入並例項化相應的依賴項。

如上例所示，如果我們使用的是手機裝置，則手機配置檔案的 isActive 函式將返回 true，並將載入與手機裝置相關的依賴項；此處將載入 phoneView。如果裝置是平板電腦，則手機配置檔案的 isActive 函式將返回 false，而平板電腦配置檔案的 isActive 函式將返回 true，並將載入依賴項 tabletView。

啟動過程

這裡需要注意的另一點是，當應用程式中存在配置檔案時，應用程式程式碼的載入和例項化將按以下順序進行：

首先例項化控制器，並將載入每個控制器的 init 函式。
將呼叫配置檔案的 launch 函式。
將呼叫應用程式的 launch 函式。

配置檔案和應用程式的 launch 函式都是可選的，因此，如果我們沒有定義其中任何一個，則不會呼叫它們。

請檢視以下程式碼，以檢查不同 launch 和 init 函式的定義位置和方式。

控制器的 init 函式

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

配置檔案的 launch 函式

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

應用程式的 launch 函式

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});

Sencha Touch - 依賴項

Sencha Touch 中定義了某些宣告依賴項的方法，一種在應用程式內，另一種在類內。

讓我們看看定義依賴項的不同方法。

應用程式級依賴項

在這裡，我們在建立 Ext.application 時宣告所有依賴項。

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

現在，當應用程式載入時，所有依賴項將同時載入。其他檔案的路徑將為：

MyApp.views.StudentsView
MyApp.models.StudentsModel
MyApp.stores.StudentsStore 等。

上述宣告方法不僅載入檔案，還決定應保持哪個配置檔案處於活動狀態。載入控制器後，它確保對其進行例項化。載入儲存後，它會對其進行例項化，如果沒有給出 ID，則會提供一個 ID。

特定於配置檔案的依賴項

當我們在應用程式中使用配置檔案時，可能某些功能僅適用於某些特定配置檔案。

特定於配置檔案的依賴項是在配置檔案本身中宣告的，而不是在應用程式級別宣告。

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

無論配置檔案是否處於活動狀態，依賴項都會載入。但是，基於活動配置檔案，將進行進一步處理，例如例項化控制器和儲存。

巢狀依賴項

當我們擁有較大的應用程式時，我們有多個控制器、模型、檢視和儲存。

在較大的應用程式中保持模組化始終是好的做法。為此，我們可以定義子資料夾，並在宣告依賴項時使用子資料夾名稱來宣告。

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

在上述情況下，將載入以下檔案：

MyApp.controllers.Controller
MyApp.controllers.nested.NewController
MyApp.Views.Sview
MyApp.Views.class.Cview

外部依賴項

我們可以透過提供類的完全限定名稱來指定應用程式外部的依賴項，如下所示：

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

在上述情況下，將載入以下檔案：

Class/view/LoginForm.js
Class/controller/Sessions.js
Class/model/User.js
app/view/Welcome.js
app/controller/Main.js

Sencha Touch - 環境檢測

它可以幫助你確定你正在使用的作業系統、你正在使用的瀏覽器以及你的環境中可用的功能。

Sencha Touch 提供不同的函式來獲取特定於環境的資訊。可以在以下條件下檢查下面提到的所有方法：if(Ext.os.is.Windows){}，並且基於條件可以執行任務。

以下所有方法都返回布林值。

作業系統

Ext.os 是一個類，它為你提供了不同的方法來了解我們正在使用的作業系統。

序號	方法和說明
1	Ext.os.is.webOS 如果你使用的是 webOS 作業系統，此函式將返回 true，否則返回 false。
2	Ext.os.is.RIMTable 如果你使用的是 RIMTable 作業系統，此函式將返回 true，否則返回 false。
3	Ext.os.is.Linux 如果你使用的是 Linux 作業系統，此函式將返回 true，否則返回 false。
4	Ext.os.is.Windows 如果你使用的是 Windows 作業系統，此函式將返回 true，否則返回 false。
5	Ext.os.is.MacOs 如果你使用的是 Mac 作業系統，此函式將返回 true，否則返回 false。
6	Ext.os.is.BlackBerry 如果你使用的是 BlackBerry 作業系統，此函式將返回 true，否則返回 false。
7	Ext.os.is.iOS 如果你使用的是 IOS 作業系統，此函式將返回 true，否則返回 false。
8	Ext.os.is.Android 如果你使用的是 Android 作業系統，此函式將返回 true，否則返回 false。

裝置檢測

序號	方法和說明
1	Ext.os.is.iPad 如果你使用的是 iPad，此函式將返回 true，否則返回 false。
2	Ext.os.is.iPhone 如果你使用的是 iPhone，此函式將返回 true，否則返回 false。
3	Ext.os.is.iPod 如果你使用的是 iPod，此函式將返回 true，否則返回 false。

序號

方法和說明

Ext.os.is.iPad

如果你使用的是 iPad，此函式將返回 true，否則返回 false。

Ext.os.is.iPhone

如果你使用的是 iPhone，此函式將返回 true，否則返回 false。

Ext.os.is.iPod

如果你使用的是 iPod，此函式將返回 true，否則返回 false。

作業系統版本

序號	方法和說明
1	Ext.os.name 它返回作業系統的名稱。
2	Ext.os.version.version 它提供我們正在使用的作業系統的版本。

序號

方法和說明

Ext.os.name

它返回作業系統的名稱。

Ext.os.version.version

它提供我們正在使用的作業系統的版本。

瀏覽器檢測

序號	方法和說明
1	Ext.browser.is.IE 如果我們使用的是 Internet Explorer 瀏覽器，此函式將返回 true，否則返回 false。
2	Ext.browser.is.FF 如果我們使用的是 FireFox 瀏覽器，此函式將返回 true，否則返回 false。
3	Ext.browser.is.Chrome 如果我們使用的是 Chrome 瀏覽器，此函式將返回 true，否則返回 false。
4	Ext.browser.is.Opera 如果我們使用的是 Opera 瀏覽器，此函式將返回 true，否則返回 false。
5	Ext.browser.is.Safari 如果我們使用的是 Safari 瀏覽器，此函式將返回 true，否則返回 false。

此函式 Ext.browser 提供各種其他函式：

序號	方法和說明
1	Ext.browser.userAgent 它返回當前的 userAgent。
2	Ext.browser.isSecure 如果當前頁面正在使用 SSL，則返回 true。
3	Ext.browser.isStrict 如果瀏覽器處於嚴格模式，則返回 true。
4	Ext.browser.engineName 它返回瀏覽器引擎名稱（WebKit、Gecko、Presto、Trident 和 Other）。
5	Ext.browser.engineVersion 它返回瀏覽器引擎的版本。

功能

Ext.feature.has 用於檢查瀏覽器是否具有以下功能。

序號	方法和說明
1	Ext.feature.has.Audio 如果瀏覽器支援 html5 的音訊標籤功能，此方法將返回 true。
2	Ext.feature.has.Canvas 如果瀏覽器支援 html5 的畫布標籤功能，此方法將返回 true。
3	Ext.feature.has.classList 如果瀏覽器支援 html5 的 classlist 功能（用於為 html 元素新增、刪除和切換 css 類），此方法將返回 true。
4	Ext.feature.has.Css3dTransforms 如果瀏覽器支援 css3 的 Css 3d 變換功能，此方法將返回 true。
5	Ext.feature.has.CssAnimations 如果瀏覽器支援 css3 的動畫，此方法將返回 true。
6	Ext.feature.has.CssTransforms 如果瀏覽器支援 css3 的 Css 變換功能，此方法將返回 true。
7	Ext.feature.has.CssTransitions 如果瀏覽器支援 css3 的過渡功能，此方法將返回 true。
8	Ext.feature.has.DeviceMotion 如果瀏覽器支援裝置運動功能，此方法將返回 true。
9	Ext.feature.has.Geolocation 如果瀏覽器支援 html5 的地理位置功能，此方法將返回 true。
10	Ext.feature.has.History 如果瀏覽器支援 html 的歷史記錄功能，此方法將返回 true。
11	Ext.feature.has.Orientation 如果瀏覽器可以檢測裝置方向，此方法將返回 true。
12	Ext.feature.has.OrientationChange 如果瀏覽器可以檢測裝置方向的變化，此方法將返回 true。
13	Ext.feature.has.Range Range 是一種用於範圍滑塊元素的 html 輸入標籤型別，因此如果瀏覽器支援滑塊，此函式將返回 true。
14	Ext.feature.has.SqlDatabase Web SQL 資料庫是用於在資料庫中儲存資料並在其上執行查詢操作的網頁 API。如果瀏覽器支援 Web SQL 資料庫，此方法將返回 true。
15	Ext.feature.has.Svg Svg 代表可縮放向量圖形，如果瀏覽器支援 html 5 的 svg 功能，此方法將返回 true。
16	Ext.feature.has.Touch 如果瀏覽器具有觸控功能，此方法將返回 true。
17	Ext.feature.has.Video 如果瀏覽器支援 html 5 影片標籤，此方法將返回 true。
18	Ext.feature.has.Vml Vml 代表向量標記語言，這是一種基於 xml 的標記語言。因此，如果瀏覽器支援 vml，此方法將返回 true。
19	Ext.feature.has.WebSockets WebSocket 本質上是一種用於計算機的通訊協議，支援客戶端和伺服器之間的雙向通訊。如果瀏覽器支援 WebSockets，此方法將返回 true，否則返回 false。

Sencha Touch - 事件

事件是在類中發生某些事情時觸發的事件。例如，當按鈕被點選或在元素呈現之前/之後。

編寫事件的方法

以下是編寫事件的方法。

使用偵聽器的內建事件。
稍後附加事件
自定義事件

使用偵聽器的內建事件

Sencha Touch 提供 listener 屬性用於在 Sencha Touch 檔案中編寫事件和自定義事件。

在 Sencha Touch 中編寫偵聽器

我們將透過向面板新增 listen 屬性來在之前的程式中新增偵聽器，如下所示：

即時演示

<!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.Panel', {
                  html: 'My Panel', fullscreen: true, listeners: {
                     painted: function() {
                        Ext.Msg.alert('I was painted to the screen');
                     }
                  }
               });
            }
         });
      </script> 
   </head>
</html>

這將產生以下結果：

透過這種方式，我們還可以在 listeners 屬性中編寫多個事件。

同一偵聽器中的多個事件

即時演示

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on({
                  tap: function() {
                     var randomWidth = 100 + Math.round(Math.random() * 200);
                     this.setWidth(randomWidth);
                  },
                  widthchange: function(button, newWidth, oldWidth) {
                     alert('My width changed from ' + oldWidth + ' to ' + newWidth);
                  }
               });
            }
         });       
      </script> 
   </head>
</html>

這將產生以下結果：

稍後附加事件

在之前的事件編寫方法中，我們在建立元素時就在監聽器中編寫了事件。

另一種附加事件的方法如下：

即時演示

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });
               
               myButton.on('tap', function() {
                  alert("Event listener attached by .on");
               });
            }
         });
      </script> 
   </head>
</html>

這將產生以下結果：

自定義事件

我們可以在 Sencha Touch 中編寫自定義事件，並使用 fireEvent 方法觸發事件。下面的示例解釋瞭如何編寫自定義事件。

即時演示

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: "Just wait 5 seconds",

                  listeners: {
                     myEvent: function(button, points) {
                        alert('myEvent was fired! You score ' + points + ' points');
                     }
                  }
               });

               Ext.defer(function() {
                  var number = Math.ceil(Math.random() * 100);
                  myButton.fireEvent('myEvent', myButton, number);
               }, 5000);
            }
         });
      </script> 
   </head>
</html>

頁面載入完畢且文件準備就緒後，帶有按鈕的 UI 頁面將顯示，並且我們在 5 秒後觸發事件，因此文件準備就緒後，5 秒後將出現警報框。

在這裡，我們編寫了自定義事件“myEvent”，並且我們正在觸發事件，如 button.fireEvent(eventName);

Sencha Touch - 佈局

佈局是指元素在容器中的排列方式。可以是水平的、垂直的或任何其他方式。Sencha Touch 在其庫中定義了不同的佈局，儘管我們也可以隨時編寫自定義佈局。

序號	佈局和描述
1	hBox 此佈局允許元素以水平方式分佈。
2	vBox 此佈局允許元素以垂直方式分佈。這是常用佈局之一。
3	Fit 在此佈局中，容器填充單個面板，並且當沒有與佈局相關的特定要求時，將使用此佈局。
4	Card(TabPanel) 此佈局以選項卡方式排列不同的元件。選項卡將顯示在容器頂部。每次只有一個選項卡可見，每個選項卡都被視為一個不同的元件。

Sencha Touch - 歷史記錄支援

Sencha Touch 提供完整的歷史記錄支援和深度連結功能。

它具有最簡單的後退按鈕功能，可以幫助使用者在螢幕之間導航，甚至無需重新整理頁面或應用程式。

它還提供路由功能，幫助使用者導航到任何 URL。根據瀏覽器視窗中提供的 URL，它呼叫特定函式來執行特定任務。

檢視以下後退按鈕功能示例。

此示例顯示巢狀列表，它只不過是在列表內的列表，因此，當您單擊任何列表項時，它將開啟另一個列表，並且螢幕頂部會出現一個後退按鈕。

有關完整的程式碼庫，您可以在檢視元件部分下檢視巢狀列表。

路由

最簡單的路由示例

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

在上述示例中，如果瀏覽器 URL 為 https://myApp.com/#login，則將呼叫 showLogin 函式。

我們可以在 URL 中提供引數，並根據特定引數呼叫函式。例如，如果 URL 為 https://myApp.com/#user/3，則將呼叫另一個函式 userId，並且可以在函式內使用特定 ID。

高階路由

有時，我們有高階引數，其中包含逗號、空格和特殊字元等。如果我們使用上述路由編寫方式，則它將無法工作。為了解決這個問題，Sencha touch 提供了條件路由，我們可以在其中指定引數應接受的資料型別條件。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

因此，如上例所示，我們在條件中給出了正則表示式，它清楚地說明了允許作為 URL 引數的資料型別。

在不同的裝置配置檔案中共享相同的 URL

由於 Sencha touch 提供裝置配置檔案，因此相同的應用程式程式碼可以在多個裝置上使用，對於相同的 URL，不同的配置檔案可能具有不同的功能。

為了解決這個問題，Sencha touch 使我們能夠自由地在主控制器中編寫路由，並在所有配置檔案中編寫呼叫的函式及其特定於配置檔案的函式。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

例如，我們有一個包含 showLogin 函式的主控制器，並且我們有兩個不同的配置檔案（手機/平板電腦）。這兩個配置檔案都具有具有特定於配置檔案的不同程式碼的 showLogin 函式。

這樣，我們可以使用其特定功能在多個配置檔案裝置中共享相同的 URL。

Sencha Touch - 上傳與下載

Sencha Touch 提供 XHR2 配置來處理 Ajax 和 Ajax2 開發。

XHR2 是 xmlHttpRequest 級別 2，用於從伺服器請求資料。對於任何 Web 應用程式，資料都駐留在伺服器上，頁面載入後，應使用 Ajax 請求從伺服器訪問資料。

Sencha Touch 中的 XHR2 提供進度條功能，該功能向用戶顯示為特定請求傳輸的資料量。XHR2 是新新增的，因此我們需要檢查瀏覽器是否支援它。

以下是檢查瀏覽器是否支援 XHR2 的函式：

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

我們甚至可以檢查瀏覽器是否支援使用 XHR2 的漸進式上傳。

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

Sencha Touch 包含各種新的 XHR2 功能。

序號	功能和描述
1	XHR2: true 這用於啟用和停用應用程式中的 XHR2 功能。
2	Ext.field.File 添加了新的檔案欄位，以提供有關欄位型別的更多資訊。
3	Ext.field.FileInput 用於提供 FileInput。
4	Ext.progressIndicator 用於以進度條的形式提供已傳輸資料的精確百分比。
5	xtype: fileinput 建立 fileInput 類例項。
6	xtype: filefield 建立 file 類例項。
7	responseType : value 此引數允許各種型別的響應，例如文字、文件、blob 等。

以下是使用和不使用引數傳送簡單的 ajax 請求以及使用 ajax 上傳檔案的示例。

沒有引數的簡單 Ajax 請求 - 成功

即時演示

<!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.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

這將產生以下結果：

上面的示例顯示了成功的 ajax 呼叫，因為提到的 URL 是正確的。在此示例中，我們沒有傳遞任何引數，它只是一個簡單的 ajax 請求，它會命中提到的 URL。

如果您在開發者工具中使用 Chrome 瀏覽器，請導航到網路部分，您可以看到正在傳送的請求以及我們獲得的響應。

沒有引數的簡單 Ajax 請求 - 失敗

即時演示

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

這將產生以下結果：

在上面的示例中，為了顯示 ajax 失敗是如何工作的，我們提到了錯誤的 URL。比較這個示例和之前的示例，你會發現不同之處。

在 Ajax 請求中傳送引數

即時演示

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

這將產生以下結果：

在此示例中，我們使用 ajax 呼叫的 data 屬性傳遞 ajax 引數。

使用 Ajax 上傳檔案

即時演示

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

這將產生以下結果：

此示例顯示瞭如何使用 ajax 呼叫上傳資料。在此示例中，我們使用進度條指示器來顯示上傳檔案時的進度。

Sencha Touch - 檢視元件

Sencha Touch 提供各種 UI 元件，可以根據需要進行自定義。

序號	元件和描述
1	Carousel 此 UI 元件用於顯示 Carousel。
2	List 此 UI 元件用於顯示列表。
3	巢狀列表此 UI 元件用於顯示巢狀列表。
4	Form 此 UI 元件用於顯示錶單。
5	Chart 此 UI 元件用於顯示不同型別的圖表。
6	浮動元件此 UI 元件用於顯示浮動元件。
7	Tab Panel 此 UI 元件用於顯示 Tab 面板檢視。
8	導航檢視此 UI 元件用於顯示導航檢視。
9	操作選單此 UI 元件用於顯示操作選單欄。
10	資料檢視此 UI 元件用於顯示資料檢視。
11	地圖此 UI 元件用於顯示谷歌地圖。

Sencha Touch - 打包

Sencha Touch 帶有原生打包功能。

以下是 Sencha Touch 原生打包概念的連結。

序號	概念和描述連結
1	原生 iOS 配置
2	原生 API

Sencha Touch - 最佳實踐

基本的 JavaScript 最佳實踐

最好將所有與 JavaScript 相關的程式碼儲存在單獨的 **js（外部 JS）** 檔案中，而不是將其寫入 head 部分下的 **<script>** 標記或文件正文中的內聯 JavaScript 中。

在元素在進一步邏輯中使用之前，始終執行空檢查。

始終遵循命名約定，因為它使其他任何程式設計師都能輕鬆理解程式碼。

為了使程式碼易於理解，最好為 JS 方法編寫註釋，並清楚說明函式的功能。

Sencha Touch 的特定最佳實踐

使用 Sencha Touch 推薦的資料夾結構，這在 JS 壓縮或縮小期間將很有幫助。

強烈建議在控制器中使用監聽器（onclick/onblur 等），而不是將其直接寫在 html 頁面中。

不要在從檢視呼叫儲存時建立儲存例項。

當我們建立儲存例項時，我們應該始終銷燬它，因為它會影響效能。

使用 Sencha Touch 時，不要指定任何其他簡單的 JavaScript 檔案。使用 Ext 類中的所有函式（在控制器或實用程式中提到）。

當模型對映和名稱相同時，不要指定對映。僅名稱即可解決問題。

不要在檢視中使用不必要的屬性。僅使用所需的屬性及其與預設值不同的值。

列印頁面