文档帮助

内容

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

术语、图标和标签

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

访问级别

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

Public类和类成员可供任何其他类或应用程序代码使用，并且可以依赖它们在主要产品版本中保持稳定和持久。Public 类和成员可以通过子类安全地进行扩展。
Protected类成员是稳定的public成员，旨在供拥有类或其子类使用。Protected 成员可以通过子类安全地进行扩展。
Private类和类成员由框架内部使用，不供应用程序开发人员使用。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 方法调用成功，方法可能返回一个组件，如果失败则返回 false，将显示为 Ext.Component/Boolean）。
标志 - 适用于成员的任何标志将显示在旁边（本例中为 PROTECTED - 请参见下面的标志部分）
成员来源 - 在成员行的右侧是最初描述成员的类（本例中为 Ext.container.Container）。如果成员来自当前类，则源类将显示为蓝色链接；如果成员是从祖先或混合类继承的，则显示为灰色。
成员源 - 在成员来源类的右侧下方是一个查看成员源的链接（本例中为 查看源）
参数列表 - 类方法的每个参数都将使用圆括号中上面找到的相同名称、预期的类或对象类型以及参数的描述（本例中为 item : Object）列出。
返回 - 如果类返回除 undefined 之外的值，“返回”部分将注明返回的类或对象类型以及描述（本例中为 Ext.Component）
自（示例中未显示） - 某些成员将在成员描述后显示产品首次引入成员的版本（即 自 3.4.0 起可用 - 示例中未显示）
默认（示例中未显示） - 配置通常显示要应用于类实例的默认配置值，前提是未覆盖（即 默认为：false）

成员标志

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

必需 - 实例化类时的必需配置
可绑定 - 配置具有一个设置程序，允许通过 ViewModel 绑定设置此配置
只读 - 可以读取属性，但不能用于在运行时配置/重新配置类实例
单例 - 单例类在定义后立即实例化，并且不能手动实例化
静态 - 静态方法或属性是属于类本身的方法或属性，而不是类的实例
可链接 - 指在调用时返回类实例的方法。
这支持链接方法调用，例如：classInstance.method1().method2().etc();
已弃用 - 计划在未来框架版本中删除的类或成员，并且在当前版本中提供以保持向后兼容性。
已弃用的类和成员将包含一条消息，指导您了解今后首选的类/方法。
已删除 - 仅在文档中作为框架版本之间升级的用户参考的已删除类或成员
模板 - 在基类中定义的方法，旨在由子类覆盖
抽象 - 类或成员可以定义为抽象。抽象类和成员建立类结构并提供有限的代码（如果有）。类特定代码将通过子类中的覆盖来提供。
可预防 - 标记为可预防的事件如果从事件处理程序返回 false，则不会触发

类图标

- 表示框架类

- 单例框架类。*有关更多信息，请参见单例标志

- 组件类型框架类（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 - 混合到当前类的类列表
继承的 Mixins - 混合到当前类祖先的类列表
需要 - 类的实例化所需的定义的所有类
使用 - 类在其生命周期中的某个时刻可能使用的类列表，但对于类的初始实例化并非必需
子类 - 扩展当前类的类

展开和折叠示例和类成员

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

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

桌面 -vs- 移动视图

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

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

查看类源

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

Ext JS 7.8.0

显示私有类

顶部

内容

什么是事件？监听事件稍后添加监听器移除监听器范围监听器选项监听事件一次使用缓冲区配置触发自定义事件监听 DOM 事件事件规范化

使用事件

Ext JS 的组件和类在其生命周期的不同点触发广泛的事件。事件允许你的代码对应用程序周围的变化做出反应。它们是 Ext JS 中的一个关键概念。

什么是事件？

每当你的某个类发生一些有趣的事情时，事件就会触发。例如，当 Ext.Component 渲染到屏幕时，Ext JS 会在渲染完成后触发一个事件。我们可以通过配置一个简单的 listeners 对象来监听该事件

展开代码

JS 运行

Ext.create('Ext.Panel', {
    html: 'My Panel',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            Ext.Msg.alert('Success!', 'We have been rendered');
        }
    }
});

在此示例中，当你单击“预览”按钮时，面板会渲染到屏幕，然后显示定义的警报消息。类触发的所有事件都列在类的 API 页面中 - 例如，Ext.panel.Panel 当前有 45 个事件。

监听事件

虽然 Ext.Component#event-afterrender 在某些情况下很有用，但你可能更频繁地使用其他事件。例如，Ext.button.Button 在单击时触发单击事件

展开代码

JS 运行

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            Ext.Msg.alert('Success!', 'I was clicked!');
        }
    }
});

一个组件可以包含任意数量的事件监听器。在以下示例中，我们通过在 mouseover 监听器中调用 this.hide() 来混淆用户，以隐藏按钮。然后我们在一秒钟后再次显示按钮。当调用 this.hide() 时，按钮被隐藏并且触发 hide 事件。hide 事件触发我们的 hide 监听器，该监听器等待一秒钟并再次显示按钮

展开代码

JS 运行

Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button',
    listeners: {
        mouseover: function() {
            this.hide();
        },
        hide: function() {
            // Waits 1 second (1000ms), then shows the button again
            Ext.defer(function() {
                this.show();
            }, 1000, this);
        }
    }
 });

每次触发事件时都会调用事件监听器，因此你可以根据需要继续隐藏和显示按钮。

稍后添加侦听器

在之前的示例中，我们在实例化类时将侦听器传递给组件。但是，如果我们已经有一个实例，我们可以使用 on 函数添加侦听器

展开代码

JS 运行

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button'
});

button.on('click', function() {
    Ext.Msg.alert('Success!', 'Event listener attached by .on');
});

你还可以使用 .on 方法指定多个侦听器，类似于使用侦听器配置。以下内容重新审视了上一个示例，该示例使用鼠标悬停事件设置按钮的可见性

展开代码

JS 运行

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button'
});

button.on({
    mouseover: function() {
        this.hide();
    },
    hide: function() {
        Ext.defer(function() {
            this.show();
        }, 1000, this);
    }
});

删除侦听器

就像我们可以在任何时候添加侦听器一样，我们也可以删除它们。这次我们使用 un 函数。要删除侦听器，我们需要引用其函数。在之前的示例中，我们将一个函数传递到侦听器对象或 on 调用中。这次，我们提前创建函数并将其链接到名为 doSomething 的变量中，其中包含我们的自定义函数。由于我们最初将新的 doSomething 函数传递到侦听器对象中，因此代码从之前开始。随着最终添加 Ext#method-defer 函数，在前 3 秒内单击按钮将产生警报消息。但是，3 秒后侦听器将被删除，因此不会发生任何事情

展开代码

JS 运行

var doSomething = function() {
    Ext.Msg.alert('Success!', 'listener called');
};

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'My Button',
    listeners: {
        click: doSomething,
    }
});

Ext.defer(function() {
    button.un('click', doSomething);
}, 3000);

范围侦听器选项

范围设置处理程序函数中 this 的值。默认情况下，这将设置为触发事件的类的实例。这通常（但并非总是）是你想要的功能。此功能允许我们在本指南前面的第二个示例中调用 this.hide() 以隐藏按钮。在以下示例中，我们创建了一个按钮和一个面板。然后，我们使用在面板范围内运行的处理程序侦听按钮的单击事件。为此，我们需要传递一个对象而不是处理程序函数。此对象包含函数和范围

展开代码

JS 运行

var panel = Ext.create('Ext.Panel', {
    html: 'Panel HTML'
});

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me'
});

button.on({
    click: function() {
        Ext.Msg.alert('Success!', this.getXType());
    },
    scope: panel
});

如果侦听器没有相同的选项，或者如果你不了解整个简洁性，你还可以使用更详细的声明。

展开代码

JS 运行

var panel = Ext.create('Ext.Panel', {
    html: 'Panel HTML'
});

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me'
});

button.on({
    click: {
        scope: panel,
        fn: function() {
            Ext.Msg.alert('Success!', this.getXType());
        }
    }
});

当你运行此示例时，单击处理程序的 this 的值是对面板的引用。为了说明这一点，我们提醒作用域组件的 xtype。单击按钮时，我们应该看到面板 xtype 被提醒。

只侦听一次事件

你可能只想侦听一次事件。事件本身可能会触发任意次数，但我们只想侦听一次。以下代码说明了这种情况

展开代码

JS 运行

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me',
    listeners: {
        click: {
            single: true,
            fn: function() {
                Ext.Msg.alert('Success!', 'I will say this only once');
            }
        }
    }
});

使用缓冲区配置

对于在短时间内触发多次的事件，我们可以通过使用缓冲区配置来减少调用侦听器的次数

在这种情况下，无论你单击按钮多少次，按钮的单击侦听器每 2 秒只调用一次

展开代码

JS 运行

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Click Me',
    listeners: {
        click: {
            buffer: 2000,
            fn: function() {
                Ext.Msg.alert('Success!', 'I say this only once every 2 seconds');
            }
        }
    }
});

触发自定义事件

通过使用事件名称调用 fireEvent 来触发您自己的事件。在以下示例中，我们触发了一个名为 myEvent 的事件，该事件传递两个参数 - 按钮本身和 1 到 100 之间的随机数

展开代码

JS 运行

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: "Just wait 2 seconds",
    listeners: {
        myEvent: function(button, points) {
            Ext.Msg.alert('Success!', 'myEvent fired! You score ' + points + ' points');
        }
    }
});

Ext.defer(function() {
    var number = Math.ceil(Math.random() * 100);

    button.fireEvent('myEvent', button, number);
}, 2000);

我们再次使用 Ext.defer 来延迟触发自定义事件的函数，这次延迟 2 秒。当事件触发时，myEvent 侦听器会拾取它并显示我们传入的参数。

侦听 DOM 事件

并非每个 ExtJS 组件都会引发每个事件。但是，通过定位容器的元素，我们可以附加许多本机事件，然后组件可以侦听这些事件。在此示例中，我们定位 Ext.container.Container。容器没有单击事件。让我们给它一个！

展开代码

JS 运行

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    html: 'Click Me!',
    listeners: {
        click: function(){
            Ext.Msg.alert('Success!', 'I have been clicked!')  
        }
    }
});

container.getEl().on('click', function(){ 
    this.fireEvent('click', container); 
}, container);

如果没有第二块代码，容器的单击侦听器将不会触发。由于我们已经定位了容器的元素并附加了单击侦听器，因此我们已经扩展了容器的事件功能。

事件规范化

事件规范化是允许 Ext JS 5+ 应用程序在触摸屏设备上运行的关键。此规范化在后台发生，是将标准鼠标事件简单地转换为等效的触摸和指针事件。

指针事件是 w3c 标准，用于处理针对屏幕上特定坐标集的事件，而不管输入设备（鼠标、触摸、手写笔等）如何。

当您的代码请求鼠标事件的侦听器时，该框架会根据需要附加类似的触摸或指针事件。例如，如果应用程序尝试附加 mousedown 侦听器

myElement.on('mousedown', someFunction);

事件系统会将其转换为 touchstart，以支持触摸事件的设备

myElement.on('touchstart', someFunction);

或者，pointerdown，以支持指针事件的设备

myElement.on('pointerdown', someFunction);

此转换已到位，以便您无需任何其他编码即可实现平板电脑和触摸屏支持。可以使用 translate 事件选项禁用转换

myElement.on({
    mousedown: someFunction,
    // only listen to mousedown.  Do not call the handler in response to touchstart or pointerdown.
    translate: false
});

内容

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和筛选器

API 文档类元数据

展开和折叠示例和类成员

桌面 -vs- 移动视图

查看类源

Ext JS 7.8.0

内容

使用事件

什么是事件？

监听事件

稍后添加侦听器

删除侦听器

范围侦听器选项

只侦听一次事件

使用缓冲区配置

触发自定义事件

侦听 DOM 事件

事件规范化

更多事件

Ext JS 7.8.0