许多类在用配置对象创建(实例化)类时都有快捷名称。快捷名称称为 别名
(如果类扩展了 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 Cmd 编译器跟踪的元数据具有多种用途,我们将在本指南中检查其中一些用途。为了支持这些用途,编译器可以以几种不同的方式导出和格式化此元数据,我们也将在此处介绍。
建议在继续之前阅读以下指南
meta
生成输出编译器提供的主要新维度之一是其以各种格式导出元数据的能力。此功能用于生成 ext.js
“bootstrap”文件,该文件包含各种类以及有关框架中所有文件的元数据块。
编译器可以使用 meta
命令导出几种形式的元数据
注意。 对于 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
这些指令被编译器识别,并引入用户代码编译所需的符号名称。应将这些符号添加到混淆的库文件中,以确保库代码以正确的顺序连接。