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' );