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 检查器

Sencha Inspector 是一个调试工具，可帮助调试器在开发过程中调试任何问题。

Ext.js - 环境设置

本地环境设置

本部分将指导您如何在您的机器上下载和设置 Ext JS。请按照步骤设置环境。

下载库文件

从 Sencha https://www.sencha.com 下载试用版 Ext JS 库文件。您将从您注册的邮件 ID 上的站点获取试用版，该试用版是一个名为 ext-6.0.1-trial 的压缩文件夹。

解压文件夹，您将找到各种 JavaScript 和 CSS 文件，您将将它们包含在我们的应用程序中。我们将主要包含以下文件 −

JavaScript 文件 − 您可以在文件夹 \ext-6.0.1-trial\ext6.0.1\build 下找到的 JS 文件是 −

Sr.No	文件和说明
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 heme-classic esources heme-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	heme-classic
esources	heme-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>

常用编辑器

由于它是一个用于开发 Web 应用程序的 JavaScript 框架，因此在我们的项目中我们将拥有 HTML、JS 文件。要编写我们的 Ext JS 程序，我们需要一个文本编辑器。市场上甚至有多个 IDE 可供选择。但目前，我们可以考虑以下之一 −

记事本 − 在 Windows 机器上，您可以使用任何简单的文本编辑器，例如记事本(本教程推荐使用)、Notepad++、sublime。
Eclipse −它是由 eclipse 开源社区开发的 IDE，可以从 https://www.eclipse.org/ 下载。

浏览器

Ext JS 支持跨浏览器兼容性，它支持所有主流浏览器，例如 −

IE 6 及以上
Firefox 3.6 及以上
Chrome10 及以上
Safari 4 及以上
Opera 11 及以上

您可以使用任何浏览器运行 Ext JS 应用程序。

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 app 文件夹将驻留在项目的 JavaScript 文件夹中。

App 将包含控制器、视图、模型、存储和带有 app.js 的实用程序文件。

app.js − 程序流程将从其开始的主文件，应使用 <script> 标签将其包含在主 HTML 文件中。App 调用应用程序的控制器来实现其余功能。

Controller.js − 它是 Ext JS MVC 架构的控制器文件。它包含应用程序的所有控件、事件侦听器以及代码的大部分功能。它为该应用程序中使用的所有其他文件(如存储、视图、模型、require、mixins)定义了路径。

View.js − 它包含应用程序的界面部分，显示给用户。 Ext JS 使用各种丰富的 UI 视图，可以根据需求在此处进行扩展和自定义。

Store.js − 它包含本地缓存的数据，这些数据将在模型对象的帮助下呈现在视图上。Store 使用代理获取数据，代理定义了服务获取后端数据的路径。

Model.js − 它包含将 store 数据绑定到视图的对象。它具有后端数据对象到视图 dataIndex 的映射。数据是在 store 的帮助下获取的。

Utils.js − 它不包含在 MVC 架构中，但是一种最佳实践，可以使代码更简洁、更简单、更易读。我们可以在这个文件中编写方法，并在需要时在控制器或视图渲染器中调用它们。这对于代码可重用性也很有用。

在 MVVM 架构中，控制器被 ViewModel 取代。

ViewModel − 它基本上调解视图和模型之间的变化。它将数据从模型绑定到视图。同时，它与视图没有任何直接交互。它只了解模型。

工作原理

例如，如果我们在 UI 中的两三个地方使用一个模型对象。如果我们在 UI 的一个地方更改值，我们甚至不需要保存该更改就可以看到。模型的值会发生变化，因此会反映在 UI 的所有位置，无论模型在哪里使用。

它使开发人员的工作量大大减少，并且更容易，因为不需要额外的编码来绑定数据。

Ext.js - 第一个程序

本章列出了在 Ext JS 中编写第一个 Hello World 程序的步骤。

步骤 1

在我们选择的编辑器中创建一个 index.htm 页面。在 html 页面的 head 部分包含所需的库文件，如下所示。

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 JS 准备好呈现 Ext JS 元素，就会调用 Ext.onReady() 方法。
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(类名, 类成员/属性, 回调函数);

类名是根据应用程序结构命名的类的名称。例如，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 的基本功能。

使用 Mixins

Mixins 是在类 B 中使用类 A 而不进行扩展的另一种方式。

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

Mixins 添加到控制器中，我们在控制器中声明所有其他类，例如 store、view 等。这样，我们可以调用 DepartmentUtils 类并在控制器或此应用程序中使用它的功能。

Ext.js - 容器

Ext JS 中的容器是我们可以添加其他容器或子组件的组件。这些容器可以有多个布局来排列容器中的组件。我们可以从容器及其子元素中添加或删除组件。Ext.container.Container 是 Ext JS 中所有容器的基类。

Sr.No	描述
1	容器内的组件此示例显示如何定义容器内的组件
2	容器内的容器此示例显示如何定义容器内包含其他组件的容器

Ext JS 中有各种类型的容器，其中 Ext.panel.Panel、Ext.form.Panel、Ext.tab.Panel 和 Ext.container.Viewport 是常用的容器。下面是展示如何使用这些容器的示例。

Sr.No.	容器类型 &描述
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 在其库中定义了不同的布局，但我们也可以编写自定义布局。

Sr.No	布局 &描述
1	Absolute 此布局允许使用容器中的 XY 坐标定位项目。
2	Accordion 此布局允许将所有项目以堆叠方式(一个在另一个之上)放置在容器内。
3	Anchor 此布局允许用户指定每个元素相对于容器的大小大小。
4	Border 在此布局中，各个面板嵌套并由边框分隔。
5	Auto 这是默认布局，根据元素数量决定元素的布局。
6	Card(TabPanel) 此布局以选项卡方式排列不同的组件。选项卡将显示在容器顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件。
7	Card(Wizard) 在此布局中，每次元素都会占据整个容器空间。向导中有一个底部工具栏用于导航。
8	Column 此布局用于在容器中显示多个列。我们可以为列定义固定或百分比宽度。百分比宽度将根据容器的完整尺寸进行计算。
9	Fit 在此布局中，容器填充了单个面板。当没有与布局相关的特定要求时，则使用此布局。
10	Table 顾名思义，此布局以 HTML 表格格式将组件排列在容器中。
11	vBox 此布局允许元素以垂直方式分布。这是最常用的布局之一。
12	hBox 此布局允许元素以水平方式分布。

Ext.js - 组件

ExtJS UI 由一个或多个称为组件的小部件组成。Ext Js 定义了各种 UI 组件，可以根据您的要求进行定制。

Sr.No	方法和说明
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 文件即可完成此操作。

Neptune 主题

考虑您的第一个 Hello World 应用程序。从应用程序中删除以下 CSS。

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

添加以下 CSS 以使用 Neptune 主题。

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>

上述程序将产生以下结果 −

Crisp 主题

考虑您的第一个 Hello World 应用程序。从应用程序中删除以下 CSS。

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

添加以下 CSS 以使用 Neptune 主题。

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 中编写侦听器

我们将通过向面板添加侦听属性，在上一个程序本身中添加侦听器。

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

上述程序将产生以下结果 −

这样我们也可以在 listeners 属性中写入多个事件。

同一个监听器中的多个事件

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

            // 这样我们就可以在按钮创建后将事件附加到按钮上。
            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 - Data

Data 包用于加载和保存应用程序中的所有数据。

Data 包有许多类，但最重要的类是 −

Model
Store
Proxy

Model

模型的基类是 Ext.data.Model。它代表应用程序中的一个实体。它将存储数据绑定到视图。它将后端数据对象映射到视图数据索引。数据是在存储的帮助下获取的。

创建模型

要创建模型，我们需要扩展 Ext.data.Model 类，并定义字段、字段名称和映射。

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

此处，名称应与我们在视图中声明的 dataIndex 相同，映射应与数据库中的静态或动态数据匹配，这些数据将使用 store 获取。

Store

store 的基类是 Ext.data.Store。它包含本地缓存的数据，这些数据将借助模型对象呈现在视图上。Store 使用代理获取数据，代理已定义服务获取后端数据的路径。

Store 数据可以通过两种方式获取 - 静态或动态。

静态 store

对于静态 store，我们将在 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', // 这里我们必须包含其余的 URL 路径
      // 从存储数据的数据库或 Json 文件路径中获取数据
      reader: {
         type : 'json',  // 获取的数据类型为 JSON 类型
         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 的样式表。

以下是不使用 Triton 主题时使用 Font-Awesome 类的示例。

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 文件，它包含 ExtJS 中与其关联的所有 SCSS 变量，这些变量可用于我们的应用程序，通过根据需要提供不同的值来定制我们的主题。

以下是 Ext.js 中 Global_CSS 中可用的部分 CSS 变量。

Sr.No	变量 &描述
1	$base-color $base-color:颜色(例如 $base-color : #808080) 此基本颜色将在整个主题中使用。
2	$base-gradient $base-gradient:字符串(例如 $base-gradient : 'matte') 此基本渐变将在整个主题中使用。
3	$body-background-color $body-background-color:颜色(例如 $body-background-color : #808080) 应用于 body 元素的背景颜色。如果设置为透明或"无"，则不会在 body 元素上设置任何背景颜色样式。
4	$color $color : color (例如 $color : #808080) 此默认文本颜色将在整个主题中使用。
5	$font-family $font-family : string (例如 $font-family : arial) 此默认字体系列将在整个主题中使用。
6	$font-size $font-size : 数字(例如 $font-size : 9px ) 此默认字体大小将在整个主题中使用。
7	$font-weight $font-weight : 字符串/数字(例如 $font-weight : normal ) 此默认字体粗细将在整个主题中使用。
8	$font-weight-bold $font-weight-bold : 字符串/数字(例如 $font-weight-bold : bold ) 此粗体字体的默认字体粗细将在整个主题中使用。
9	$include-chrome $include-chrome : 布尔值(例如 $include-chrome : true) True 表示包含 Chrome 特定规则。
10	$include-ff $include-ff : 布尔值(例如 $include-ff : true) True 表示包含 Firefox 特定规则。
11	$include-ie $include-ie : 布尔值(例如 $include-ie : true) True 表示包含 IE9 和 Internet Explorer 特定规则较低。
12	$include-opera $include-opera : 布尔值(例如 $include-opera : true) True 表示包含 Opera 特定规则。
13	$include-safari $include-safari : 布尔值(例如 $include-safari : true) True 表示包含 Opera 特定规则。
14	$include-webkit $include-webkit : 布尔值(例如 $include-webkit : true) 如果为 True，则包含 Webkit 特定规则。

Ext.js - 绘图

ExtJS 中的绘图包使您能够绘制通用图形。这可用于适用于所有浏览器和移动设备的图形。

Sr.No	绘图
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(可访问的富互联网应用程序)。

Ext JS 中的可访问性

Ext JS 的设计考虑到了这一点，它应该适用于所有键盘导航。它具有内置的选项卡索引和焦点功能，并且默认情况下始终处于启用状态，因此我们无需添加任何属性即可启用此功能。

此功能允许所有启用键盘的组件在进入时与用户交互。例如，我们可以使用选项卡而不是鼠标移动到下一个组件。同样，我们可以使用 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.*'
         ]);
         
         // 创建数据模型
         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" }
            ];
            
            // 创建第一个网格存储
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            
            // 创建第一个网格
            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'
            });
     
            // 创建一个面板来显示两个网格。
            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 代码

可以使用 alert() 框或 console.log() 或使用调试器中的调试指针来调试任何 JavaScript 代码。

警报框

在代码中放置一个警报框，以便检查流程或任何变量值。例如，alert('message to show' + variable);

开发/调试工具

调试器是任何开发人员在开发过程中检查代码中的问题和错误的最重要工具。

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 类相关的方法。

Sr.No	方法和说明
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 类

顾名思义，此类提供该功能是否受支持的信息是否由浏览器/设备的当前环境决定。

Sr.No	方法和说明
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 功能画布绘制方法。它在内部检查 doc.createElement('canvas').getContext 并根据此方法的输出返回一个值。
5	Ext.supports.Range 它检查浏览器是否支持 document.createRange 方法。

Ext.String 类

Ext.String 类有多种方法来处理字符串数据。最常用的方法是编码解码、trim、toggle、urlAppend 等。

编码解码函数 − 这些是 Ext.String 类中可用于编码和解码 HTML 值的函数。


Ext.String.htmlEncode("< p > Hello World < /p >");
输出 - "&lt; p &gt; Hello World &lt; /p &gt;"。
Ext.String.htmlDecode("&lt; p &gt; Hello World &lt; /p &gt;");
输出 - "< p > Hello World < /p >"
Ext.String.trim(' hello ');
输出 – "hello"
Ext.String.urlAppend('https://www.google.com' , 'hello');
输出 - "https://www.google.com?hello"
Ext.String.urlAppend('https://www.google.com?index=1' , 'hello');
输出 – "https://www.google.com?index=1&hello"
var toggleString = 'ASC'
toggleString = Ext.String.toggle(a, 'ASC', 'DESC');
输出 – DESC，因为 toggleString 的值为 ASC。现在，如果我们再次打印相同的内容，这次我们将得到 toggleString = "ASC"，因为
它的值为 'DESC'。
它类似于三元运算符
toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

Sr.No	方法和说明
1	Ext.String.htmlEncode 此函数用于对 html 值进行编码，使其可解析。示例 − Ext.String.htmlEncode("< p > Hello World < /p >"); 输出 - "< p > Hello World < /p >"。
2	Ext.String.htmlDecode 此函数用于解码编码后的 html 值。示例 − Ext.String.htmlDecode("< p > Hello World < /p >"); 输出 - "< p > Hello World < /p >"
3	Ext.String.trim 此函数用于修剪字符串中不需要的空格。 Ext.String.trim(' hello '); 输出 – "hello"
4	Ext.String.urlAppend 此方法用于在 URL 字符串中附加一个值。示例 − Ext.String.urlAppend('https://www.google.com' , 'hello'); 输出 - "https://www.google.com?hello" Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); 输出 – "https://www.google.com?index=1&hello"
5	Ext.String.toggle 此函数用于在两个不同值之间切换值。示例 − var toggleString = 'ASC' toggleString = Ext.String.toggle(a, 'ASC', 'DESC'); 输出 – DESC，因为 toggleString 的值为 ASC。现在，如果我们再次打印相同的内容，这次我们将得到 toggleString = "ASC"，因为它的值为 'DESC'。它类似于三元运算符 toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

其他方法

Sr.No

方法和说明

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);
输出 – Number
Ext.typeOf(b);
输出 - String

DataType 相关方法 −这些函数根据变量的数据类型返回布尔值

示例 −

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

Sr.No	方法和说明
1	网格网格组件可用于以表格格式显示数据。
2	表单表单小部件用于从用户那里获取数据。
3	消息框消息框主要用于以警告框的形式显示数据。
4	图表图表用于以图形方式表示数据格式。
5	工具提示工具提示用于在发生任何事件时显示一些基本信息。
6	窗口此 UI 小部件用于创建一个窗口，当发生任何事件时该窗口都会弹出。
7	HTML 编辑器 HTML 编辑器是非常有用的 UI 组件之一，用于根据字体、颜色、大小、等。
8	进度条显示后端工作的进度。

Sr.No	绘图
1	圆形此图形用于创建圆形。
2	矩形此图形用于创建矩形。
3	弧此图形用于创建弧形。
4	椭圆此图形用于创建椭圆形。
5	椭圆弧此图形用于创建椭圆弧形。
6	图像此图形用于向您的应用程序添加图像。
7	路径此图形用于创建自由路径。
8	文本此图形用于向您的应用程序添加任何文本。
9	渲染后平移此属性用于移动容器中的起点，图形渲染后。它可以用于任何图形。
10	旋转此属性用于为添加的绘图添加旋转。它可以用于任何图形。
11	正方形此图形用于创建正方形。

Sr.No	方法和说明
1	Ext.String.htmlEncode 此函数用于对 html 值进行编码，使其可解析。示例 − Ext.String.htmlEncode("< p > Hello World < /p >"); 输出 - "< p > Hello World < /p >"。
2	Ext.String.htmlDecode 此函数用于解码编码后的 html 值。示例 − Ext.String.htmlDecode("< p > Hello World < /p >"); 输出 - "< p > Hello World < /p >"
3	Ext.String.trim 此函数用于修剪字符串中不需要的空格。 Ext.String.trim(' hello '); 输出 – "hello"
4	Ext.String.urlAppend 此方法用于在 URL 字符串中附加一个值。示例 − Ext.String.urlAppend('https://www.google.com' , 'hello'); 输出 - "https://www.google.com?hello" Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); 输出 – "https://www.google.com?index=1&hello"
5	Ext.String.toggle 此函数用于在两个不同值之间切换值。示例 − var toggleString = 'ASC' toggleString = Ext.String.toggle(a, 'ASC', 'DESC'); 输出 – DESC，因为 toggleString 的值为 ASC。现在，如果我们再次打印相同的内容，这次我们将得到 toggleString = "ASC"，因为它的值为 'DESC'。它类似于三元运算符 toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

Ext.js 教程

Ext.js 有用资源

Ext.js - 快速指南

Ext.js - 概述

历史

Ext JS 1.1

Ext JS 2.0

Ext JS 3.0

Ext JS 4.0

Ext JS 5.0

Ext JS 6.0

功能

优点

限制

工具

Sencha CMD

Sencha IDE 插件

Sencha 检查器

Ext.js - 环境设置

本地环境设置

下载库文件

CDN 设置

常用编辑器

浏览器

Ext.js - 命名约定

Ext.js - 架构

带有 Ext JS 应用的项目结构

工作原理

Ext.js - 第一个程序

步骤 1

index.htm

解释

步骤 2

Ext.js - 类系统

在 Ext JS 中定义类

语法

Ext JS 类定义示例

创建对象

使用 new 关键字

使用 Ext.create()

Ext JS 中的继承

Ext.extend

使用 Mixins

Ext.js - 容器

Ext.js - 布局

Ext.js - 组件

Ext.js - 拖放

语法

示例

Ext.js - 主题

Neptune 主题

Crisp 主题

Triton 主题

灰色主题

Ext.js - 自定义事件和侦听器

编写事件的方法

使用侦听器的内置事件

稍后附加事件

自定义事件

Ext.js - Data

Model

创建模型

Store

静态 store

动态存储

代理

客户端代理

服务器代理

Ext.js - 字体

Font-Awesome

Font-Pictos

添加 Font-Pictos 的步骤

Ext.js - 样式

Ext.js - 绘图

Ext.js - 本地化

Ext.js - 可访问性

Ext JS 中的可访问性

焦点样式和选项卡

ARIA 主题

Ext.js - 调试 Ext JS 代码