我最近开始学习 ExtJS，但无法理解如何处理事件。我没有任何以前版本的 ExtJS 的经验。
通过阅读各种手册、指南和文档页面，我已经知道如何使用它，但我不清楚它是如何工作的。我找到了几个 ExtJS 旧版本的教程，但我不确定它们在 ExtJS 4 中的适用性。
我特别关注诸如此类的“最后一句话”
例如，这个问题让我相信事件处理程序可以接收相当多的参数。我看过其他教程，其中处理程序只有两个参数。有什么变化？
让我们从描述 DOM 元素的事件处理开始。
首先，您不想直接使用 DOM 节点。相反，您可能希望使用Ext.Element界面。为了分配事件处理程序，Element.addListener和Element.on（这些是等效的）被创建。因此，例如，如果我们有 html：
<div id="test_node"></div>
我们想要添加click事件处理程序。
让我们检索Element：
var el = Ext.get('test_node');
现在让我们检查click事件的文档。它的处理程序可能有三个参数：
click( Ext.EventObject e, HTMLElement t, Object eOpts )
知道所有这些东西，我们可以分配处理程序：
// event name event handler
el.on( 'click' , function(e, t, eOpts){
// handling event here
});
小部件事件处理与 DOM 节点事件处理非常相似。
首先，widgets的事件处理是利用Ext.util.Observablemixin来实现的。为了正确处理事件，您的小部件必须包含Ext.util.Observable作为 mixin。Ext.util.Observable默认情况下，所有内置小部件（如 Panel、Form、Tree、Grid 等）都作为 mixin。
对于小部件，有两种分配处理程序的方法。第一个 - 是使用on方法（或addListener）。例如，让我们创建Button小部件并为其分配click事件。首先，您应该检查事件的文档以获取处理程序的参数：
click( Ext.button.Button this, Event e, Object eOpts )
现在让我们使用on：
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
});
第二种方法是使用小部件的侦听器配置：
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
listeners : {
click: function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
}
});
请注意，Button小部件是一种特殊的小部件。单击事件可以通过使用handler配置分配给这个小部件：
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
handler : function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
});
首先，您需要使用addEvents方法注册一个事件：
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
使用该addEvents方法是可选的。正如对此方法的评论所说，不需要使用此方法，但它为事件文档提供了位置。
要触发您的事件，请使用fireEvent方法：
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);
arg1, arg2, arg3, /* ... */将被传递给处理程序。现在我们可以处理您的事件：
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
// event handling here
console.log(arg1, arg2, arg3, /* ... */);
});
值得一提的是，在定义新小部件时，插入addEvents方法调用的最佳位置是小部件的initComponent方法：
Ext.define('MyCustomButton', {
extend: 'Ext.button.Button',
// ... other configs,
initComponent: function(){
this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
// ...
this.callParent(arguments);
}
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });
为了防止冒泡，您可以return false或使用Ext.EventObject.preventDefault(). 为了防止浏览器的默认操作使用Ext.EventObject.stopPropagation().
例如，让我们将单击事件处理程序分配给我们的按钮。如果没有点击左按钮，则阻止默认浏览器操作：
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});
除了上面非常好的答案之外，我想提到应用程序范围的事件，这在 MVC 设置中非常有用，可以实现控制器之间的通信。(extjs4.1)
假设我们有一个带有选择框的控制器 Station（Sencha MVC 示例）：
Ext.define('Pandora.controller.Station', {
extend: 'Ext.app.Controller',
...
init: function() {
this.control({
'stationslist': {
selectionchange: this.onStationSelect
},
...
});
},
...
onStationSelect: function(selModel, selection) {
this.application.fireEvent('stationstart', selection[0]);
},
...
});
选择框触发更改事件时，函数onStationSelect被触发。
在该函数中，我们看到：
this.application.fireEvent('stationstart', selection[0]);
这会创建并触发一个应用程序范围的事件，我们可以从任何其他控制器侦听该事件。
因此，在另一个控制器中，我们现在可以知道站点选择框何时被更改。这是通过收听完成的this.application.on，如下所示：
Ext.define('Pandora.controller.Song', {
extend: 'Ext.app.Controller',
...
init: function() {
this.control({
'recentlyplayedscroller': {
selectionchange: this.onSongSelect
}
});
// Listen for an application wide event
this.application.on({
stationstart: this.onStationStart,
scope: this
});
},
....
onStationStart: function(station) {
console.info('I called to inform you that the Station controller select box just has been changed');
console.info('Now what do you want to do next?');
},
}
如果选择框已更改，我们现在也触发onStationStart控制器中的功能Song......
从 Sencha 文档：
应用程序事件对于具有许多控制器的事件非常有用。不是在每个控制器中侦听相同的视图事件，而是只有一个控制器侦听视图事件并触发其他控制器可以侦听的应用程序范围的事件。这也允许控制器在不知道或依赖于彼此的存在的情况下彼此通信。
就我而言：单击树节点以更新网格面板中的数据。
感谢@gm2008 来自以下评论的更新 2016：
在触发应用程序范围的自定义事件方面，ExtJS V5.1发布后现在有一个新方法，它使用Ext.GlobalEvents.
当您触发事件时，您可以调用： Ext.GlobalEvents.fireEvent('custom_event');
当您注册事件的处理程序时，您会调用： Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);
这种方法不限于控制器。任何组件都可以通过将组件对象作为输入参数范围来处理自定义事件。
控制器事件侦听器的另一个技巧。
您可以使用通配符来监视来自任何组件的事件：
this.control({
'*':{
myCustomEvent: this.doSomething
}
});
只是想在上面的优秀答案中添加几便士：如果您正在使用 Extjs 4.1 之前的版本，并且没有应用程序范围的事件但需要它们，我一直在使用一种可能有帮助的非常简单的技术：创建一个扩展 Observable 的简单对象，并在其中定义您可能需要的任何应用程序范围的事件。然后，您可以从应用程序的任何位置触发这些事件，包括实际的 html dom 元素，并通过从该组件中继所需的元素来从任何组件侦听它们。
Ext.define('Lib.MessageBus', {
extend: 'Ext.util.Observable',
constructor: function() {
this.addEvents(
/*
* describe the event
*/
"eventname"
);
this.callParent(arguments);
}
});
然后，您可以从任何其他组件：
this.relayEvents(MesageBus, ['event1', 'event2'])
并从任何组件或 dom 元素触发它们：
MessageBus.fireEvent('event1', somearg);
<input type="button onclick="MessageBus.fireEvent('event2', 'somearg')">
还有两件事我觉得很有帮助，即使它们不是问题的一部分，真的。
您可以使用该relayEvents方法告诉组件侦听另一个组件的某些事件，然后再次触发它们，就好像它们源自第一个组件一样。API 文档给出了中继存储load事件的网格示例。在编写封装多个子组件的自定义组件时非常方便。
另一种方式，mycmp即将封装组件接收到的事件传递给它的一个子组件subcmp，可以这样完成
mycmp.on('show' function (mycmp, eOpts)
{
mycmp.subcmp.fireEvent('show', mycmp.subcmp, eOpts);
});