事件
许多类在使用配置对象创建（实例化）类时使用快捷名称。快捷名称称为 alias（如果类扩展了 Ext.Component，则称为 xtype）。别名/xtype 列在适用类的类名旁边，以便快速参考。
框架类或其成员可以指定为 private 或 protected。否则，类/成员是 public。Public、protected 和 private 是访问描述符，用于传达如何以及何时应使用类或类成员。
Public 类和类成员可供任何其他类或应用程序代码使用，并且可以在主要产品版本中作为稳定和持久的内容被依赖。Public 类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public 成员，旨在由拥有类或其子类使用。Protected 成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用，不供应用程序开发人员使用。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();- 表示一个框架类
- 一个单例框架类。*有关更多信息，请参阅单例标志
- 组件类型的框架类（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 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“view source”链接来查看类成员的源代码。
Ext JS 的组件和类在其生命周期的各个阶段触发各种事件。事件允许您的代码对应用程序周围的变化做出反应。它们是 Ext JS 中的一个关键概念。
每当您的类发生有趣的事情时，都会触发事件。例如，当 Ext.Component 渲染到屏幕时，Ext JS 会在渲染完成后触发一个事件。我们可以通过配置一个简单的 listeners 对象来监听该事件
Ext.create('Ext.Panel', {
html: 'My Panel',
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert('Success!', 'We have been rendered');
}
}
});
在本例中，当您单击 预览 按钮时，Panel 会渲染到屏幕，然后显示定义的警报消息。类触发的所有事件都列在该类的 API 页面中 - 例如，Ext.panel.Panel 当前有 45 个事件。
虽然 Ext.Component#event-afterrender 在某些情况下很有用，但您可能会更频繁地使用其他事件。例如，Ext.button.Button 在单击时触发 click 事件
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 监听器，该监听器等待一秒钟并再次显示按钮
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 函数添加监听器
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 方法来指定多个监听器，类似于使用监听器配置。以下内容回顾了之前的示例，该示例使用 mouseover 事件设置按钮的可见性
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 秒后，监听器被移除，因此什么也不会发生
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);
Scope 设置处理程序函数内部 this 的值。默认情况下，this 设置为触发事件的类的实例。这通常（但不总是）是您想要的功能。此功能允许我们调用 this.hide() 以隐藏本指南前面第二个示例中的按钮。在以下示例中，我们创建一个 Button 和一个 Panel。然后，我们监听 Button 的 click 事件，处理程序在 Panel 的作用域中运行。为了做到这一点，我们需要传入一个对象而不是处理程序函数。此对象包含函数和作用域
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
});
如果您的监听器没有相同的选项，或者如果您不喜欢简洁，您也可以使用更详细的声明。
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());
}
}
});
当您运行此示例时，click 处理程序的 this 值是对 Panel 的引用。为了说明这一点，我们警告作用域组件的 xtype。当单击按钮时，我们应该看到 Panel xtype 被警告。
您可能只想监听一次事件。事件本身可能会触发任意次数，但我们只想监听一次。以下代码说明了这种情况
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');
}
}
}
});
对于短时间内多次触发的事件，我们可以减少我们的
监听器被调用的次数，方法是使用缓冲区配置。在这种情况下，我们按钮的 click 监听器每 2 秒仅调用一次，无论您单击多少次
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 之间的随机数
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 监听器会拾取它并显示我们传入的参数。
并非每个 ExtJS 组件都会触发每个事件。但是，通过定位容器的元素，我们可以附加许多本机事件，组件随后可以监听这些事件。在本例中，我们定位 Ext.container.Container。容器没有 click 事件。让我们给它一个！
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);
如果没有第二段代码，容器的 click 监听器将不会触发。由于我们已定位容器的元素并附加了 click 监听器，因此我们扩展了容器的事件功能。
事件规范化是允许 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
});
除了 DOM 事件和 Component 事件之外，Ext JS 还提供了一个强大的系统来识别有意义的手势，例如 pinch、rotate、drag 等。有关这些事件的更多信息，请参阅 Gestures 指南。
Ext JS | 使用条款