文档帮助

内容

术语、图标和标签 访问级别 成员类型 成员语法 成员标志 类图标 成员图标 导航和功能 类成员快速导航菜单 Getter 和 Setter 方法 历史记录栏 搜索和筛选器 API 文档类元数据 展开和折叠示例和类成员 桌面视图与移动视图 查看类源代码

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

Ext.container.Container
查看源代码
lookupComponent ( item ) : Ext.Component
受保护

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

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

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

参数

项目 :  对象

要添加的配置对象。

返回
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


顶部

内容

package.json 文件 定义文件 必需属性 可选属性 toolbox 属性 configs config 类型 listener 对象

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 数组 列出包的自定义代码中所有类的数组。每个类的 .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 -- 扩展的别名；例如小部件封面流；这必须与此类的 src 文件中的 alias 行的内容相匹配。

可选属性

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

工具箱属性

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

属性 类型 说明
name string 工具箱中显示的用户友好名称
category string 扩展的类别。此扩展在工具箱中显示的类别。“扩展”始终添加到此值，以便所有用户扩展组件都显示在扩展类别下；您还应提供适当的功能类别，例如“容器”或“按钮”。要在此类别的多个类别中显示此类，请填充与示例中“组”显示类似的数组。
groups 字符串数组 过滤器组数组。这定义了此类在工具栏右列中列出的组。这可以是工具箱中默认存在的组或新组

configs

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

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

config types

类型 说明
数组 允许用户输入数组文字 - 这可以在代码编辑器中编辑
布尔值 向用户显示一个复选框以存储真/假值。
controller 向用户显示可用控制器列表
date 向用户显示日期选择器，仅接受格式化的日期作为有效值。
function 向用户显示使用代码编辑器编写函数的能力 
        {
            name: 'myFunction',
            type: 'function',
            params: [{
                name: 'first'
            },{
                name: 'second'
            }]
        }
model 向用户显示可用模型列表
number 类似于“字符串”，但仅允许数值输入
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 向用户显示一个简单的文本输入框
template 允许用户添加和编辑 XTemplate 对象作为配置
typedarray 允许用户指定可以添加特定类型的多个项目（例如多个模型），例如 
    {
        "name": "typedArrayOfModels",
        "type": "typedarray",
        "memberConfig": {
            "type": "model",
            "confirmDelete": false
        }
    }
uri 类似于字符串，具有自动 URL 编码任何设置值（例如将空格字符转换为 %20）的附加功能
view 向用户显示可用视图列表

侦听器对象

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

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

当前支持以下事件侦听器

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

Architect 4.3