文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

我们来看看成员行中的每一部分

  • 展开/折叠 - 在成员行的左侧有一个控件,用于展开和折叠每个成员行以显示/隐藏成员详细信息。
  • 成员名称 - 类成员的名称(本例中为 lookupComponent
  • 方法参数 - 方法使用的任何必需或可选参数(或传递给事件处理程序方法)将在括号中列在方法名称旁边(本例中为 ( item )
  • 返回类型 - 方法或属性返回的类实例或 JavaScript 对象(本例中为 Ext.Component)。对于不返回 undefined 的方法,可以省略此项,或者可能显示多个可能的值,用正斜杠 / 分隔,表示返回的内容可能取决于方法调用的结果(即,如果 get 方法调用成功,方法可能返回一个组件,如果失败则返回 false,将显示为 Ext.Component/Boolean)。
  • 标志 - 接下来将显示适用于成员的任何标志(本例中为 PROTECTED - 请参见下面的标志部分)
  • 成员来源 - 在成员行的右侧是最初描述成员的类(本例中为 Ext.container.Container)。如果成员源自当前类,则源类将显示为蓝色链接,如果成员是从祖先或混合类继承的,则显示为灰色。
  • 成员源 - 在成员来源类的右侧下方是一个链接,用于查看成员的源(示例中的 查看源
  • 参数列表 - 类方法的每个参数都将使用括号中上面找到的相同名称、预期的类或对象类型以及参数的描述(示例中的 item : Object)列出。
  • 返回 - 如果类返回的值不为 undefined,则“返回”部分将记录返回的类或对象类型以及描述(示例中的 Ext.Component
  • 示例中未显示) - 一些成员将显示产品首次引入成员的版本(即 自 3.4.0 起可用 - 示例中未显示),紧接在成员描述之后
  • 默认示例中未显示) - 配置通常显示要应用于类实例的默认配置值,如果未覆盖(即 默认为:false

成员标志

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

  • 必需 - 实例化类时的必需配置
  • 可绑定 - 配置具有一个 setter,允许通过 ViewModel 绑定设置此配置
  • 只读 - 可以读取属性,但不能用于在运行时配置/重新配置类实例
  • 单例 - 单例类在定义后立即实例化,并且不能手动实例化
  • 静态 - 静态方法或属性是属于类本身的方法或属性,而不是类的实例
  • 可链接 - 指在调用时返回类实例的方法。
    这允许链接方法调用,例如:classInstance.method1().method2().etc();
  • 已弃用 - 计划在未来框架版本中删除的类或成员,并在当前版本中提供以保持向后兼容性。
    已弃用的类和成员将有一条消息,指导您在将来使用首选类/方法。
  • 已删除 - 文档中仅作为框架版本之间升级的用户参考存在的已删除类或成员
  • 模板 - 在基类中定义的方法,旨在由子类覆盖
  • 抽象 - 类或成员可以定义为抽象。抽象类和成员建立类结构,并提供有限的代码(如果有的话)。类特定代码将通过子类中的覆盖来提供。
  • 可预防 - 如果从事件处理程序返回 false,则标记为可预防的事件将不会触发

类图标

- 表示框架类

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

- 组件类型框架类(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 原始页面除外)都有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一个或多个内容

  • 别名 - 一个或多个其他类名同义词(在 Ext JS 6.0.0 中,Ext.button.Button 类的别名是 Ext.Button)。通常出于向后兼容性的考虑而保留别名。
  • 层次结构 - 层次结构视图列出了当前类的继承链,从其祖先类一直到根基类。
  • Mixins - 混入当前类的类列表
  • 继承的 Mixins - 混入当前类祖先的类列表
  • Requires - 实例化类所需的定义的所有类
  • 用途 - 在生命周期中的某个时间点,类可能使用的类列表,但类最初被实例化时不一定需要
  • 子类 - 扩展当前类的类

展开和折叠示例和类成员

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

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

桌面与移动视图

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

  • 全局导航将位于左侧菜单中,可通过汉堡菜单图标访问。菜单包含以下内容(在大多数页面上)
    • 当前产品名称(作为指向产品登录页面的链接)
    • 用于导航回文档主页的 Sencha 图标
    • 产品菜单下拉按钮
    • API 文档和指南的导航树选项卡
  • 当前上下文导航和工具位于右侧,可通过齿轮图标访问。上下文菜单包含以下内容
    • 全局搜索输入字段
    • API 文档)带有成员筛选器、“展开/折叠所有示例”按钮、“展开/折叠所有成员行”按钮、访问级别筛选器复选框和每个成员计数的“筛选器”选项卡
    • API 文档)包含与当前类相关的元数据菜单的“相关类”选项卡
    • 指南)指南的目录

查看类源

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

Architect 4.3


顶部

创建用户扩展

本指南提供了创建自定义用户扩展的说明;有关在项目中使用这些工具的信息,请参阅使用用户扩展指南。

用户扩展使您能够打包实现非标准功能的组件,以便轻松重复使用。

Sencha Architect 还提供了与其他项目和其他用户共享单个类或组件的工具。这些内容在使用类指南中进行了讨论。

创建用户扩展

用户扩展是在 Architect 项目外部开发的用户界面组件。在 Sencha Architect 的早期版本中,组件可以作为资源包含在 Architect 项目中,但它们是静态的。此外,它们不会显示在画布中,并且不能像 Architect 中包含的组件那样使用和操作。

从 Sencha Architect 3.0 开始,可以将正确打包的用户扩展集成到 Architect 项目中。不支持与组件的完全交互。例如,您不能单击并操作元素,就好像它们在应用程序中处于活动状态一样,但可以将组件拖放到画布中并显示在画布中,并且可以在配置面板中设置组件的配置。

可以轻松地将单个类/组件导出到文件保存到工具箱

当满足以下一项或多项条件时,用户扩展包或.aux文件是合适的

  • 您需要共享的不仅仅是类/覆盖。例如,当您想要公开新的或特殊的配置,或自动创建“子”或“相关”组件时。
  • 重要的是,导入此代码的人员可以在画布中呈现功能,并且在预览应用程序时可以正常工作。
  • 您想要共享和重复使用比框架内置组件功能更强大的组件。

创建 Architect 用户扩展的步骤如下

  • 使用 Sencha Cmd 生成用户扩展 (UE) 包。
  • 创建要在扩展中使用的 JavaScript 文件(每个类一个)。
  • 将 JavaScript 文件添加到 UE 包中的src文件夹。
  • architect目录添加到 UE 包的根目录,并为用户扩展中定义的每个类创建一个 JSON 定义文件。然后,您会将这些定义文件放在architect目录中。
  • 将特定于 UE 的任何 CSS 文件添加到resources/css目录。
  • 使用有关 UE 的信息填充package.json文件。
  • 打包用户扩展。
  • 测试用户扩展包。

以下详细讨论了每个步骤。

创建扩展包

如果您尚未设置 Sencha Cmd 工作区,请选择要用作工作区的目录,然后在其中键入以下内容

sencha generate workspace /path/to/directory

要创建包,请导航到新创建的工作区,然后键入以下内容(用“FooExtension”替换扩展的名称)

sencha generate package -type code FooExtension

这将在您的工作区中创建一个packages文件夹(如果尚未存在),其中包含一个名为您的包(例如“FooExtension”)的packages下的目录。

Sencha Cmd 完成了大部分工作,但您必须手动创建一些目录并添加一些数据。扩展包的格式显示在用户扩展结构中。

添加 .js 和 CSS 文件

通过将所有类的.js文件复制到src目录中来填充扩展包。大多数用户扩展只包含一个或两个类,但您可以包含几乎任意数量的类。

将特定于扩展的任何 CSS 文件添加到resources/css目录。

为所有类创建定义文件

用户扩展包中的每个类都必须有一个 JSON 定义文件,才能通过 Architect 中的工具箱使用。定义文件位于您之前在包树的根目录中创建的architect目录中。定义文件定义了用户扩展集成到 Sencha Architect 基础架构中的特征和行为。它们可能是非常简单的文件,只是在工具箱中为项目命名并对应于一个类,但也可以实现更复杂的行为。

请参阅用户扩展结构以获取有关定义文件和必须填充的字段的详细信息。

填充 package.json 文件

sencha generate命令设置了一个骨架package.json文件。您必须手动编辑该文件以提供有关扩展的附加信息。

请参阅用户扩展结构以获取有关package.json文件和必须填充的字段的详细信息。

创建 Readme.md 文件

每个用户扩展包都应包含一个包含以下信息的Readme.md文件

  • 包及其组件的描述。
  • 有关 UE 所有权和任何相关许可信息的规范。
  • 包中的任何已知问题。
  • 更新软件包时,请描述该软件包此版本中的新增内容以及任何兼容性问题。

测试用户扩展软件包

要测试用户扩展软件包,请按照以下步骤操作

  • 将其安装到测试系统中,方法是将其复制到 Architect 设置中为扩展存储指定的目录中,然后复制到版本化文件夹中。例如

      C:\Users\YOURNAME\Documents\Architect\Extensions\MyExtension\1.0\
    
  • 打开使用兼容框架的 Architect 项目,并在项目中使用用户扩展。

务必遵守以下核对清单

  • 验证您的定义已正确加载,并显示在“扩展”下的工具箱中。
  • 将用户扩展中的每个组件添加到项目中,然后保存/构建项目。
  • 验证在应用程序的预览版本中是否正确引用了所有 JavaScript 和 CSS 文件。
  • 修改可用于组件的任何配置的值,并验证是否已实现新值。
  • 尝试将配置值设置为无效值,以确保正确处理错误。
  • 将项目导出到存档和/或将其检入源代码管理中。然后将项目下载到另一系统,并确保包含并提供了所有组件。

打包用户扩展软件包

要从 Architect 中打包用户扩展

  • 只需“右键单击”扩展名,然后选择“打包扩展”
  • 选择一个文件和路径来保存扩展

生成的 .aux 文件现在可以与其他 Architect 用户共享!

要手动打包用户扩展(不推荐)

  • 从包含 package.json 的目录中压缩包中所有文件。不要从扩展上方目录中压缩。解压缩扩展时,其内容必须在工作目录级别解压缩。
  • .zip 文件重命名为 .aux 扩展名。

在打包用户扩展的新版本时

  • 增加 package.json 文件中 version 字段的值。Architect 在安装时会比较版本号,跳过此步骤会导致用户无法安装您新更新的扩展。

Architect 4.3