文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

lookupComponent ( item ) : Ext.Component
protected

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

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

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

参数 (Parameters)

item :  Object

正在添加的配置对象。

返回值 (Returns)
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 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Architect 4.3


顶部

控制器参考

控制器是将应用程序的各个部分粘合在一起的粘合剂,实现了使您的应用程序按预期运行的业务规则和逻辑。它们监听事件(通常来自视图 (Views))并根据事件采取一些操作,无论是呈现视图、实例化模型 (Models) 还是执行其他一些应用程序逻辑。例如,如果您的应用程序包含一个可点击的“注销”按钮,则控制器会监听按钮的 tap 事件并采取适当的操作,例如发送移动到游戏中的另一个用户。控制器允许视图处理数据的显示,而模型处理数据的加载和保存。

在 Architect 中使用控制器

在 Sencha 的 MVC 包中,控制器管理视图 (Views)。视图不调用控制器来调用方法。视图触发事件,控制器响应这些事件。使用 Architect,您可以通过在检查器 (Inspector) 中选择控制器,导航到配置面板 (Config panel) 中的“视图 (Views)”配置,并从那里显示的下拉列表中选择可用的视图列表,或者您可以键入要选择的视图的名称,将视图与控制器关联起来。请注意,您必须先向项目中添加和构建视图,然后才能将视图与控制器关联起来。

您可以通过向控制器添加控制器操作来使控制器响应事件。使用配置面板

  • 在检查器中,选择要使用的控制器
  • 转到配置面板并导航到“操作 (Actions)”
  • 单击“值 (Value)”下方的添加按钮(“+”),然后选择“控制器操作 (Controller Action)”。
  • 系统将提示您选择操作的目标类型(视图)和事件。

一旦您选择目标视图和事件,Architect 就会拥有订阅该类型的所有用户界面控件所需的一切。

例如,假设您选择 Ext.Button 作为目标类型,选择 tap 事件。Architect 会自动生成一个 onButtonTap 方法(您可以重命名)。它还会生成一个 button 的 controlQuery。controlQuery 指定控制器需要监视哪些 UI 控件。它类似于 CSS 选择器,可与页面上实例化的组件一起使用。双击检查器中的控制器操作会打开该操作的代码视图 (Code View),您可以在其中添加自己的代码来确定用户点击按钮时触发的行为。

添加控制器

使用检查器将控制器添加到 Ext JS 项目:单击检查器右上角的添加按钮(“+”),然后从组件列表中选择“控制器 (Controller)”。Architect 在“控制器 (Controller)”节点下显示控制器(“MyController”)。从那里,使用配置面板向控制器添加功能。请参阅下一节,了解如何执行此操作。

您还可以通过工具箱 (Toolbox) 添加控制器,其中“控制器 (Controller)”、“控制器操作 (Controller Action)”和“控制器引用 (Controller Reference)”都可用作标准组件。这不是推荐的做法。

主控制器配置

要设置控制器的配置,请在检查器中选择该控制器,然后打开配置面板。Ext JS 最常用的配置是

操作 (Actions)。 单击配置面板中“操作 (Actions)”旁边的添加按钮,向控制器添加操作。选择“控制器操作 (Controller Action)”或“应用程序操作 (Application Action)”。对于“控制器操作 (Controller Action)”,请按照“配置 (Config)”中的说明从视图组件列表中选择目标类型和操作的事件。双击检查器中的“控制器操作 (Controller Action)”以向操作添加自定义代码。在检查器中选择(单击一次)“控制器操作 (Controller Action)”和“应用程序操作 (Application Action)”以查看它们的可用配置。关键操作配置是 targetType,您可以在其中设置操作的目标组件类型;以及 name,它将事件绑定到目标。

引用 (References)。 单击“配置 (Config)”中“引用 (References)”旁边的添加按钮以添加对控制器的引用,然后按照“配置 (Config)”中的说明输入引用的名称和选择器。单击检查器中的引用以在“配置 (Config)”中编辑这些值(名称包含在 ref 配置中)。您应该使用应用程序中视图组件的确切名称作为名称和选择器,以便仅引用该特定视图。

init。 单击“配置 (Config)”中“init”旁边的添加按钮以向控制器添加 init 函数。init 函数设置控制器如何与视图交互,并且通常与另一个控制器函数(control)结合使用。Control 帮助控制器监听事件并使用处理程序函数执行某些操作。双击检查器中的 init 函数以打开 Architect 代码编辑器并添加向 init 添加功能所需的代码,包括 control 和其他函数。

onLaunch。 单击“配置 (Config)”中“操作 (Actions)”旁边的添加按钮以向控制器添加 onLaunch 函数。双击检查器中的 onLaunch 函数以打开 Architect 代码编辑器并添加添加功能所需的代码。

路由 (Routes)。 单击“配置 (Config)”中“路由 (Routes)”旁边的添加按钮以添加路由,然后在检查器中选择以查看可用配置。这些用于指定控制器感兴趣的路由,这在应用程序中提供历史记录支持以及深度链接到我们提供路由的应用程序的任何部分的能力。

其他可用配置

Architect 还为控制器提供以下配置。通常,应用程序的这些部分是在应用程序级别设置的。您仅在希望它们仅对特定控制器可用而不希望在应用程序级别可用的情况下才为控制器设置它们

函数 (Functions)。 单击“配置 (Config)”中“函数 (Functions)”旁边的添加按钮以向控制器添加函数。在检查器中选择函数以在配置面板中查看所有函数配置。

模型 (Models)。 将模型绑定到控制器。添加到项目中的模型的名称在“配置 (Config)”右侧的“值 (Value)”字段中显示为滚动列表;通过单击字段(默认情况下包含文本“(无) (none)”)打开列表。

Store (Stores)。 将 store 绑定到控制器。添加到项目中的 store 的名称在“配置 (Config)”右侧的“值 (Value)”字段中显示为滚动列表;通过单击字段(默认情况下包含文本“(无) (none)”)打开列表。

视图 (Views)。 将视图绑定到控制器;只能选择顶级视图。项目顶级视图的名称在“配置 (Config)”右侧的“值 (Value)”字段中显示为滚动列表;通过单击字段(默认情况下包含文本“(无) (none)”)打开列表

其他资源

有关在 Architect 中使用控制器的更多详细信息,请参阅以下内容

Architect 4.3