文档帮助

术语、图标和标签

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

访问级别

框架类或其成员可以指定为privateprotected。否则,类/成员为publicPublicprotectedprivate是访问描述符,用于传达类或类成员的使用方式和时间。

成员类型

成员语法

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

lookupComponent ( item ) : Ext.Component
protected

在初始化items配置期间或添加新项目时,将原始配置对象添加到此容器时调用added), or {@link #insert inserted.

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

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

参数

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)在页面上默认展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

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

桌面 -vs- 移动视图

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

查看类源代码

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

Sencha Test 2.4.0


顶部

测试 ExtReact 应用程序

Sencha Test 可以帮助您使用 WebDriver 场景编写和执行针对 ExtReact 应用程序的端到端测试。

通过使用事件记录器和检查工具等功能,您可以快速为页面中的组件生成独特且稳定的定位器。

本指南将引导您完成使用 Sencha Test 并将其配置为针对 ExtReact 应用程序运行测试的典型过程。

在决定在哪里创建测试项目时,您有两个选择

  • 在 Sencha Studio 中创建一个新项目,并在独立项目中添加测试套件
  • 在 Sencha Studio 中打开 ExtReact 应用程序,并在 ExtReact 应用程序文件夹结构中添加您的测试

创建新项目

  1. 打开 Sencha Studio,并创建一个新项目。定义 ExtReact 应用程序运行的 URL,例如 http://examples.sencha.com/ExtReact/latest/conference-app/

    • 名称:项目的名称,例如 ConferenceApp
    • 路径:项目将创建的位置。场景和测试套件文件将添加到此位置。
    • URL:正在运行的 Web 应用程序的 Web 地址,例如 http://examples.sencha.com/ExtReact/latest/conference-app/
  2. 项目创建后,您将能够单击“新建场景”按钮来创建一个将包含您的测试套件文件的场景。

    • 名称:场景的名称,例如,如果您正在创建端到端测试,您可以将场景命名为 EndToEnd
    • 测试类型:选择 WebDriver 将在浏览器之外运行您的测试。这适用于端到端测试。如果您在 Sencha Studio 中选择了 Test Engineer 角色,则此选项将被隐藏,并且新场景将默认设置为 WebDriver 类型。
  3. 场景创建后,在树中选择场景,然后单击“新建测试套件”按钮 >> 从菜单中选择“Jasmine 测试套件”。输入测试套件的名称,例如 ConferenceApp。这将创建一个新的 Jasmine 测试套件文件。.js 文件扩展名将自动添加。

  4. 使用新的测试套件加载到编辑器中,您现在可以开始编写您的测试。您可以利用 事件记录器 来捕获一组操作以插入到您的测试套件中,或者使用 Futures API 编写代码。您还可以利用 检查工具 来帮助您创建元素定位器。

在 Sencha Studio 中打开 ExtReact 应用程序

为了在 Sencha Studio 中打开您的 ExtReact 应用程序并将您的测试添加到应用程序的文件夹中,ExtReact 应用程序需要位于 Sencha 工作区内,以便它可以在 Sencha Studio 中打开。这可以是一个仅用于 ExtReact 应用程序的空白工作区,也可以是一个包含其他 Ext JS 应用程序/包的工作区。

  1. 如果您还没有为您的 ExtReact 应用程序创建工作区,请在 Sencha Studio 中创建一个新项目。这将创建一个包含 workspace.json 配置文件的文件夹。

  2. 将您的 ExtReact 应用程序文件夹复制或移动到工作区文件夹的根目录。

  3. 修改 workspace.json 文件以定义任何 ExtReact 应用程序的存在,方法是添加一个新的 extreact 配置,并定义位于工作区文件夹中的 ExtReact 应用程序的文件夹名称。

     {
         /**
         * Array of Ext JS apps
         */
         "apps": [
             "Dashboard"
         ],
    
         /**
         * Array of ExtReact apps
         */
         "extreact": {
             "apps": [
                 "my-react-app"
             ]
         }
    
         ...
    
  4. 当您在 Sencha Studio 中打开工作区时,您将在项目结构的“ExtReact 应用程序”节点下看到您的 ExtReact 应用程序,并且您将能够添加您的场景和测试。这些将在 ExtReact 应用程序文件夹内的 test 文件夹中创建。

    ExtReact app support in Sencha Studio

更多信息

有关场景和测试套件的更多信息,请参阅 项目、场景和套件指南

Sencha Test 2.4.0