许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 alias
(如果类扩展了 Ext.Component,则为 xtype
)。别名/xtype 列在适用类的类名旁边,以便快速参考。
框架类或其成员可以指定为 private
或 protected
。否则,类/成员为 public
。Public
、protected
和 private
是访问描述符,用于传达应如何以及何时使用类或类成员。
Public 类和类成员可供任何其他类或应用程序代码使用,并且在主要产品版本中可以作为稳定和持久的内容依赖。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public
成员,旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用,不供应用程序开发人员使用。私有类和成员可能会随时更改或从框架中省略,恕不另行通知,不应在应用程序逻辑中依赖。
static
标签。*见下面的静态。下面是一个类成员的示例,我们可以对其进行剖析,以展示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。
让我们看一下成员行的每个部分
lookupComponent
)( item )
)Ext.Component
)。对于不返回除 undefined
之外任何内容的方法,可以省略此项,或者可以显示为以斜杠 /
分隔的多个可能值,表示返回的内容可能取决于方法调用的结果(即,如果 get 方法调用成功,方法可能返回 Component,如果不成功,则返回 false
,这将显示为 Ext.Component/Boolean
)。PROTECTED
- 请参阅下面的标志部分)Ext.container.Container
)。如果成员源自当前类,则源类将显示为蓝色链接;如果成员从祖先类或混入类继承,则显示为灰色。view source
)item : Object
)。undefined
之外的值,“返回值”部分将注明返回的类或对象类型以及描述(示例中为 Ext.Component
)Available since 3.4.0
- 示例中未显示),紧随成员描述之后Defaults to: false
)API 文档使用许多标志来进一步沟通类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();
false
,则标记为可阻止的事件将不会触发- 表示框架类
- Singleton 框架类。*有关更多信息,请参阅 singleton 标志
- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)
- 表示该类、成员或指南在当前查看的版本中是新的
- 表示 config
类型的类成员
- 表示 property
类型的类成员
- 表示 method
类型的类成员
- 表示 event
类型的类成员
- 表示 theme variable
类型的类成员
- 表示 theme mixin
类型的类成员
- 表示该类、成员或指南在当前查看的版本中是新的
在 API 文档页面的类名正下方是一行按钮,对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数(此计数在应用过滤器时更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以便快速导航。
与类配置选项相关的 Getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,就在它们所使用的配置下方。Getter 和 setter 方法文档将在配置行中找到,以便于参考。
您的页面历史记录保存在本地存储中,并显示在顶部标题栏正下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来展开显示的内容。这将显示所有产品/版本的所有最近页面历史记录栏。
在历史记录配置菜单中,您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。
如果在历史记录配置菜单中选择“全部”,则将启用“在历史记录栏中显示产品详细信息”的复选框选项。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上,还有一个过滤器输入字段,该字段使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表以包括或排除私有类。
单击空的搜索字段将显示您最近的 10 次搜索,以便快速导航。
每个 API 文档页面(Javascript 原始页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项
Ext.button.Button
类具有 Ext.Button
的备用类名)。通常维护备用类名以实现向后兼容性。可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或全局使用右上角的展开/折叠所有切换按钮来展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别是
可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
一旦您为您的应用程序编写了一些测试,您可能希望在您旨在支持的浏览器中运行这些测试。
Sencha Test 中的 Test Runner 允许您指定要运行的测试以及在哪个环境中运行。这些测试可以在您机器的浏览器以及虚拟机浏览器、移动设备浏览器和浏览器集群中运行。
首先,您需要打开您的工作区并展开包含您要运行的测试的测试项目。默认情况下,这将是工作区导航树中的“Tests”节点。工作区中的应用程序和软件包也将具有可以初始化的测试项目。
展开目标测试项目后,从测试项目中的场景中选择场景。通过从导航树中选择场景,您将在右侧看到场景的 Test Runner 选项卡出现。
对于 In-Browser 场景,Sencha Test 会检查其周围环境,并在 Test Runner 选项卡的“浏览器”视图中“本地浏览器”标题下显示您本地机器上的浏览器。这包括同一浏览器的多个版本。例如,您可能拥有 Chrome 的 Beta 版本和多个过去版本。这些都将被检测到,并将显示为“本地浏览器”。
Sencha Test 检测到的版本将显示在浏览器名称旁边的右侧列中。在左侧,您将看到一个复选框(以及本地浏览器标题中的复选框)。
除了本地浏览器外,您还可以在网络上其他设备上的浏览器或远程浏览器集群中的浏览器上运行相同的测试(更多信息如下)。
对于 WebDriver 场景,Sencha Test 默认情况下将在“嵌入式”部分下显示 Google Chrome。这使用 Sencha Test 内的嵌入式 Selenium Server 实例来针对 Chrome 启动您的 WebDriver 测试。要针对其他浏览器运行测试,您需要配置浏览器集群。
场景视图以树形布局显示测试套件、规范和期望,每个节点旁边都有复选框。复选框允许您指示要针对目标浏览器运行的测试。此外,标题还有一个复选框,允许您运行特定场景中盘点的所有测试。从“浏览器”视图中选择浏览器将在可用测试旁边添加列。这些浏览器列将显示已完成测试的结果。
要开始测试,请选中一个或多个浏览器作为测试的目标。在 Sencha Cmd 应用程序中工作时,当您最初选择浏览器时,将启动“app watch”实例。“app watch”是一个后台 Web 服务器实例,用于协助协调父应用程序和目标浏览器之间的测试运行。
当“app watch”启动时,您将在工作区树中的应用程序名称旁边看到一个橙色的“眼睛”图标。一旦“app watch”初始化并准备好为应用程序提供服务,您将看到“眼睛”图标变为灰色。然后,您可以运行您选择的测试。
选择目标浏览器后,选中您要从测试树视图中运行的测试旁边的框,然后单击“运行选择”按钮。
您会注意到,选择浏览器会导致它们的图标显示在测试列表旁边的列中。随着测试的进行,您将看到通过的测试在浏览器列中该测试旁边添加一个复选标记。同样,失败的测试将设置一个红色的“x”。如果所有子测试都通过,父测试套件节点将有一个绿色的复选标记,否则将有一个数字指示该套件的失败计数。您可以通过单击顶部工具栏中的“停止运行”按钮来终止正在进行的测试运行。
注意: 除了单独选择每个测试外,您还可以选中标题复选框以运行所有测试。这样做不会切换您可能使用测试树选择的测试。
当测试失败时,它将为遇到问题的每个浏览器提供有关失败的详细信息。单击每个受影响浏览器下的红色“x”以展开测试树下方的测试摘要视图。这些详细信息将使您了解可能需要解决哪些问题才能找到问题的根本原因。
此外,测试在浏览器本身内运行,这使您可以访问浏览器的开发者工具进行实际故障排除。可以通过再次单击“运行选择”按钮来重新运行测试。可以使用“清除结果”按钮完全清除测试结果。
注意: 由于操作系统处理优先级,在后台浏览器上运行的测试可能比在前台浏览器上运行的测试速度慢。
对于 In-Browser 场景,Sencha Test 内置的更有用的功能之一是能够轻松测试连接到与运行 Sencha Test 的机器同一网络的设备上的浏览器。
如果在使用本地浏览器运行测试后单击“清除结果”按钮,您会注意到浏览器中的 URL 是一个类似于 10.0.0.118:8800 的地址。在本例中,“10.0.0.118”是 Sencha Test 内部 Web 服务器使用的本地 IP 地址。此页面是一个“停放页面”,它有效地链接到 Sencha Test,并且处于等待其他测试的状态。
注意: 如果 Sencha Test 发现多个本地适配器,您可能会看到“localhost:8xxx”而不是字面 IP 地址。在这种情况下,您可以在
Sencha Test > Preferences > Network tab > External Address.
为了在同一网络上的另一台设备上运行相同的测试,请在另一台设备的浏览器中输入“停放地址”。在本指南中,我们将使用 10.0.0.118:8800。
单独的设备可以是另一台计算机、笔记本电脑、平板电脑或手机。在远程设备的浏览器中输入 10.0.0.118:8800 后,您会注意到 Test Runner 选项卡中的浏览器视图中有一个新条目。本地浏览器将显示标题为“本地浏览器”。外部同步的浏览器将显示标题,显示它们正在其中运行的平台。例如,在 iPad 上链接 Safari 移动浏览器显示为“iOS 11.3”下的“Safari 11”。
一旦远程浏览器和 Sencha Studio 连接,您将按照与仅测试本地浏览器时相同的步骤操作
然后测试将开始并报告回 Sencha Test,而无需远程设备的任何进一步操作!
注意: 在 Test Runner 选项卡的顶部工具栏中,您会看到一个“链接”图标。单击此按钮会将测试目标页面的 URL 复制到剪贴板。当将虚拟机中的浏览器指向 Sencha Test Runner 时,这可能是一个有用的快捷方式。
由浏览器集群(例如 Sauce Labs)虚拟托管的浏览器也将作为目标浏览器显示在 Test Runner 的浏览器视图中。
有关更多信息,请参阅浏览器集群指南。
顶部工具栏中的“覆盖率”按钮使您能够运行启用代码覆盖率的测试。此选项仅适用于 In-Browser 场景。
Sencha Test 包含 Istanbul 的集成版本,Istanbul 是一款领先的 JavaScript 代码覆盖率工具,您可以使用它来识别已覆盖的代码量和未被测试覆盖的代码量之间的差距。利用此集成,Sencha Test 以可读格式提供语句、分支、函数和行的详细细分,并进行百分比分析。
使用代码覆盖率报告是降低由于关键代码未得到正确测试而导致的项目风险的好方法。
在启用代码覆盖率的情况下运行测试后,代码覆盖率报告将在测试运行完成后显示。
要从代码覆盖率报告的范围中排除文件/文件夹,请使用 Sencha Studio 中的“项目设置”屏幕。例如,应排除 Ext JS SDK 目录,因为您希望将代码覆盖率分析集中在您自己的应用程序代码上。要排除 ext
目录中的所有代码文件,请使用此代码覆盖率过滤器
^/ext/.*?$