Ext.js 快速指南

Ext.js - 概述

Ext JS 是一個流行的 JavaScript 框架，它提供豐富的 UI 用於構建具有跨瀏覽器功能的 Web 應用程式。Ext JS 主要用於建立桌面應用程式。它支援所有現代瀏覽器，例如 IE6+、FF、Chrome、Safari 6+、Opera 12+ 等。而 Sencha 的另一個產品 Sencha Touch 用於移動應用程式。

Ext JS 基於 MVC/MVVM 架構。最新版本的 Ext JS 6 是一個單一平臺，可用於桌面和移動應用程式，而無需為不同平臺編寫不同的程式碼。

歷史

Ext JS 1.1

Ext JS 的第一個版本由 Jack Slocum 於 2006 年開發。它是一組實用程式類，是 YUI 的擴充套件。他將該庫命名為 YUI-ext。

Ext JS 2.0

Ext JS 2.0 版本於 2007 年釋出。此版本具有一個新的 API 文件，用於功能有限的桌面應用程式。此版本與以前的 Ext JS 版本不相容。

Ext JS 3.0

Ext JS 3.0 版本於 2009 年釋出。此版本添加了圖表和列表檢視等新功能，但以犧牲速度為代價。它與 2.0 版本相容。

Ext JS 4.0

在 Ext JS 3 釋出後，Ext JS 的開發者面臨著提高速度的主要挑戰。Ext JS 4.0 版本於 2011 年釋出。它具有完全修改的結構，遵循 MVC 架構並提供快速的應用程式。

Ext JS 5.0

Ext JS 5.0 版本於 2014 年釋出。此版本的主要變化是將 MVC 架構更改為 MVVM 架構。它包括在觸控裝置上構建桌面應用程式的能力、雙向資料繫結、響應式佈局以及更多功能。

Ext JS 6.0

Ext JS 6 合併了 Ext JS（用於桌面應用程式）和 Sencha Touch（用於移動應用程式）框架。

功能

以下是 Ext JS 的突出功能。

可自定義的 UI 小部件，包含豐富的 UI 集合，例如網格、透視網格、表單、圖表、樹。
新版本與舊版本的程式碼相容性。
靈活的佈局管理器有助於跨多個瀏覽器、裝置和螢幕尺寸組織資料和內容的顯示。
高階資料包將 UI 小部件與資料層分離。資料包允許使用功能強大的模型在客戶端收集資料，這些模型支援排序和過濾等功能。
它是協議無關的，可以訪問來自任何後端源的資料。
可自定義的主題 Ext JS 小部件提供多種開箱即用的主題，這些主題在各個平臺上保持一致。

優勢

Sencha Ext JS 是企業級 Web 應用程式開發的領先標準。Ext JS 提供構建健壯的桌面和平板電腦應用程式所需的工具。

簡化跨桌面、平板電腦和智慧手機的跨平臺開發 - 適用於現代和傳統瀏覽器。
透過 IDE 外掛整合到企業開發環境中，提高開發團隊的生產力。
降低 Web 應用程式開發成本。
使團隊能夠建立具有引人入勝的使用者體驗的應用程式。
提供一組小部件，可以輕鬆地製作強大的 UI。
遵循 MVC 架構，因此程式碼高度可讀。

侷限性

庫的大小很大，大約 500 KB，這使得初始載入時間更長，並使應用程式變慢。
HTML 充滿了標籤，這使得它變得複雜且難以除錯。
根據通用公共許可證政策，它對開源應用程式是免費的，但對商業應用程式是收費的。
有時即使載入簡單的東西也需要幾行程式碼，而在純 HTML 或 JQuery 中則更簡單。
開發 Ext JS 應用程式需要相當有經驗的開發者。

工具

以下是 Sencha 提供的用於 Ext JS 應用程式開發（主要是在生產級別）的工具。

Sencha CMD

Sencha CMD 是一種工具，它提供 Ext JS 程式碼壓縮、腳手架和生產構建生成的功能。

Sencha IDE 外掛

Sencha IDE 外掛將 Sencha 框架整合到 IntelliJ、WebStorm IDE 中，透過提供程式碼完成、程式碼檢查、程式碼導航、程式碼生成、程式碼重構、模板建立、拼寫檢查等功能來幫助提高開發人員的生產力。

Sencha Inspector

Sencha Inspector 是一種除錯工具，可以幫助偵錯程式在開發過程中除錯任何問題。

Ext.js - 環境搭建

本地環境搭建

本節指導您如何在機器上下載和設定 Ext JS。請按照以下步驟設定環境。

下載庫檔案

從 Sencha 下載 Ext JS 庫檔案的試用版 https://www.sencha.com。您將在網站上註冊的郵件 ID 中獲得試用版，它將是一個名為 ext-6.0.1-trial 的壓縮資料夾。

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

JavaScript 檔案 - 您可以在 \ext-6.0.1-trial\ext6.0.1\build 資料夾下找到的 JS 檔案為 -

序號	檔案及描述
1	ext.js 這是核心檔案，包含執行應用程式的所有功能。
2	ext-all.js 此檔案包含所有已壓縮的程式碼，檔案中沒有註釋。
3	ext-all-debug.js 這是 ext-all.js 的未壓縮版本，用於除錯目的。
4	ext-all-dev.js 此檔案也未壓縮，用於開發目的，因為它包含所有註釋和控制檯日誌以檢查任何錯誤/問題。
5	ext-all.js 此檔案主要用於生產目的，因為它比其他任何檔案都小得多。

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

CSS 檔案 - 有許多基於主題的檔案，您可以在 \ext6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css 資料夾下找到它們

如果您要使用桌面應用程式，則可以使用 \ext-6.0.1-trial\ext-6.0.1\build\classic 資料夾下的經典主題
如果我們要使用移動應用程式，則可以使用可以在 \ext-6.0.1-trial\ext-6.0.1\build\modern 資料夾下找到的現代主題

以下庫檔案將新增到 Ext JS 應用程式中。

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

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

CDN 設定

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

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

常用編輯器

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

記事本 - 在 Windows 機器上，您可以使用任何簡單的文字編輯器，例如記事本（本教程推薦）、Notepad++、Sublime。
Eclipse - 它是由 Eclipse 開源社群開發的 IDE，可以從 https://www.eclipse.org/ 下載。

瀏覽器

Ext JS 支援跨瀏覽器相容性，它支援所有主要瀏覽器，例如 -

IE 6 及更高版本
Firefox 3.6 及更高版本
Chrome 10 及更高版本
Safari 4 及更高版本
Opera 11 及更高版本

您可以使用任何瀏覽器執行 Ext JS 應用程式。

Ext.js - 命名規範

命名約定是一組要遵循的識別符號規則。它使程式碼更易於閱讀，並且其他程式設計師也能理解。

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

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

名稱	約定
類名	它應該以大寫字母開頭，後跟駝峰式命名法。例如，StudentClass
方法名	它應該以小寫字母開頭，後跟駝峰式命名法。例如，doLayout()
變數名	它應該以小寫字母開頭，後跟駝峰式命名法。例如，firstName
常量名	它應該只用大寫字母。例如，COUNT、MAX_VALUE
屬性名	它應該以小寫字母開頭，後跟駝峰式命名法。例如，enableColumnResize = true

Ext.js - 架構

Ext JS 遵循 MVC/MVVM 架構。

MVC – 模型檢視控制器架構（版本 4）

MVVM – 模型檢視檢視模型（版本 5）

此架構對於程式不是強制性的，但是，遵循此結構以使您的程式碼高度可維護和組織化是一種最佳實踐。

帶有 Ext JS 應用程式的專案結構

----------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

Ext JS 應用程式資料夾將駐留在專案的 JavaScript 資料夾中。

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

app.js - 程式流程將從這裡開始的主要檔案，它應該使用 <script> 標籤包含在主 HTML 檔案中。應用程式呼叫應用程式的控制器以執行其餘功能。

Controller.js - 它是 Ext JS MVC 架構的控制器檔案。它包含應用程式的所有控制、事件監聽器和大部分程式碼功能。它定義了應用程式中使用的所有其他檔案的路徑，例如儲存、檢視、模型、require、mixins。

View.js - 它包含應用程式的介面部分，顯示給使用者。Ext JS 使用各種 UI 豐富的檢視，可以在這裡根據需要擴充套件和自定義。

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

Model.js - 它包含將儲存資料繫結到檢視的物件。它具有後端資料物件到檢視 dataIndex 的對映。資料是藉助儲存獲取的。

Utils.js − 它不包含在MVC架構中，但作為最佳實踐來使用，使程式碼更簡潔、更易理解、更易讀。我們可以在這個檔案中編寫方法，並在控制器或檢視渲染器中根據需要呼叫它們。它也有助於程式碼的可重用性。

在MVVM架構中，控制器由ViewModel代替。

ViewModel − 它基本上在檢視和模型之間進行中介。它將資料從模型繫結到檢視。同時，它與檢視沒有任何直接互動。它只瞭解模型。

工作原理

例如，如果我們在UI的兩個或三個地方使用一個模型物件。如果我們在UI的一個地方更改值，我們可以在不儲存更改的情況下看到它。模型的值發生更改，因此會反映在UI中的所有位置，無論模型在何處使用。

它使開發人員的工作量大大減少，也更加容易，因為不需要額外的程式碼來繫結資料。

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.onReady()方法將在Ext JS準備好渲染Ext JS元素後被呼叫。
Ext.create()方法用於在Ext JS中建立物件。這裡我們建立了一個簡單的面板類Ext.Panel的物件。
Ext.Panel是Ext JS中用於建立面板的預定義類。
每個Ext JS類都有不同的屬性來執行一些基本功能。

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

renderTo是此面板要渲染的元素。'helloWorldPanel'是Index.html檔案中的div id。
Height和width屬性用於自定義面板的大小。
Title屬性用於為面板提供標題。
Html屬性是要在面板中顯示的html內容。

步驟 2

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

Ext.js - 類系統

Ext JS是一個JavaScript框架，具有面向物件程式設計的功能。Ext是名稱空間，它封裝了Ext JS中的所有類。

在Ext JS中定義類

Ext提供了300多個類，我們可以將它們用於各種功能。

Ext.define()用於在Ext JS中定義類。

語法

Ext.define(class name, class members/properties, callback function);

類名是根據應用程式結構命名的類名。例如，appName.folderName.ClassName studentApp.view.StudentView。

類屬性/成員定義類的行為。

回撥函式是可選的。當類正確載入時呼叫它。

Ext JS類定義示例

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

建立物件

與其他基於OOPS的語言一樣，我們也可以在Ext JS中建立物件。

以下是建立Ext JS中物件的幾種不同方法。

使用new關鍵字

var studentObject = new student();
studentObject.getStudentName();

使用Ext.create()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

Ext JS中的繼承

繼承是將類A中定義的功能用於類B的原則。

在Ext JS中，可以使用兩種方法進行繼承：

Ext.extend

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

這裡，我們的自定義類StudentDetailsGrid正在使用Ext JS類GridPanel的基本功能。

使用Mixin

Mixin是使用類A中的類B而不擴充套件的一種不同方法。

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Mixin新增到控制器中，我們在其中宣告所有其他類，例如store、view等。透過這種方式，我們可以呼叫DepartmentUtils類並在控制器或此應用程式中使用其函式。

Ext.js - 容器

Ext JS中的容器是可以新增其他容器或子元件的元件。這些容器可以有多種佈局來安排容器中的元件。我們可以從容器及其子元素中新增或刪除元件。Ext.container.Container是Ext JS中所有容器的基類。

序號	描述
1	容器內的元件此示例顯示如何在容器內定義元件
2	容器內容器此示例顯示如何在容器內定義一個容器以及其他元件

有各種型別的容器Ext.panel.Panel、Ext.form.Panel、Ext.tab.Panel和Ext.container.Viewport是Ext JS中經常使用的容器。下面是顯示如何使用這些容器的示例。

序號	容器型別和描述
1	Ext.panel.Panel 此示例顯示一個Ext.panel.Panel容器
2	Ext.form.Panel 此示例顯示一個Ext.form.Panel容器
3	Ext.tab.Panel 此示例顯示一個Ext.tab.Panel容器
4	Ext.container.Viewport 此示例顯示一個Ext.container.Viewport容器

Ext.js - 佈局

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

序號	佈局和描述
1	絕對此佈局允許使用容器中的XY座標定位專案。
2	手風琴此佈局允許以堆疊方式（一個在另一個之上）將所有專案放置在容器內。
3	錨點此佈局允許使用者相對於容器大小指定每個元素的大小。
4	邊框在此佈局中，各種面板巢狀並由邊框分隔。
5	自動這是預設佈局，它根據元素的數量確定元素的佈局。
6	卡片（TabPanel）此佈局以選項卡形式排列不同的元件。選項卡將顯示在容器的頂部。每次只有一個選項卡可見，並且每個選項卡都被視為一個不同的元件。
7	卡片（嚮導）在此佈局中，每次元素都佔據整個容器空間。嚮導中有一個用於導航的底部工具欄。
8	列此佈局用於在容器中顯示多列。我們可以為列定義固定寬度或百分比寬度。百分比寬度將根據容器的完整大小計算。
9	適應在此佈局中，容器填充單個面板。當沒有與佈局相關的特定要求時，將使用此佈局。
10	表格顧名思義，此佈局以HTML表格格式排列容器中的元件。
11	vBox 此佈局允許元素以垂直方式分佈。這是最常用的佈局之一。
12	hBox 此佈局允許元素以水平方式分佈。

Ext.js - 元件

ExtJS UI由一個或多個稱為元件的小部件組成。Ext Js定義了各種UI元件，可以根據您的需求進行自定義。

序號	方法和描述
1	網格網格元件可用於以表格格式顯示資料。
2	表單表單小部件用於從使用者那裡獲取資料。
3	訊息框訊息框基本上用於以警報框的形式顯示資料。
4	圖表圖表用於以圖片格式表示資料。
5	工具提示工具提示用於在發生任何事件時顯示一些基本資訊。
6	視窗此UI小部件用於建立一個視窗，當發生任何事件時，該視窗應該彈出。
7	HTML編輯器 HTML編輯器是一個非常有用的UI元件，用於對使用者輸入的資料（字型、顏色、大小等）進行樣式設定。
8	進度條顯示後端工作的進度。

Ext.js - 拖放

拖放功能是新增的一項強大功能，可以簡化開發人員的任務。拖動操作本質上是對某些UI元素的單擊手勢，同時按住滑鼠按鈕並移動滑鼠。當在拖動操作後釋放滑鼠按鈕時，會發生放下操作。

語法

將拖放類新增到可拖動目標。

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
   isTarget: false
});

將拖放目標類新增到可拖動目標。

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
   ignoreSelf: false
});

示例

以下是一個簡單的示例。

即時演示

<!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.application ({
            launch: function() {
               var images = Ext.get('images').select('img');
               Ext.each(images.elements, function(el) {
                  var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                     isTarget: false
                  });
               });
            }
         }); 
         var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
            ignoreSelf: false
         });
      </script>
      
      <style>
         #content {
            width:600px;
            height:400px;
            padding:10px;
            border:1px solid #000;
         }
         #images {
            float:left;
            width:40%;
            height:100%;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         #mainRoom {
            float:left;
            width:55%;
            height:100%;
            margin-left:15px;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         .image {   
            width:64px;
            height:64px;
            margin:10px;
            cursor:pointer;
            border:1px solid Black;
            display: inline-block;
         }
      </style>
   </head>
   
   <body>
      <div id = "content">   
         <div id = "images"> 
            <img src = "/extjs/images/1.jpg" class = "image" />
            <img src = "/extjs/images/2.jpg" class = "image" />
            <img src = "/extjs/images/3.jpg" class = "image" />
            <img src = "/extjs/images/4.jpg" class = "image" />
            <img src = "/extjs/images/5.jpg" class = "image" />
            <img src = "/extjs/images/6.jpg" class = "image" />
            <img src = "/extjs/images/7.jpg" class = "image" />
            <img src = "/extjs/images/8.jpg" class = "image" />
         </div>
         <div id = "mainRoom"></div>
      </div>
   </body>
</html>

以上程式將產生以下結果：

藉助Extjs中的拖放功能，我們可以將資料從網格移動到網格，以及從網格移動到表單。以下是網格和表單之間移動資料的示例。

拖放 - 網格到網格

拖放 - 網格到表單

Ext.js - 主題

Ext.js提供許多主題可用於您的應用程式。您可以新增不同的主題來代替經典主題，並檢視輸出的差異。這隻需替換前面解釋的主題CSS檔案即可完成。

海王星主題

考慮您的第一個Hello World應用程式。從應用程式中刪除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

新增以下CSS以使用海王星主題。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

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

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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>

以上程式將產生以下結果：

清晰主題

考慮您的第一個Hello World應用程式。從應用程式中刪除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

新增以下CSS以使用海王星主題。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css

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

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-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>

以上程式將產生以下結果：

Triton主題

考慮您的第一個Hello World應用程式。從應用程式中刪除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

新增以下CSS以使用Triton主題。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css

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

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-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>

以上程式將產生以下結果：

灰色主題

考慮您的第一個Hello World應用程式。從應用程式中刪除以下CSS。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

新增以下CSS以使用灰色主題。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css

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

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-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 JS檔案中編寫事件和自定義事件。

在Ext JS中編寫偵聽器

我們將在之前的程式中新增偵聽器，方法是向面板新增一個listen屬性。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');	
                  }
               }
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

以上程式將產生以下結果：

透過這種方式，我們也可以在偵聽器屬性中編寫多個事件。

同一偵聽器中的多個事件

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });           
      </script> 
   </head>
   
   <body>
      <div id = "tag1">Please click the button to see event listener.</div>
      <div id = "tag2">The button was clicked and now it is hidden.</div>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

稍後附加事件

在之前編寫事件的方法中，我們在建立元素時在偵聽器中編寫了事件。另一種方法是附加事件。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });

            // This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

以上程式將產生以下結果：

自定義事件

我們可以在Ext JS中編寫自定義事件，並使用fireEvent方法觸發事件。以下示例說明了如何編寫自定義事件。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         }); 
      </script> 
   </head>
   
   <body>
      <p> The event will be called after 5 seconds when the page is loaded. </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

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

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

Ext.js - 資料

資料包用於載入和儲存應用程式中的所有資料。

資料包包含許多類，但最重要的類是：

模型
儲存
代理

模型

模型的基礎類是Ext.data.Model。它表示應用程式中的一個實體。它將儲存資料繫結到檢視。它具有後端資料物件到檢視dataIndex的對映。資料是在儲存的幫助下獲取的。

建立模型

要建立模型，我們需要擴充套件Ext.data.Model類，並且需要定義欄位、欄位名稱和對映。

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

這裡，名稱應該與我們在檢視中宣告的dataIndex相同，並且對映應該與資料匹配，無論是來自資料庫的靜態資料還是動態資料，這些資料都將使用儲存來獲取。

儲存

儲存的基礎類是Ext.data.Store。它包含本地快取的資料，這些資料將使用模型物件在檢視上呈現。儲存使用代理獲取資料，代理定義了用於獲取後端資料的服務的路徑。

儲存資料可以透過兩種方式獲取 - 靜態或動態。

靜態儲存

對於靜態儲存，我們將擁有儲存中存在的所有資料，如下面的程式碼所示。

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   data: [
      { name : "Asha", age : "16", marks : "90" },
      { name : "Vinit", age : "18", marks : "95" },
      { name : "Anand", age : "20", marks : "68" },
      { name : "Niharika", age : "21", marks : "86" },
      { name : "Manali", age : "22", marks : "57" }
   ];
});

動態儲存

可以使用代理獲取動態資料。我們可以擁有可以從Ajax、Rest和Json獲取資料的代理。

代理

代理的基礎類是Ext.data.proxy.Proxy。代理由模型和儲存使用來處理模型資料的載入和儲存。

代理有兩種型別

客戶端代理
伺服器代理

客戶端代理

客戶端代理包括使用HTML5本地儲存的記憶體和本地儲存。

伺服器代理

伺服器代理使用Ajax、Json資料和Rest服務處理來自遠端伺服器的資料。

在伺服器中定義代理

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST'  // Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path 
      // which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js - 字型

Ext.js提供了使用不同字型包的功能。字型包用於為包中提供的圖示新增不同的類。

Font-Awesome
Font-Pictos

Font-Awesome

ExtJS的新主題Triton在其自身框架中包含內建字體系列font-awesome，因此我們不需要font-awesome樣式表的任何顯式要求。

以下是使用Triton主題中Font-Awesome類的示例。

Font-Awesome與Triton主題

當我們使用除Triton之外的任何其他主題時，我們需要或需要顯式新增font-awesome的樣式表。

以下是使用Font-Awesome類而不使用Triton主題的示例。

Font-Awesome與普通主題（Triton主題之外的任何主題）

Font-Pictos

font-pictos未包含在ExtJS的框架中，因此我們必須要求它。只有Sencha的許可使用者才能使用font-pictos。

新增Font-Pictos的步驟

步驟1 - 使用以下命令要求font-pictos類。

"requires": ["font-pictos"]

步驟2 - 現在新增pictos類如下：

iconCls: 'pictos pictos-home'

Ext.js - 樣式

應用程式樣式是指使用者對元件外觀的調整。這些調整可能包括：顏色、顏色漸變、字型、邊距/填充等。Ext JS 6有一種新的應用程式樣式方法。

它使用SCSS進行樣式設定。SCSS是編寫CSS程式碼的一種更動態的方式。我們可以藉助它在樣式表中編寫變數。但是，瀏覽器無法理解SCSS。它只能理解CSS，因此所有SCSS檔案都應編譯成CSS以生成可用於生產的程式碼。

因此，SCSS檔案稱為預處理器檔案。在Ext.js中，編譯是透過Sencha CMD工具完成的。Sencha CMD僅使用以下命令手動編譯一次。

sencha app build [development]

Global_CSS是主要的CSS檔案，其中包含與之關聯的所有SCSS變數，這些變數可以在ExtJS中的應用程式中使用，透過根據我們的需要提供不同的值來自定義我們的主題。

以下是Ext.js中Global_CSS中提供的一些CSS變數。

序號	變數和描述
1	$base-color $base-color: color (例如$base-color : #808080) 此基礎顏色將在整個主題中使用。
2	$base-gradient $base-gradient: string (例如$base-gradient : 'matte') 此基礎漸變將在整個主題中使用。
3	$body-background-color $body-background-color: color (例如$body-background-color : #808080) 要應用於body元素的背景顏色。如果設定為transparent或'none'，則不會在body元素上設定background-color樣式。
4	$color $color : color (例如$color : #808080) 此預設文字顏色將在整個主題中使用。
5	$font-family $font-family : string (例如$font-family : arial) 此預設字體系列將在整個主題中使用。
6	$font-size $font-size : number (例如$font-size : 9px ) 此預設字型大小將在整個主題中使用。
7	$font-weight $font-weight : string/number (例如$font-weight : normal ) 此預設字型粗細將在整個主題中使用。
8	$font-weight-bold $font-weight-bold : string/number (例如$font-weight-bold : bold ) 此粗體字型的預設字型粗細將在整個主題中使用。
9	$include-chrome $include-chrome : boolean (例如$include-chrome : true) 如果要包含Chrome特定的規則，則為true。
10	$include-ff $include-ff : boolean (例如$include-ff : true) 如果要包含Firefox特定的規則，則為true。
11	$include-ie $include-ie : boolean (例如$include-ie : true) 如果要包含IE9及以下版本的Internet Explorer特定規則，則為true。
12	$include-opera $include-opera : boolean (例如$include-opera : true) 如果要包含Opera特定的規則，則為true。
13	$include-safari $include-safari : boolean (例如$include-safari : true) 如果要包含Opera特定的規則，則為true。
14	$include-webkit $include-webkit : boolean (例如$include-webkit : true) 如果要包含Webkit特定的規則，則為true。

Ext.js - 繪圖

ExtJS中的繪圖包使您能夠繪製通用圖形。這可以用於適用於所有瀏覽器和移動裝置的圖形。

序號	繪圖
1	圓形此圖形用於建立圓形形狀。
2	矩形此圖形用於建立矩形形狀。
3	弧線此圖形用於建立弧形形狀。
4	橢圓此圖形用於建立橢圓形狀。
5	橢圓弧線此圖形用於建立橢圓弧線形狀。
6	影像此圖形用於嚮應用程式新增影像。
7	路徑此圖形用於建立自由路徑。
8	文字此圖形用於嚮應用程式新增任何文字。
9	渲染後平移此屬性用於在圖形渲染後移動容器中的起點。它可以與任何圖形一起使用。
10	旋轉此屬性用於向新增的繪圖新增旋轉。它可以與任何圖形一起使用。
11	正方形此圖形用於建立正方形。

Ext.js - 本地化

最好始終使用使用者理解和偏好的語言與使用者溝通。Extjs本地化包支援40多種語言，例如德語、法語、韓語、中文等。在ExtJs中實現語言環境非常簡單。您將在ext-locale包的override資料夾中找到所有捆綁的語言環境檔案。語言環境檔案只是覆蓋檔案，它告訴Ext JS 替換某些元件的預設英語值。

以下程式用於顯示不同語言環境中的月份以檢視效果。請嘗試以下程式。

即時演示

<!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" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,
               
               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',
               
               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            }); 
            Ext.getCmp('gridId').getStore().load();
         });
      </script>
   </head>
   
   <body>
      <div id = "grid" />
   </body>
</html>

以上程式將產生以下結果

要使用除英語以外的其他語言環境，我們需要在程式中新增特定於語言環境的檔案。這裡我們使用https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js用於法語。您可以使用不同的語言環境來表示不同的語言，例如https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js用於韓語等。

以下程式用於顯示韓語語言環境下的日期選擇器以檢視效果。請嘗試以下程式。

即時演示

<!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" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "datePicker" />
   </body>
</html>

以上程式將產生以下結果：

下表列出了ExtJS中提供的一些語言環境以及要更改的主要檔案語言環境URL。

語言環境	語言	語言環境URL
ko	韓語	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr	法語	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es	西班牙語	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja	日語	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
it	義大利語	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru	俄語	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN	簡體中文	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js

Ext.js - 可訪問性

通常情況下，可訪問性意味著可用性，內容可訪問意味著內容可用。

在軟體方面，應用程式可訪問意味著應用程式對所有人可用。這裡，所有人指的是殘疾人、視障人士或使用螢幕閱讀器使用計算機的人，或者那些更喜歡使用鍵盤而不是滑鼠進行導航的人。使用鍵盤而不是滑鼠進行導航。

可訪問的應用程式稱為ARIA（Accessible Rich Internet Applications）。

Ext JS中的可訪問性

Ext JS的設計考慮到了這一點，即它應該適用於所有鍵盤導航。它具有內建的選項卡索引和可聚焦性，並且始終預設啟用，因此我們不需要新增任何屬性來啟用此功能。

此功能允許所有啟用鍵盤的元件在切換到時與使用者互動。例如，我們可以使用Tab鍵移動到下一個元件，而不是使用滑鼠。同樣，我們可以使用Shift+Tab鍵向後移動，並使用鍵盤上的Enter鍵單擊等。

焦點樣式和選項卡

在使用擊鍵進行選項卡切換時，Extjs中內建了焦點。

以下示例顯示了焦點隨選項卡更改時樣式如何變化。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-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.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');	
                  }
               }
            });
         });     
      </script>
   </head>
   
   <body> <p>Please click the button to see event listener:</p>
      <span id = "button3"/>
      <span id = "button2"/>
      <span id = "button1"/>
   </body>
</html>

要檢視效果，請使用Tab鍵移動到下一個按鈕，並使用Shift+Tab鍵向後聚焦。使用Enter鍵檢視聚焦按鈕的相關警報如何彈出。

ARIA主題

ExtJS為視障人士提供了aria主題。

以下示例顯示了aria主題，該主題對於視障人士來說很容易訪問。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-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.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);
         
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });

         Ext.onReady(function() {
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            
            // Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
     
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [ 
                  firstGrid
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "panel" > </div>
   </body>
</html>

以上程式將產生以下結果。您可以使用Tab鍵和滑鼠上下鍵在網格中移動焦點，並且主題主要是為視障人士設計的。

Ext.js - 除錯Ext JS程式碼

任何JavaScript程式碼都可以使用alert()框或console.log()或使用偵錯程式中的除錯指標進行除錯。

警報框

在您想要檢查程式碼流或任何變數值的程式碼中放置一個警報框。例如，alert('要顯示的訊息' + 變數);

開發/除錯工具

偵錯程式是任何開發人員在開發過程中檢查程式碼中的問題和錯誤的最重要工具。

Ext JS是一個JavaScript框架，因此可以使用不同瀏覽器提供的或特定於不同瀏覽器的開發人員工具輕鬆除錯它。所有主要的瀏覽器都提供其開發人員工具來測試和除錯JavaScript程式碼。

流行的偵錯程式有IE的IE開發工具、Firefox的firebug和Chrome瀏覽器的Chrome開發工具。

Chrome 偵錯程式隨 Chrome 瀏覽器一起提供，但是 Firebug 需要單獨安裝，因為它不是 Firefox 的內建元件。

以下連結可以用於安裝 Firefox 瀏覽器的 Firebug http://getfirebug.com

在 Windows 作業系統中，開啟開發者工具的快捷鍵是 F12。

在偵錯程式中除錯 JS 程式碼

除錯 JavaScript 程式碼有兩種方法。

第一種方法是在程式碼中放置 **console.log()** 並檢視日誌的值，該值將列印在開發者工具的控制檯中。
第二種方法是在開發者工具中使用斷點。以下是操作流程。
- 開啟指令碼標籤下所有可用的指令碼檔案。
- 現在在您想要除錯的行上設定斷點。
- 在瀏覽器中執行應用程式。
- 現在，每當程式碼執行流程到達這一行時，它將中斷程式碼並停留在那裡，直到使用者使用 F6（轉到程式碼的下一行）、F7（進入函式）或 F8（轉到下一個斷點或如果沒有更多斷點則執行程式碼）等鍵執行程式碼，具體取決於您想要除錯的流程。
- 您可以選擇要檢視其值的變數或函式。
- 您可以使用控制檯檢查值或在瀏覽器本身中檢查某些更改。

Ext.js - 方法

以下是一些在 Ext JS 中被廣泛使用的內建函式。

Ext.is 類

此類檢查您使用的平臺，無論是手機還是桌面，Mac 還是 Windows 作業系統。以下是與 Ext.is 類相關的幾種方法。

序號	方法和描述
1	Ext.is.Platforms 此函式返回此版本可用的平臺。例如，當您執行以下函式時，它將返回類似以下內容： [Object { property = "platform", regex = RegExp, identity = "iPhone"}, Object { property = "platform", regex = RegExp, identity = "iPod"}, Object { property = "userAgent", regex = RegExp, identity = "iPad"}, Object { property = "userAgent", regex = RegExp, identity = "Blackberry"}, Object { property = "userAgent", regex = RegExp, identity = "Android"}, Object { property = "platform", regex = RegExp, identity = "Mac"}, Object { property = "platform", regex = RegExp, identity = "Windows"}, Object { property = "platform", regex = RegExp, identity = "Linux"}]
2	Ext.is.Android 如果使用的是 Android 作業系統，則此函式將返回 true，否則返回 false。
3	Ext.is.Desktop 如果使用的是桌面應用程式，則此函式將返回 true，否則返回 false。
4	Ext.is.Phone 如果使用的是移動裝置，則此函式將返回 true，否則返回 false。
5	Ext.is.iPhone 如果使用的是 iPhone，則此函式將返回 true，否則返回 false。
6	Ext.is.iPod 如果使用的是 iPod，則此函式將返回 true，否則返回 false。
7	Ext.is.iPad 如果使用的是 iPad，則此函式將返回 true，否則返回 false。
8	Ext.is.Windows 如果使用的是 Windows 作業系統，則此函式將返回 true，否則返回 false。
9	Ext.is.Linux 如果使用的是 Linux 作業系統，則此函式將返回 true，否則返回 false。
10	Ext.is.Blackberry 如果使用的是 Blackberry，則此函式將返回 true，否則返回 false。
11	Ext.is.Mac 如果使用的是 Mac 作業系統，則此函式將返回 true，否則返回 false。

Ext.supports 類

顧名思義，此類提供有關瀏覽器/裝置的當前環境是否支援該功能的資訊。

序號	方法和描述
1	Ext.supports.History 它檢查裝置是否支援 HTML 5 歷史記錄（作為 window.history）。如果裝置支援歷史記錄，則返回 true，否則返回 false。
2	Ext.supports.GeoLocation 它檢查裝置是否支援地理位置方法。在內部，它檢查 navigator.geolocation 方法。
3	Ext.supports.Svg 它檢查裝置是否支援 HTML 5 功能可縮放向量圖形 (svg) 方法。在內部，它檢查 doc.createElementNS && !!doc.createElementNS("http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect。
4	Ext.supports.Canvas 它檢查裝置是否支援 HTML 5 功能 canvas 繪製方法。在內部，它檢查 doc.createElement('canvas').getContext 並根據此方法的輸出返回值。
5	Ext.supports.Range 它檢查瀏覽器是否支援 document.createRange 方法。

Ext.String 類

Ext.String 類具有各種處理字串資料的方法。最常用的方法是編碼解碼、修剪、切換、urlAppend 等。

**編碼解碼函式** - 這些是 Ext.String 類中用於編碼和解碼 HTML 值的函式。


Ext.String.htmlEncode("< p > Hello World < /p >"); 
Output - "&lt; p &gt; Hello World &lt; /p &gt;".
Ext.String.htmlDecode("&lt; p &gt; Hello World &lt; /p &gt;");
Output -  "< p > Hello World < /p >"
Ext.String.trim('      hello      ');
Output – "hello"
Ext.String.urlAppend('https://www.google.com' , 'hello'); 
Output - "https://www.google.com?hello" 
Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); 
Output – "https://www.google.com?index=1&hello" 
var toggleString = 'ASC' 
toggleString = Ext.String.toggle(a, 'ASC', 'DESC');
Output – DESC as toggleString had value ASC. Now again, if we 
print the same we will get toggleString = “ASC” this time, as 
it had value 'DESC'. 
It is similar to ternary operator 
toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

序號	方法和描述
1	Ext.String.htmlEncode 此函式用於編碼 html 值以使其可解析。示例 - Ext.String.htmlEncode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >".
2	Ext.String.htmlDecode 此函式用於解碼編碼的 html 值。示例 - Ext.String.htmlDecode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >"
3	Ext.String.trim 此函式用於修剪字串中不需要的空格。 Ext.String.trim(' hello '); Output – "hello"
4	Ext.String.urlAppend 此方法用於在 URL 字串中追加值。示例 - Ext.String.urlAppend('https://www.google.com' , 'hello'); Output - "https://www.google.com?hello" Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); Output – "https://www.google.com?index=1&hello"
5	Ext.String.toggle 此函式用於在兩個不同的值之間切換。示例 - var toggleString = 'ASC' toggleString = Ext.String.toggle(a, 'ASC', 'DESC'); Output – DESC as toggleString had value ASC. Now again, if we print the same we will get toggleString = “ASC” this time, as it had value 'DESC'. It is similar to ternary operator toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

其他方法

序號

方法和描述

Ext.userAgent()

此函式提供有關瀏覽器 userAgent 的資訊。UserAgent 用於向 Web 伺服器識別瀏覽器和作業系統。

**示例** - 如果您在 Mozilla 中工作，它將返回類似以下內容：“mozilla/5.0 (windows nt 6.1; wow64; rv:43.0) gecko/20100101 firefox/43.0”

版本相關函式

如果呼叫與 IE 相關的函式，則此函式將返回當前使用的瀏覽器版本。在 Firefox 瀏覽器中，它返回 0。這些函式是 Ext.firefoxVersion、Ext.ieVersion 等。

**示例** - 如果您使用的是 Firefox 瀏覽器並呼叫 Ext.ieVersion 方法來獲取 IE 的版本，則它將返回 0。如果您在 IE 瀏覽器中使用相同的方法，則它將返回您使用的版本，例如 8、9 等。

Ext.getVersion()

此函式返回當前使用的 Ext JS 版本。

**示例** - 如果您呼叫 Ext.getVersion()，它將返回一個包含版本、短版本等值的陣列。

Ext.getVersion().version 返回程式中使用的當前 Ext JS 版本，例如“4.2.2”。

這些函式根據使用的瀏覽器返回布林值。這些方法是 Ext.isIE、Ext.isIE6、Ext.isFF06 和 Ext.isChrome。

瀏覽器相關函式

**示例** - 如果您使用的是 Chrome 瀏覽器，則函式 Ext.isChrome 將始終返回 true，否則將返回 false。

Ext.typeOf()

此函式返回變數的資料型別。

**示例** -

var a = 5;   
var b  = 'hello'; 
Ext.typeOf(a); 
Output – Number 
Ext.typeOf(b);
Output - String

**資料型別相關方法** - 這些函式根據變數的資料型別返回布林值

**示例** -

var a = ['a', 'bc'];
var b = 'hello';
var c = 123;
var emptyVariable;
var definedVariable;
function extraFunction(){return true;}

Ext.isArray(a);	//返回 true
Ext.isString(b);	//返回 true
Ext.isNumber(c);	//返回 true
Ext.isEmpty(emptyVariable);	//返回 true
Ext.isEmpty(b);	//返回 false
Ext.isDefined(definedVariable);	//返回 true
Ext.isfunction(extraFunction);	//返回 true

列印頁面

序號	佈局和描述
1	絕對此佈局允許使用容器中的XY座標定位專案。
2	手風琴此佈局允許以堆疊方式（一個在另一個之上）將所有專案放置在容器內。
3	錨點此佈局允許使用者相對於容器大小指定每個元素的大小。
4	邊框在此佈局中，各種面板巢狀並由邊框分隔。
5	自動這是預設佈局，它根據元素的數量確定元素的佈局。
6	卡片（TabPanel）此佈局以選項卡形式排列不同的元件。選項卡將顯示在容器的頂部。每次只有一個選項卡可見，並且每個選項卡都被視為一個不同的元件。
7	卡片（嚮導）在此佈局中，每次元素都佔據整個容器空間。嚮導中有一個用於導航的底部工具欄。
8	列此佈局用於在容器中顯示多列。我們可以為列定義固定寬度或百分比寬度。百分比寬度將根據容器的完整大小計算。
9	適應在此佈局中，容器填充單個面板。當沒有與佈局相關的特定要求時，將使用此佈局。
10	表格顧名思義，此佈局以HTML表格格式排列容器中的元件。
11	vBox 此佈局允許元素以垂直方式分佈。這是最常用的佈局之一。
12	hBox 此佈局允許元素以水平方式分佈。

序號	方法和描述
1	網格網格元件可用於以表格格式顯示資料。
2	表單表單小部件用於從使用者那裡獲取資料。
3	訊息框訊息框基本上用於以警報框的形式顯示資料。
4	圖表圖表用於以圖片格式表示資料。
5	工具提示工具提示用於在發生任何事件時顯示一些基本資訊。
6	視窗此UI小部件用於建立一個視窗，當發生任何事件時，該視窗應該彈出。
7	HTML編輯器 HTML編輯器是一個非常有用的UI元件，用於對使用者輸入的資料（字型、顏色、大小等）進行樣式設定。
8	進度條顯示後端工作的進度。

序號	繪圖
1	圓形此圖形用於建立圓形形狀。
2	矩形此圖形用於建立矩形形狀。
3	弧線此圖形用於建立弧形形狀。
4	橢圓此圖形用於建立橢圓形狀。
5	橢圓弧線此圖形用於建立橢圓弧線形狀。
6	影像此圖形用於嚮應用程式新增影像。
7	路徑此圖形用於建立自由路徑。
8	文字此圖形用於嚮應用程式新增任何文字。
9	渲染後平移此屬性用於在圖形渲染後移動容器中的起點。它可以與任何圖形一起使用。
10	旋轉此屬性用於向新增的繪圖新增旋轉。它可以與任何圖形一起使用。
11	正方形此圖形用於建立正方形。

序號	方法和描述
1	Ext.String.htmlEncode 此函式用於編碼 html 值以使其可解析。示例 - Ext.String.htmlEncode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >".
2	Ext.String.htmlDecode 此函式用於解碼編碼的 html 值。示例 - Ext.String.htmlDecode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >"
3	Ext.String.trim 此函式用於修剪字串中不需要的空格。 Ext.String.trim(' hello '); Output – "hello"
4	Ext.String.urlAppend 此方法用於在 URL 字串中追加值。示例 - Ext.String.urlAppend('https://www.google.com' , 'hello'); Output - "https://www.google.com?hello" Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); Output – "https://www.google.com?index=1&hello"
5	Ext.String.toggle 此函式用於在兩個不同的值之間切換。示例 - var toggleString = 'ASC' toggleString = Ext.String.toggle(a, 'ASC', 'DESC'); Output – DESC as toggleString had value ASC. Now again, if we print the same we will get toggleString = “ASC” this time, as it had value 'DESC'. It is similar to ternary operator toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );