Ext JS 教程

什么是 Ext JS

Ext JS 是一个基于 JavaScript 的强大应用程序开发平台。它通过使用 JavaScript 帮助您创建数据密集型 HTML 5 应用程序。Ext JS 框架允许我们借助 JavaScript 创建具有用户体验的企业应用程序，而无需编写 CSS 或 HTML 5 代码。它提供了一组丰富的 UI（用户界面），用于创建具有跨浏览器功能的 Web 应用程序。

Ext JS 广泛用于创建桌面应用程序。它兼容所有现代浏览器，例如 Firefox、Chrome、Safari 6+ 和 Opera 12+。 Ext JS 包含内置主题和 UI 组件，可减少开发时间并提高生产力。

Ext JS 是 Sencha Touch JavaScript 库 的产品。它提供以下产品

• Sencha Touch： 这是一个高性能的 HTML5 框架，用于开发移动应用程序。
• Sencha GXT： 它是借助 Java 开发富 Web 应用程序最稳健的方法。
• Ext JS： 这是一个用于使用 HTML5 和 JavaScript 开发 Web 应用程序的框架。

Ext JS 的功能

1. Ext JS 是一个用于创建企业应用程序的客户端 JavaScript 框架。
2. 您可以借助 Ext JS 开发单页应用程序。
3. Ext JS 支持 JavaScript 的面向对象编程概念（OOP）。它使应用程序的开发和维护更容易。
4. Ext JS 基于 MVC (Model View Controller) 和 MVVM (Model View ViewModel)。
5. Ext JS 支持 OOB（开箱即用） 组件、布局和容器。
6. 它还具有数据包概念，可以轻松访问或保存数据。
7. Ext JS 支持包的本地化，这有助于您本地化应用程序。
8. Ext JS 为组件和 UI 容器提供拖放功能。
9. 它还包括 OOB（开箱即用） 主题，例如 Triton、Neptune、Grey、Crisp 和 Classic。
10. Ext JS 借助 Compass 和 SASS（Syntactically Awesome Style Sheet） 包含自定义主题。
11. Ext JS 具有新版本与旧版本的代码兼容性功能。
12. Ext JS 包含一个灵活的布局管理器，允许我们在多个浏览器、屏幕尺寸和设备上组织数据和内容的显示。

Ext JS 版本

Ext JS 的历史

Ext JS 的历史如下表所示

Ext JS 工具

下面列出了一些由 Sencha 提供的工具。这些工具用于 Ext JS 中的应用程序开发。

Sencha IDE 插件

Sencha IDE 插件 将 Sencha 框架集成到 WebStorm IDEs、IntelliJ 中，这有助于开发人员提高生产力。它提供诸如 代码检查、代码完成、代码生成、代码集成、拼写检查、模板创建、代码重构等 功能。

Sencha Cmd

这是一个工具，为开发人员提供一些功能，例如 代码压缩、脚手架 和 生产构建生成。

Sencha Inspector

它是一个调试工具，帮助我们在开发时调试代码。

Ext JS 与 Angular JS

如何设置 Ext JS 环境

要使用 Ext JS，您需要设置开发环境。Ext JS 应用程序开发需要三个基本要素，例如 Sencha SDK、IDE（集成开发环境）和 Web 服务器。在本节中，我们将指导您如何下载和设置机器上的 Ext JS 环境。

库文件下载

在这里，我们将下载 Ext JS 库文件的试用版。您需要按照以下步骤下载 Ext JS 的库文件。

第 1 步： 您将使用您注册的邮箱 ID 下载 Ext JS 的试用版。您也可以使用以下链接 https://www.sencha.com/products/download，您将获得以下代码片段

第 2 步： 现在，您将点击上面截图中所示的 免费试用 按钮。点击按钮后，您将获得以下屏幕

第 3 步： 填写所需详细信息后，您需要点击 立即下载，您的库文件将开始下载，如下所示

第 4 步： 下载的文件夹是一个 zip 文件夹。您需要解压该文件夹，您将获得各种 CSS 和 JavaScript 文件。

第 5 步： 解压缩文件夹后，您需要点击 .exe 文件，安装过程将开始，如下面的代码片段所示

第 6 步： 您需要点击 下一步 按钮，您将获得以下截图

第 7 步： 现在，选择“我接受协议 ”，然后点击 下一步 按钮，您将获得以下代码片段

第 8 步： 现在，您需要选择安装 Ext JS 库文件的路径。默认情况下，它将安装在 C 盘。您也可以通过点击 浏览 按钮更改位置，然后点击 下一步 按钮。

第 9 步： 如上面截图所示，您需要选择要安装的组件。选择组件后，点击 下一步 按钮，您将获得以下屏幕

第 10 步： 安装完成后，点击 完成 以完成该过程。

库文件包含以下 JavaScript 和 CSS 文件。这些文件如下所示

JavaScript 文件

在解压缩的文件夹中，您将获得以下文件，您需要将其包含在应用程序中。

CSS 文件

在解压后的文件夹中，您将获得以下基于主题的文件，您需要将其包含在应用程序中。您可以在 **\ext7.2.0.84-windows\ext-7.2.0.84\build\classic\theme-classic\resources\theme-classic-all.css** 文件夹下找到这些文件。

• 如果您想使用移动应用程序，则需要使用现代主题，您可以在 \ext-7.2.0.84 \ext-7.2.0.84\build\modern 文件夹下找到它。
• 如果您想使用桌面应用程序，则需要使用经典主题，您可以在 \ext-7.2.0.84 \ext-7.2.0.84\build\classic 文件夹下找到它。

您可以在 Ext JS 应用程序中添加以下 CSS 文件。您还可以将 Ext Js 应用程序的代码放入名为 app.js 的文件中。

CDN（内容分发网络）设置

内容分发网络可以定义为 由地理分布的服务器集合组成，用于通过互联网快速分发内容。CDN 提供了传输加载内容所需的基本资产的便利，例如 JavaScript 文件、HTML 文件、图像、样式表等。

您还可以在程序中提供 内容分发网络 的直接链接，以便在不下载 Ext JS 库文件的情况下使用 Ext JS，如下面给出的代码所示

文本编辑器设置

文本编辑器用于编写和执行各种语言的源代码，例如 HTML、JavaScript、CSS Python、Ruby、PHP 等。 Ext JS 是一个 JavaScript 框架，您也可以在其中使用 HTML 文件。因此，您可以根据自己的选择和要求使用各种文本编辑器。下面列出了一些文本编辑器

Visual Studio Code

它是由 Microsoft 推出的一款源代码编辑器，适用于 Windows、Mac 和 Linux 操作系统。您可以通过点击以下链接轻松下载

https://vscode.js.cn/

Eclipse

Eclipse 是一个用于开发应用程序的开源集成开发环境。它包括可扩展的插件和一个基本工作区系统，这有助于我们自定义开发环境。您可以通过点击下面给出的链接下载它

https://www.eclipse.org/

记事本

它是一个用于 Microsoft Windows 的基本文本编辑程序。它帮助用户创建文档。您还可以使用类似的文本编辑器，如 Sublime、Notepad++。

Ext Js 浏览器设置

它可以指代 一个用于访问 WWW（万维网）上信息的软件应用程序。 浏览器用于根据用户的要求在屏幕上显示必要的内容。

Ext JS 提供跨浏览器兼容性。它可以在不同的浏览器之间执行功能。

您可以在所有主流浏览器上执行 Ext JS 的程序代码。下面我们列出了一些支持 Ext JS 应用程序的浏览器

• Google Chrome 10 及以上版本
• Microsoft Edge 12
• IE (Internet Explorer) 6 及以上版本
• Firefox 3.6 及以上版本
• Safari 4 及以上版本
• Opera 11 及以上版本

Ext JS 的架构

Ext JS 支持 版本 4 的 MVC（模型-视图-控制器） 和 版本 5 的 MVVM（模型-视图-视图模型） 架构。此架构对于程序代码是可选的，但它有助于使我们的代码易于建立和维护。

Ext JS 应用程序的项目结构

Ext JS 应用程序文件夹包含 JavaScript 文件夹。Ext Js 应用程序包含 模型、存储、实用程序、视图、控制器文件 以及 app.js 文件。在这里，我们将详细讨论每个文件。

Model.js

它包含将后端数据对象映射到视图的 dataIndex。它还包含执行存储数据绑定到视图的对象。在 model.js 中，您还可以借助存储获取数据。

App.js

它是负责启动程序流程的主文件。它还应包含带有 <script> 标签的 HTML 文件。App.js 调用应用程序控制器以执行其余功能。

View.js

View.js 负责应用程序的界面，该界面显示给用户。它还包含丰富的 UI（用户界面） 视图。这些视图可以由用户根据自己的需求进行自定义和扩展。

Controller.js

此文件控制 Ext JS MVC 架构。它还包含应用程序的整体控制，包括事件监听器和代码。controller.js 包含确定所有其他应用程序文件（如 require、model、mixins、view 和 store）的路径。

Store.js

它存储缓存数据，这些数据将通过模型对象提供给视图。Store.js 文件借助代理获取数据。代理包含用于获取后端数据服务的路径。

Utils.js

它有助于使我们的代码清晰、整洁、易于理解和可读。MVC（模型-视图-控制器） 不支持 utils.js。您可以在 Utils.js 文件中创建方法，并在控制器或视图中调用它们。它还允许代码重用。

在 MVVM（Model View ViewModel）架构中， 您将使用 ViewModel 而不是控制器。

ViewModel

ViewModel 就像模型和视图变化之间的调解器。ViewModel 将模型包装到视图中。ViewModel 与视图没有直接交互。

Ext JS 的组件

组件可以定义为 许多小部件，它们有助于创建应用程序。 Ext JS 也由许多被称为 组件 的小部件组成。组件指的是包含复杂功能的 DOM 元素。所有组件都继承自 Ext. Component 类。

Ext JS 应用程序包含各种类型的元素，例如 Combobox、grid、panel、container、textfield、numberfield 等。

Ext JS UI（用户界面）组件是从 Ext. Components 类中提取的。Ext.Component 类也从 Ext.Base 类中提取。

下面表格中列出了 Ext JS 的一些组件。

Ext JS 中的类系统

类可以定义为一种可扩展的程序代码模板，它有助于创建对象，为成员变量提供初始值，并实现方法和成员函数的行为.

在 Ext JS 中，Ext 用作命名空间，用于封装 Ext JS 中的类。Ext JS 框架包含自己的类系统。Ext 允许我们使用 300 多个类，可用于多种功能。一个 Ext 类包含大约 59 个属性和 78 个方法。一些基本方法是 Ext.apply、Ext.create、Ext.define、Ext.getCmp、Ext.override 和 Ext.application 等。

在 Ext JS 中定义一个类

如果您想在 Ext JS 中定义一个类，则必须使用 Ext.define()。

语法

在这里，我们讨论了语法的所有值。

类名： 它是用户根据应用程序结构给定的类名。

类成员/属性： 类成员/属性用于确定类行为。

回调函数： 这是一个在类加载时调用的函数。它是一个可选函数。

示例

创建对象

在 Ext JS 中创建对象很容易，就像在其他面向对象编程语言（OOP）中一样。您可以通过以下两种方式在 Ext JS 中创建对象

使用 Ext.create() 创建对象

使用 new 关键字创建对象

Ext JS 继承

在面向对象编程中，术语继承可以定义为 子类导入超类属性的技术。

在 Ext JS 中，您可以通过以下两种方式使用继承

借助 Ext.extend 方法进行继承

借助 Mixins 进行继承

mixins 关键字帮助我们将类 A 的属性导入类 B。通常，mixins 包含在控制器中，控制器包含各种类的声明，例如 store、view 等。

您还可以调用 DepartmentUtils 类并在应用程序中使用它。

Ext JS 程序的示例

在这里，我们将讨论 Ext JS 的程序代码。在下面编写的程序代码中，首先，我们需要创建一个名为 Sample.html 的简单 HTML 文件，并在 <head> 标签 中提供库文件。

Sample.html

程序说明

在上面的程序代码中，我们有以下内容

Ext.onReady() 方法： 当 Ext Js 元素准备好渲染时，会调用此方法。

Ext.create() 方法： 它用于构建对象。在上面的代码中，我们创建了 Ext.Panel 对象。

Ext.Panel： 它是 Ext JS 中使用的内置类。它还包含以下用于不同功能的不同属性。

Render To： 它负责交付面板。在上面的代码中，div id 是 'helloWorldPanel'。

Title： 此属性为面板提供 标题。

Height & Weight： 这些属性用于设置面板的大小。

Html： 此属性帮助我们在面板中显示 Html 内容。

输出

为了成功执行上述程序代码，您可以在任何标准浏览器中打开 Sample.html 文件，您将获得以下输出

Ext JS 中的方法

下面列出了一些在 Ext JS 中最常用的方法。这些方法是预定义的方法，用于执行不同的功能。各种方法存储在不同的类中。

Ext.String 类

此类包含各种方法，可帮助我们处理字符串数据。 下面以表格形式列出了常用方法

Ext.String.htmlDecode("< p > Hello Ext JS < /p >");

Ext.String.trim('   Ext JS   ');

Ext.String.urlAppend('https://www.google.com' , 'hello Ext JS');

Ext.String.urlAppend('https://www.google.com?index=1' , 'hello Ext JS');

var toggleString = 'ASCENDING'
toggleString = Ext.String.toggle(p, 'ASCENDING', 'DESCENDING');

toggleString = ((toggleString =='ASCENDING')? 'DESCENDING' : 'ASCENDING' );

Ext.is 类

此类用于 确定您正在使用的平台和操作系统。 它应该是移动设备或桌面设备，以及 Windows 或 Mac OS。Ext.is 类包含以下方法

[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"}

Ext.supports 类

Ext.supports 类用于提供功能是否适用于设备/浏览器的信息。Ext.supports 类包含以下方法

doc.createElementNS && !!doc.createElementNS( "http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect.

doc.createElement('canvas').getContext

杂项方法

在这里，我们还有一些在 Ext JS 中使用的方法。这些方法如下表所示

Var p = 10;
Var q = 'hello';
Ext.typeOf(p);

Var x = ['x', 'yz'];
Var y = 'Hello';
Var z = '456';
Var nullvariable;
Var deifnedvariable;
Function extraFunction() {return true;}

Ext JS 的优点

Ext JS 有以下一些优点

• 它遵循 MVC（模型-视图-控制器）架构，这有助于使代码更具可读性。
• 它提供了一系列小部件，有助于我们创建强大的 UI（用户界面）。
• 它有助于我们降低开发成本。
• 它简化了跨平台开发。
• 它通过将开发与 IDE 插件集成来提高开发效率。

Ext JS 的局限性

• 库文件会减慢应用程序并增加加载时间，因为它有 500 KB 的巨大大小。
• Ext Js 需要经验丰富的开发人员来开发应用程序。
• HTML 语言的使用使此应用程序变得复杂且难以调试。
• Ext JS 对开源应用程序免费，但对商业用途收费。
• 有时简单的东西需要代码，但在 JQuery 或纯 HTML 中更容易。