文档帮助

术语、图标和标签

许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 别名(如果类扩展自 Ext.Component,则称为 xtype)。别名/xtype 列在适用类的类名旁边,以便快速参考。

访问级别

框架类或其成员可以指定为 privateprotected。否则,类/成员为 publicPublicprotectedprivate 是访问描述符,用于传达类或类成员应如何以及何时使用。

成员类型

成员语法

下面是一个示例类成员,我们可以对其进行剖析以显示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。

lookupComponent ( item ) : Ext.Component
protected(受保护)

当原始配置对象添加到此容器时调用,无论是在初始化 items 配置期间,还是在 添加新项目时,或 {@link #insert 插入}。

此方法将传递的对象转换为实例化的子组件。

当需要对子组件创建应用特殊处理时,可以在子类中覆盖此方法。

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看一下成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- 单例框架类。 *有关更多信息,请参阅单例标志

- 组件类型框架类(Ext JS 框架中扩展自 Ext.Component 的任何类)

- 表示类、成员或指南在当前查看的版本中是新的

成员图标

- 表示类型为 config 的类成员

- 表示类型为 property 的类成员

- 表示类型为 method 的类成员

- 表示类型为 event 的类成员

- 表示类型为 theme variable 的类成员

- 表示类型为 theme mixin 的类成员

- 表示类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面上的类名正下方是一行按钮,对应于当前类拥有的成员类型。每个按钮都显示按类型划分的成员计数(此计数在应用过滤器后会更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,紧挨着它们所作用的配置下方。Getter 和 setter 方法文档将在配置行中找到,以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中,并显示在顶部标题栏正下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本历史记录栏中的所有最近页面。

在历史记录配置菜单中,您还将看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮进行筛选。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择“全部”,“在历史记录栏中显示产品详细信息”的复选框选项将启用。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上,还有一个过滤器输入字段,该字段使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。

API 类导航树底部的复选框过滤类列表,以包含或排除私有类。

单击空的搜索字段将显示您最近 10 次搜索,以便快速导航。

API 文档类元数据

每个 API 文档页面(JavaScript 原始页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

展开和折叠示例及类成员

可运行示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或全局使用右上角的展开/折叠所有切换按钮来展开和折叠成员。

桌面与移动视图对比

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Ext JS 7.8.0


顶部
高级

ExtJS 7.x 中的 Froala WYSIWYG 编辑器

ExtJS 7.x 具有用于 Classic 和 Modern 工具包的高级代码包。该软件包允许您在应用程序中使用 Froala WYSIWYG 编辑器。

该组件有两个版本:字段版本(用于表单)和常规组件版本(用于其他任何地方)。

这两个类都是 Froala WYSIWYG 编辑器的简单包装器,文档位于 https://www.froala.com/wysiwyg-editor。这些是 ExtJS 组件,因此您可以像使用任何其他组件一样使用它们,包括设置侦听器以检测组件事件和 Froala 原生事件。您还可以直接在 Froala 实例上运行原生 Froala 方法。

Froala Editor

安装

Froala 代码包可通过 Open Tooling (ext-gen) 作为 npm 包以及 Sencha Cmd 包在 Sencha 的 CDN 上获得。

通过 Open Tools 和 npm 安装

下面给出了详细安装步骤的链接,但简而言之,您必须

  1. 登录到 Sencha npm 存储库 npm login --registry=https://npm.sencha.com --scope=@sencha
  2. 使用终端窗口并导航到您的 ext-gen 项目并运行 npm install @sencha/ext-froala-editor
  3. 通过更新您的应用程序的 app.json 来配置您的应用程序以使用新的代码包。

    app.json 中,将 froala-editor 添加到 requires 数组。

     {
       // ...
       "requires": [
         "font-awesome",
         "froala-editor" 
       ],
       // ...
    
  4. 有关 npm 存储库登录的详细信息,请参阅登录到 npm 存储库

  5. 有关添加包的详细信息,请参阅高级包 - 快速添加应用程序功能

通过 Sencha Cmd Packages 在 Sencha 的 CDN 上安装

  1. 通过更新您的应用程序的 app.json requires 数组以包含该包,来配置您的应用程序以使用新的代码包
  2. Sencha Cmd 将在您下次构建应用程序时自动下载并安装新的代码包

将 Froala 添加到 workspace.json

您必须将 Froala 路径添加到 workspace.json packages.dir 字符串

"packages": {
    "dir": "...,${workspace.dir}/node_modules/@sencha/ext-froala-editor",
    ...
}

使用 Froala 编辑器

Froala 编辑器有两个版本

  • 组件版本 — Ext.froala.Editor
  • 字段版本 — Ext.froala.EditorField

这些组件是 Froala 编辑器实例的包装器。它们的配置和使用方式相同,但字段版本扩展了 Ext.field.Field,因此,可以给定 namevalue,并可以在字段面板和表单面板中使用。

基本用法

有两个主要配置:value(编辑器的 HTML 值)和 editor(正在创建的 Froala 编辑器实例的配置)。

value 配置

value 配置指定编辑器的初始值。value 是可绑定的,并且是默认绑定属性。请注意,value 是 HTMl,因此将包含 HTML 标签。

获取 value 示例

myFroalaComponent.setValue('Hello world!');
console.log(myFroalaComponent.getValue()); // Logs "<p>Hello world!</p>"

简单示例

在表单中,您可以使用字段版本。其名称-值对将反映在表单提交中,或在表单上调用 getValue() 时反映出来。

Froala 实例配置

editor 配置允许您配置 Froala 编辑器实例。您可以使用任何 Froala 配置,如 Froala 选项中所述。

事件

要侦听事件,请使用标准 listeners 组件配置。您可以通过在事件名称上使用 froala 前缀来侦听原生 Froala 事件。Froala 事件在 Froala 事件中进行了文档化。

此示例显示了一个配置了侦听器以侦听其 change 事件的 Froala 编辑器,此外,还配置了一个侦听器以侦听原生 Froala click 事件,该事件通过使用 _froala-+ 前缀指定。

运行 Froala 原生方法

要运行原生 Froala 方法,请使用 getEditor() 获取对 Froala 实例的引用,然后运行您希望的任何方法。Froala 方法在 Froala 方法中进行了文档化。

例如,要获取字符计数,您可以使用此表达式

myFroalaComponent.getEditor().charCounter.count()

启动时间

当创建 FroalaEditorFroalaEditorField 时,需要几毫秒才能创建和初始化包装的 Froala 实例。设置事件时,这是透明的,但如果您需要检测实例何时准备就绪,请使用 ready 事件。该实例还具有一个 isReady 布尔属性,该属性最初为 false,并在组件初始化后更改为 true

此代码说明了属性和事件之间的关系。

指定 Froala 激活密钥

要使用 Froala 编辑器的许可副本,您需要一个激活密钥,如 什么是激活密钥? 中所述。

注意:当 Froala 编辑器在未激活密钥的情况下部署到已发布的站点时,它将显示红色未许可横幅。Sencha 企业客户可以通过发送电子邮件至 [email protected],并在电子邮件中使用“Sencha Ext JS 7.0 Froala Key Request”作为主题行,来请求免费的 12 个月 Froala 企业许可证以与 Froala 组件一起使用,并在邮件中附上他们的 Sencha ID/客户帐户。

然后,您需要在应用程序的 app.json 中的名为 froala 的配置块中指定密钥。这是一个示例,显示了 app.json 的一部分,其中包含 froala-editor 代码包的 requires 条目,以及激活密钥的规范。

{
    "name": "MyApp",
    "namespace": "MyApp",
    "framework": "ext",
    "requires": ["font-awesome", "froala-editor"],
    "froala": {
        "activation-key": "my-activation-key"
    }

    //...
}

更多示例

您还可以在我们的 Kitchen Sink 中找到更多示例

Ext JS 7.8.0