文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

lookupComponent ( item ) : Ext.Component
protected

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

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

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

参数

item :  Object

要添加的配置对象。

返回值
Ext.Component

要添加的组件。

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

成员标志

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

类图标

- 表示框架类

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

- 组件类型框架类(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 文档页面顶部的类名称来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Cmd 7.8.0


顶部

生成元数据

Sencha Cmd 编译器跟踪的元数据具有多种用途,我们将在本指南中检查其中一些用途。为了支持这些用途,编译器可以以几种不同的方式导出和格式化此元数据,我们也将在此处介绍。

先决条件

建议在继续之前阅读以下指南

使用 meta 生成输出

编译器提供的主要新维度之一是其以各种格式导出元数据的能力。此功能用于生成 ext.js “bootstrap”文件,该文件包含各种类以及有关框架中所有文件的元数据块。

编译器可以使用 meta 命令导出几种形式的元数据

  • 类别名
  • 备用类名
  • 加载器路径
  • 文件名
  • 定义

生成自定义 Bootstrap

注意。 对于 Sencha Cmd 生成的应用程序,此过程是自动处理的。如果您未使用 Sencha Cmd 生成的应用程序,则本节介绍如何手动实现相同的结果。

meta 命令的主要用途是创建您自己的“bootstrap”文件。此文件使框架对您的应用程序代码的感知程度与对框架代码本身的感知程度相同。

管理 bootstrap 文件的最简单方法是将其与您的标记文件一起存储。如果这不适合您,请继续阅读以了解如何管理相对路径。如果您的标记文件位于类路径中的源文件夹中,则需要告诉编译器忽略 bootstrap 文件。使用 -ignore 开关执行此操作

sencha compile -classpath=sdk/src,app -ignore bootstrap.js \
    ...

requires 中启用通配符支持

"ext-debug.js" 的末尾包含以下两个函数调用

Ext.ClassManager.addNameAlternateMappings({
    "Ext.draw.engine.ImageExporter": [],
    "Ext.layout.component.Auto": [],
    ...
});

Ext.ClassManager.addNameAliasMappings({
    "Ext.draw.engine.ImageExporter": [],
    "Ext.layout.component.Auto": [
        "layout.autocomponent"
    ],
    ...
});

正是由于存在这两条元数据,才允许在 requires 语句中使用通配符。也就是说

Ext.define('MyApp.App', {
    requires: [
        'Ext.grid.*'
    ],
    ...
});

在您自己的代码中使用通配符所需的全部操作是为您的应用程序提供相同的 bootstrap 数据。

此命令将生成一个仅执行此操作的文件

sencha compile -classpath=app \
    meta -alias -out bootstrap.js and \
    meta -alt -append -out bootstrap.js

上面的命令行告诉编译器读取 app 文件夹中的源代码并生成两条元数据。第二条元数据与第一条元数据写入同一个输出文件,但使用 -append 选项追加到文件而不是替换文件。

获得 "bootstrap.js" 文件后,按如下所示更改您的页面以将其添加到 x-bootstrap 部分

<html>
    <head>
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <script src="../sdk/ext-dev.js" type="text/javascript"></script>

                <script src="bootstrap.js" type="text/javascript"></script>
            <!-- </x-bootstrap> -->

            <script src="app/app.js" type="text/javascript"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
</html>

如果您执行以下任何操作,则需要重新生成 "bootstrap.js" 文件

  • 添加类
  • 删除类
  • 更改类别名
  • 更改类备用名称

bootstrap 数据的重建可以通过多种方式处理,但根本问题是是将这些文件保留在源代码控制中,还是要求开发人员在本地生成它们。这两种方法都有效,并且可以在一定程度上实现自动化。

注意。 对于 Sencha Cmd 生成的应用程序,这作为 sencha app build 构建过程的一部分进行处理。或者,通过 sencha app refresh 命令可以仅刷新 bootstrap 而不是执行完整构建。

导出加载器路径

在大型应用程序中,使用多个源树组织您的命名空间可能会有所帮助。实际上,Ext JS 本身使用三个源树。然而,这种方法一直给动态加载器带来问题,需要手动配置加载器路径才能解决此问题。然而,鉴于类路径中的所有源代码,编译器完全了解类到文件的关系。并且 meta 命令可以导出该数据以在您的应用程序中使用。

如果您已经确信以上方法可以创建 "bootstrap.js",则可以通过添加一个 meta 命令来添加此数据(当然,在这种情况下,类路径将包含多个文件夹)

sencha compile -classpath=src1,src2,src3 \
    meta -alias -out bootstrap.js and \
    meta -alt -append -out bootstrap.js and \
    meta -loader -append -out bootstrap.js

现在 "bootstrap.js" 文件解决了这两个问题。使用此方法,以下事项也需要您重建 "bootstrap.js"

  • 重命名文件或文件夹
  • 重新组织类路径
  • 重新组织任何源树的内容

注意。 这部分也为 Sencha Cmd 生成的应用程序自动处理。

使用 -base-path 解析相对路径

出于许多充分的理由,路径需要是相对的。但是,每当您处理相对路径时,都需要解决这些相对路径基于哪个位置的问题。在上面的示例中,我们作弊了一下,将 "bootstrap.js" 文件放在标记文件旁边。这利用了 meta 命令默认将基本文件夹设置为输出文件位置的事实。

当情况并非如此时,您需要告诉 meta 命令用于确定相对路径的基础。假设我们要将 "bootstrap.js" 文件移动到 "build" 文件夹中(可能是因为我们没有将其保留在源代码控制中)。由于我们的页面位于当前文件夹中,而我们的源代码位于 "app" 文件夹中,因此这将生成正确的相对路径

sencha compile -classpath=src1,src2,src3 \
    meta -alias -out build/bootstrap.js and \
    meta -alt -append -out build/bootstrap.js and \
    meta -loader -append -base-path . -out build/bootstrap.js

由于 -alias-alt 模式不处理路径,因此 -base-path 选项仅在 meta 命令的 -loader 用法中需要。

更改格式

默认情况下,meta 命令使用适用于请求的元数据类型的函数调用包装器以 JSONP 格式导出元数据。如果需要不同的函数调用,或者您希望数据采用 JSON 格式,则可以在 meta 命令中请求此操作。

在下面的示例中,aliases.json 文件将包含 JSON 格式的别名数据。在这种情况下,您不能使用 -append,因为 JSON 格式需要单个顶级对象或数组。

sencha compile -classpath=src1,src2,src3 \
    meta -alias -json -out aliases.json

在下一个示例中,我们通过提供要调用的函数来自定义 JSONP 包装

sencha compile -classpath=src1,src2,src3 \
    meta -alias -jsonp Foo.bar.doAliases -out aliases.js

此表单可以与 -append 一起使用,因为它生成 JavaScript 代码。上述输出大致如下所示

Foo.bar.doAliases(
    // ... the JSON data ...
);

导出文件名

meta 命令支持的偶尔有用的元数据形式是文件名数据。也就是说,按正确的依赖顺序排列的文件列表。在许多方面,这与其他元数据形式相同,因为此数据可以以 JSON 或 JSONP 格式导出,并且可以使用 -append 进行组合。

-filenames 的第一个区别是默认格式是文本。要生成 JSON 或 JSONP,您必须指定 -json-jsonp 选项之一。

在文本的默认模式下,文件名以文本行形式写入,每行一个文件名。以下命令将创建 "filenames.txt"

sencha compile -classpath=src1,src2,src3 \
    meta -filenames -out filenames.txt

可以使用 -tpl 选项修饰文件的每一行。由于此示例需要特殊字符,因此我们使用响应文件来保存模板。我们将其放在 "template.txt" 中,如下所示

<script src="{0}" type="text/javascript"></script>

然后运行以下命令。

sencha compile -classpath=src1,src2,src3 \
    meta -filenames -tpl @template.txt -out filenames.txt

我们现在有一块标记,它将“script-tag in”所有文件,并按其正确的顺序排列。

例如

<script src="ext/src/ShadowPool.js" type="text/javascript"></script>
<script src="ext/src/Shadow.js" type="text/javascript"></script>

导出定义

编译器通常通过解析源代码来读取元数据,例如类、命名空间和依赖项。在隐藏这种情况(例如,在混淆库时)下,编译器将不知道任何已定义的类或其依赖项。

这种形式的元数据导出可用于为此类库提供“符号”,以便用户仍然可以使用 Sencha Cmd 编译其应用程序。

sencha compile -classpath=src1,src2,src3 \
    meta -definitions -out symbols.js

上面创建的文件包含如下指令

// @define Foo.bar.Thing
// @require Ext.panel.Panel
// @uses Ext.layout.container.HBox

这些指令被编译器识别,并引入用户代码编译所需的符号名称。应将这些符号添加到混淆的库文件中,以确保库代码以正确的顺序连接。

Cmd 7.8.0