文档帮助

术语、图标和标签

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

访问级别

框架类或其成员可以指定为 private 或 protected。否则，类/成员为 public。Public、protected 和 private 是访问描述符，用于传达应如何以及何时使用类或类成员。

Public 类和类成员可供任何其他类或应用程序代码使用，并且在主要产品版本中可以作为稳定和持久的内容依赖。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public 成员，旨在由拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用，不供应用程序开发人员使用。私有类和成员可能会在任何时候更改或从框架中省略，恕不另行通知，并且不应在应用程序逻辑中依赖。

成员类型

Config - 类的配置选项。
Property - 在类实例化后设置。*请参阅下面的只读。
Method - 类可以执行的操作。方法应被视为实例方法，并且只能从给定类的实例调用。可以直接从类本身调用的静态方法将在方法名称旁边带有 static 标签。*请参阅下面的静态。
Event - 事件特定于框架事件系统，允许类以编程方式引发事件，以便由一个或多个事件处理程序方法处理。DOM 事件虽然由框架事件系统处理，但在 API 文档中没有具体描述。*对于 DOM 事件，请参阅 MDN 的事件参考页面。
Theme Variable - 框架采用的可视化主题引擎使用的变量。
Theme Mixin - 框架采用的可视化主题引擎使用的函数，可以使用在各种主题变量中设置的值。

成员语法

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

Ext.container.Container

查看源代码

lookupComponent ( item ) : Ext.Component

protected

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

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

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

参数

item : Object

正在添加的配置对象。

返回值

Ext.Component

要添加的组件。

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

展开/折叠 - 在成员行的左侧是一个控件，用于展开和折叠每个成员行以显示/隐藏成员详细信息。
成员名称 - 类成员的名称（在本例中为 lookupComponent）
方法参数 - 方法（或传递给事件处理程序方法）使用的任何必需或可选参数将列在方法名称旁边的括号内（在本例中为 ( item )）
返回类型 - 方法或属性返回的类实例或 javascript 对象（在本例中为 Ext.Component）。对于除了 undefined 之外不返回任何内容的方法，可以省略此项，或者可以显示为以正斜杠 / 分隔的多个可能值，表示返回的内容可能取决于方法调用的结果（即，如果 get 方法调用成功，则方法可能返回 Component，如果失败，则返回 false，这将显示为 Ext.Component/Boolean）。
标志 - 适用于成员的任何标志将显示在旁边（在本例中为 PROTECTED - 请参阅下面的标志部分）
成员来源 - 在成员行的右侧是最初描述成员的类（在本例中为 Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接；如果成员从祖先类或混合类继承，则显示为灰色链接。
成员源代码 - 在成员来源类的右侧下方是查看成员源代码的链接（示例中的 view source）
参数列表 - 每个类方法的参数将使用上面括号中找到的相同名称、预期的类或对象类型以及参数的描述列出（示例中的 item : Object）。
返回值 - 如果类返回除 undefined 之外的值，则“返回值”部分将注明返回的类或对象类型以及描述（示例中的 Ext.Component）
Since（示例中未显示）- 某些成员将显示该成员首次引入的产品版本（即 Available since 3.4.0 - 示例中未显示），紧随成员描述之后
Default（示例中未显示）- Config 通常显示要应用于类实例的默认配置值（如果未被覆盖）（即 Defaults to: false）

成员标志

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

Required - 实例化类时所需的配置
Bindable - 配置具有 setter，允许通过 ViewModel 绑定设置此配置
Read Only - 属性可以读取，但不能用于在运行时配置/重新配置类实例
Singleton - Singleton 类在定义后立即实例化，不能手动实例化
Static - 静态方法或属性是属于类本身的方法或属性，而不是类的实例
Chainable - 指的是在调用时返回类实例的方法。
这使得链式方法调用成为可能，例如：classInstance.method1().method2().etc();
Deprecated - 计划在未来框架版本中删除的类或成员，并在当前版本中提供以实现向后兼容性。
已弃用的类和成员将有一条消息，指示您将来首选的类/方法。
Removed - 已删除的类或成员，仅在文档中作为在框架版本之间升级的用户的参考而存在
Template - 在基类中定义的方法，旨在被子类覆盖
Abstract - 类或成员可以定义为抽象的。抽象类和成员建立类结构并提供有限的（如果有的话）代码。特定于类的代码将通过子类中的覆盖提供。
Preventable - 如果事件处理程序返回 false，则标记为可预防的事件将不会触发

类图标

- 表示框架类

- 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 原始类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

备用名称 - 一个或多个附加的类名称同义词（在 Ext JS 6.0.0 中，Ext.button.Button 类具有 Ext.Button 的备用类名称）。备用类名称通常为了向后兼容性而维护。
层次结构 - 层次结构视图列出了当前类的继承链，从祖先类一直到根基类。
Mixins - 混合到当前类中的类列表
Inherited Mixins - 混合到当前类的祖先中的类列表
Requires - 实例化类所需定义的所有类
Uses - 类在其生命周期中的某个时刻可能使用的类列表，但不是类最初实例化所必需的
Subclasses - 扩展当前类的类

展开和折叠示例以及类成员

可运行示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

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

桌面 -vs- 移动视图

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

全局导航将位于左侧的菜单中，可通过汉堡菜单图标访问。菜单包含以下内容（在大多数页面上）
- 当前产品的名称（作为指向产品着陆页的链接）
- 用于导航回文档主页的 Sencha 图标
- 产品菜单下拉按钮
- API 文档和指南的导航树选项卡
当前上下文导航和工具位于右侧，可通过齿轮图标访问。上下文菜单包含以下内容
- 全局搜索输入字段
- （API 文档）带有成员过滤器、“展开/折叠所有示例”按钮、“展开/折叠所有成员行”按钮、访问级别过滤器复选框以及每个成员计数的“过滤器”选项卡
- （API 文档）包含与当前类相关的元数据菜单的“相关类”选项卡
- （指南）指南的目录

查看类源代码

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

Architect 4.3

显示私有类

顶部

Architect 用户扩展中的文件和目录

默认情况下，已安装的 Architect 用户扩展 .aux 文件的文件位于 Documents/Architect/Extensions 目录下，并以扩展名命名。您可以通过转到“编辑菜单”>“Architect 设置”>“资产存储”部分>“扩展”来更改此目录。

用户扩展的每个版本都有自己的子目录，命名为 1.0、1.1 等等。

architect/            # JSON definition files for each of the UX classes
    Xx1.Definition.js # Definition file for the Xx1.Definition class
    Xx2.Definition.js # Definition file for the Xx2.Definition class
    ...
build.xml             # Generated file that controls how the UX is built
docs/
    package.png       # Graphic used on Sencha Market for this UX
    screenshots/
        pict.png      # Graphic used for Sencha Market
licenses/             # License agreement for this UX
        Readme.md
overrides/            # Contains any overrides that are required
package.json          # Describes the user extension package to be built
Readme.md             # Description of this UX used on Sencha Market
resources/            # Static resources used in this UX
        css/          # CSS resources for this UX
        images/       # Files for images used in this UX
sass/                 # SASS files used in this UX
    config.rb
    etc/              # General, non-component oriented SASS
    example/          
    Readme.md         # Information about this SASS
    etc/              # SASS files that must be used explicitly
    src/              # SASS sources that mimic the component-class hierarchy
                      # These files are gathered in a build of the CSS
                      # based on classes used by the build.
    var/              # Contains variable declaration files named by component class
src/                  # Javascript source files for each extension class
    xxxx.js
    yyyy.js

这些文件中的大多数是自动生成的。但是，您必须手动填写 package.json 文件中的信息，并为用户扩展中的每个类/组件创建和填充定义文件。

以下指南提供了有关这两个文件的完整参考信息，以及设置说明和指南

创建用户扩展.

package.json 文件

package.json 文件定义了用户扩展包的组装方式，指定了此包的版本号、可以使用的框架版本以及创建包所需的所有文件。

sencha generate 命令设置了一个骨架 package.json 文件

{
    "name": "DreidelExtension",
    "type": "code",
    "creator": "anonymous",
    "summary": "Short summary",
    "detailedDescription": "Long description of package",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "format": "1",
    "local": true,
    "css": [{
        path: "resources/css/dreidel.css"
    }],
    "requires": []
}

您必须手动编辑该文件以提供有关您的扩展的更多信息。字段定义为

字段	描述
name	用户扩展包的名称。此名称从 sencha generate 行提供的名称生成。它确定目录的名称，不应更改
type	必须为“code”。
creator	如果您想为此用户扩展署名，请在此处填写您的姓名。
summary	描述您的扩展的简短摘要，例如带有额外小部件的 Fancy Panel 组件。（保留供将来使用）
detailedDescription	更详细的扩展描述。（保留供将来使用）
version	此用户扩展版本的版本号。这是一个版本字符串，例如 1.1.2。当您创建新的用户扩展包时，Sencha Cmd 会自动将其设置为 1.0；您可以更改此数字以反映升级。
compatVersion	Architect 当前未使用。
local	有效值为“local”.
css	要从 src/css 文件夹加载的 CSS 文件数组，指定为对象，需要“path”属性。
requires	必须在加载用户扩展包中的任何类之前加载的类数组。这在您可能有一个大型库（您的扩展类依赖于该库）的情况下很有用。如果没有 requires，您的组件可能会在先决条件库完全加载之前尝试执行。

您还必须在 compatVersion 和 local 行之间添加一个 architect 部分。以下是 SchedulerGrid 用户扩展的示例，这是一个相当复杂的用户扩展，具有五个类和一些其他复杂性

"architect": {
    "defsonly": true,
    "compatFrameworks": [
        "ext42"
    ],
    "requires":[
        "sch-all-min.js"
    ],
    "classes": [{
        "definition": "ResourceModel.js",
        "className": "Sch.model.Resource",
        "js": ["ResourceModel.js"]
    },{
        "definition": "ResourceStore.js",
        "className": "Sch.data.ResourceStore",
        "js": ["ResourceStore.js"]
    },{
        "definition": "EventModel.js",
        "className": "Sch.model.Event",
        "js": ["EventModel.js"]
    },{
        "definition": "EventStore.js",
        "className": "Sch.data.EventStore",
        "js": ["EventStore.js"]
    },{
        "definition": "SchedulerGridPanel.js",
        "className": "Ext.ux.SchedulerGrid",
        "js": ["SchedulerGridPanel.js"]
    }]
},

字段定义为

字段	描述
defsonly	（可选）允许您为类指定定义，但不指定 JavaScript 文件。例如，Scheduler Grid 用户扩展有一个 `scheduler-grid-all.js`，它定义了五个类，每个类都有一个定义，但它们都定义了 `schedulergrid-all.js` 类已经处理的事情。
compatFrameworks	此用户扩展适用的框架版本。这表示为一个不带点的字符串，“ext42”。在此字符串中不能使用两位以上的数字；例如，如果您指定“ext421”，则包不会加载。用逗号分隔多个值。
requires	（可选）列出在执行此扩展中的任何类之前必须加载的任何类。
classes array	列出作为包自定义代码一部分的所有类的数组。每个类的 .js Javascript 源文件必须包含在 src 目录中，并且 architect 目录必须包含每个类的描述文件。
className	此类的完全限定类名。
definition	此类的定义文件的名称。定义文件必须包含在 architect 目录中。
js	src 文件夹中与此类对应的文件名数组；通常这只是一个文件。

所有字段都必须包含在文件中，尽管有些字段可能为空。

定义文件

定义文件定义了

扩展如何呈现给用户
向用户公开的配置
Sencha Architect 内的行为

您必须为您扩展中包含的每个类创建一个定义文件。该文件必须具有 .js 扩展名，并且名称中包含类名以及“Definitions”或“Def”字符串。

例如，如果您的扩展名为 FancyPants，则将定义文件命名为 FancyPantsDef.js。

所有定义文件都位于用户扩展项目目录的 architect 部分下。

package.json 文件标识了扩展中包含的每个类的定义文件。

定义文件示例为

{
    classAlias: "plugin.dragdropregion",
    className: "Ext.ux.DragDropRegion", 
    inherits: "abstractplugin",
    autoName: "MyDragDropRegion",
    validParentTypes:["abstractpanel"], 

    "toolbox": {
        "name": "Drag Drop Region",
        "category": "Containers",
        "groups": ["Containers","Views"]
    },

      configs: [{
        name: 'drag',
        type: 'boolean',
        hidden: false,
        initialValue: true
    },
    {
        name: 'drop',
        type: 'boolean',
        hidden: false,
        initialValue: true
    },
    {
        name: 'group',
        type: 'string',
        hidden: false,
        initialValue: 'ddg'
    },{
        name: 'notifyEnterCls',
        type: 'string',
        hidden: false,
        initialValue: 'highlightDropZone'
    },
    {
        name: 'dragLabel',
        type: 'string',
        hidden: false,
        initialValue: 'Untitled Region'
    },
    {
        name: 'frameSwapped',
        type: 'boolean',
        hidden: false,
        initialValue: 'true'
    },
    {
        name: 'frameColor',
        type: 'string',
        hidden: false,
        initialValue: '#99FF99'
    },
    {
        name: 'frameCount',
        type: 'number',
        hidden: false,
        initialValue: 2
    }]
}

下表描述了所有这些属性。

必需属性

属性	类型	默认值	描述
className	string	--	扩展的类名；例如，Ext.ux.Coverflow；这必须与此类 src 文件中 `extend` 行的内容匹配。
classAlias	string	--	扩展的别名；例如，widget coverflow；这必须与此类 src 文件中 `alias` 行的内容匹配。

可选属性

属性	类型	默认值	描述
inherits	string	Ext.Base	此类扩展的类。
autoName	string	--	用于在此类首次包含在项目中时自动生成名称的字符串；该名称显示在“项目检查器”和“代码编辑器”文件中。
toolbox	object	--	描述此组件如何在工具箱中显示的对象；请参见下文
configs	array of objects	--	配置对象数组
listeners	array of objects	--	Listener 对象数组。下面给出了对可用事件的更详细说明
validParentTypes	array of strings	所有父类型	此对象的有效父类型数组（使用与 xtype 对应的字符串）；如果此处列出了任何类型，则仅允许将此组件拖放到与此列表中类型之一匹配的组件上
validChildTypes	array of strings	所有子类型	此对象的有效子类型数组；如果此处列出了任何组件，则它们是唯一可以作为此组件子组件的组件类型
disableInitialView	boolean	false	如果为 true，则此组件不能显示为用户的初始视图
disableDuplication	boolean	false	如果为 true，则此组件不能被复制
hideConfigs	array of strings	--	要隐藏的配置数组。当您继承另一个定义并想要隐藏其某些配置时，这很有用。
showConfigs	array of strings	所有配置	要显示的配置数组。如果此处列出了任何配置，则仅显示这些配置。如果未指定此属性，则所有配置都将显示在“配置”面板中。

toolbox 属性

toolbox 属性是一个对象，用于描述此扩展在工具箱中的表示形式。

属性	类型	描述
name	string	工具箱中显示的易于理解的名称
category	string	扩展的类别。此扩展在工具箱中显示的类别。“Extensions”始终添加到此值，以便所有用户扩展组件都显示在“Extensions”类别下；您还应该提供适当的功能类别，例如“Container”或“Buttons”。要使此类显示在多个类别中，请填充类似于示例中为“groups”显示的数组。
groups	array of strings	过滤器组数组。这定义了此类在工具栏右列中列出的组。这可以是工具箱中默认存在的组，也可以是新组

configs

这包含一个配置对象数组，用于描述此组件支持的配置。除非将“hidden”属性设置为 true，否则此处列出的任何配置都可以在组件的“配置”面板中设置。

属性	类型	默认值	描述
name	string	--	要在“配置”面板中使用的显示名称。
type	--	--	此配置的类型（例如，boolean、string - 请参见下表）
bindable	boolean	false	为此配置启用绑定
hidden	boolean	false	如果设置为 true，则配置不会向用户显示
initialValue	--	--	在创建时自动设置的值。
defaultValue	--	--	配置的默认值
doc	string	--	在配置上显示文档图标，并带有定义的文本
editor	string	--	编辑器可以是“options”或“combo”，定义如下 { editor: 'options', options: ['top', 'bottom'] }
alternates	array	--	配置的备用类型，例如 { name: 'render', type: 'boolean', alternates:[{ type: 'object' }] }

config 类型

类型	描述
array	允许用户输入数组字面量 - 这将在代码编辑器中可编辑
boolean	向用户呈现一个复选框以存储 true/false 值。
controller	向用户呈现可用控制器的列表
date	向用户呈现日期选择器，仅接受格式化的日期作为有效值。
function	向用户提供使用代码编辑器编写函数的能力 { name: 'myFunction', type: 'function', params: [{ name: 'first' },{ name: 'second' }] }
model	向用户呈现可用模型的列表
number	类似于“string”，但仅允许数字输入
object	向用户提供使用代码编辑器编写对象字面量的能力
store	向用户展示可用商店的列表，该列表使用可选的 storeSelector 参数进行过滤，该参数通常具有以下值 'storeSelector': '' // When you want all types of stores (the empty string is important) 'storeSelector': 'treestore' // When you want store of type treestore 'storeSelector': 'calendar' // When you want calendar store 'storeSelector': ':not(treestore)' // This is default value
string	向用户展示一个简单的文本输入框
模板	允许用户添加和编辑 XTemplate 对象作为配置
类型化数组	允许用户指定可以添加特定类型的多个项目（例如，多个模型），例如 { "name": "typedArrayOfModels", "type": "typedarray", "memberConfig": { "type": "model", "confirmDelete": false } }
uri	类似于字符串，但增加了自动 URL 编码任何设置值的功能（例如，将空格字符转换为 %20）
视图	向用户展示可用视图的列表

监听器对象

这包含一个监听器名称/函数数组，用于在事件触发时调用。

属性	类型	默认值	描述
name	string	--	此对象的名称
fn	string	--	当观察到事件时要调用的函数

当前支持以下事件监听器

事件名称	回调参数
create	--
validate	--
cfgadd	cfg 名称
cfgchange	cfg 名称, newValue, oldValue
cfgchangecheck	cfg 名称, newValue, oldValue

目录

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例以及类成员

桌面 -vs- 移动视图

查看类源代码

Architect 4.3

目录

Architect 用户扩展中的文件和目录

package.json 文件

定义文件

必需属性

可选属性

toolbox 属性

configs

config 类型

监听器对象

Architect 4.3