Ext.js - 快速指南-365be体育入口-365be体育入口-bet3365标准版-365bet官方下载

❮ 上一节

下一节 ❯

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

文件和说明

ext.js

这是核心文件，包含运行应用程序所需的所有功能。

ext-all.js

此文件包含所有已压缩的代码，文件中没有注释。

ext-all-debug.js

这是用于调试目的的 ext-all.js 的未压缩版本。

ext-all-dev.js

此文件也未缩小，用于开发目的，因为它包含所有注释和控制台日志，用于检查任何错误/问题。

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 应用程序中。

href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic heme-classic

esources heme-classic-all.css" />

您将 ExtJS 应用程序代码保存在 app.js 文件中。

CDN 设置

CDN 是内容交付网络，您无需下载 Ext JS 库文件，而是可以直接将 ExtJS 的 CDN 链接添加到您的程序中，如下所示 −

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

常用编辑器

由于它是一个用于开发 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 − 程序流程将从其开始的主文件，应使用

解释

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

描述

容器内的组件

此示例显示如何定义容器内的组件

容器内的容器

此示例显示如何定义容器内包含其他组件的容器

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

Sr.No.

容器类型 &描述

Ext.panel.Panel

此示例显示了一个 Ext.panel.Panel 容器

Ext.form.Panel

此示例显示了一个 Ext.form.Panel 容器

Ext.tab.Panel

此示例显示了一个 Ext.tab.Panel容器

Ext.container.Viewport

此示例显示了一个 Ext.container.Viewport 容器

Ext.js - 布局

布局是元素在容器中的排列方式。它可以是水平、垂直或任何其他方式。Ext JS 在其库中定义了不同的布局，但我们也可以编写自定义布局。

Sr.No

布局 &描述

Absolute

此布局允许使用容器中的 XY 坐标定位项目。

Accordion

此布局允许将所有项目以堆叠方式(一个在另一个之上)放置在容器内。

Anchor

此布局允许用户指定每个元素相对于容器的大小大小。

Border

在此布局中，各个面板嵌套并由边框分隔。

Auto

这是默认布局，根据元素数量决定元素的布局。

Card(TabPanel)

此布局以选项卡方式排列不同的组件。选项卡将显示在容器顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件。

Card(Wizard)

在此布局中，每次元素都会占据整个容器空间。向导中有一个底部工具栏用于导航。

Column

此布局用于在容器中显示多个列。我们可以为列定义固定或百分比宽度。百分比宽度将根据容器的完整尺寸进行计算。

Fit

在此布局中，容器填充了单个面板。当没有与布局相关的特定要求时，则使用此布局。

Table

顾名思义，此布局以 HTML 表格格式将组件排列在容器中。

vBox

此布局允许元素以垂直方式分布。这是最常用的布局之一。

hBox

此布局允许元素以水平方式分布。

Ext.js - 组件

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

Sr.No

方法和说明

网格

网格组件可用于以表格格式显示数据。

表单

表单小部件用于从用户那里获取数据。

消息框

消息框主要用于以警告框的形式显示数据。

图表

图表用于以图形方式表示数据格式。

工具提示

工具提示用于在发生任何事件时显示一些基本信息。

窗口

此 UI 小部件用于创建一个窗口，当发生任何事件时该窗口都会弹出。

HTML 编辑器

HTML 编辑器是非常有用的 UI 组件之一，用于根据字体、颜色、大小、等。

进度条

显示后端工作的进度。

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

});

示例

以下是一个简单的示例。

rel = "stylesheet" />

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

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

要查看效果，请尝试以下程序。

rel = "stylesheet" />

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

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

要查看效果，请尝试以下程序。

rel = "stylesheet" />

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

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

要查看效果，请尝试以下程序。

rel = "stylesheet" />

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

灰色主题

考虑您的第一个 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

要查看效果，请尝试以下程序。

rel = "stylesheet" />

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

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

事件是当类发生某些事情时触发的。例如，当单击按钮时或在元素呈现之前/之后。

编写事件的方法

使用侦听器的内置事件

稍后附加事件

自定义事件

使用侦听器的内置事件

Ext JS 提供侦听器属性，用于在 Ext JS 文件中编写事件和自定义事件。

在 Ext JS 中编写侦听器

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

rel = "stylesheet" />

Please click the button to see event listener