解释ExtJS 4事件处理

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

我最近开始学习ExtJS,并且很难理解如何处理事件。我对ExtJS以前的任何版本都没有经验。

通过阅读各种手册、指南和文档页面,我已经知道了如何使用它,但我不清楚它是如何工作的。我已经为ExtJS的旧版本找到了几个教程,但我不确定它们在ExtJS 4中的适用性。

我特别关注的是“最后一个词”

  • 事件处理函数传递哪些参数?是否有一套标准的ARG总是通过?
  • 如何为我们编写的自定义组件定义自定义事件?如何触发这些自定义事件?
  • 返回值(真/假)是否影响事件的气泡?如果没有,我们如何控制事件处理程序内部或外部的冒泡事件?
  • 是否有一种标准的方法来注册事件侦听器?
提问于
用户回答回答于

DOM节点事件处理

首先,不希望直接使用DOM节点。相反,你可能会想利用Ext.Element接口。为了分配事件处理程序,Element.addListener和Element.on

<div id="test_node"></div>

我们想要增加click事件处理程序。

我们去找Element:

var el = Ext.get('test_node');

现在让我们检查一下文档click事件。它的处理程序可能有三个参数:

单击(Ext.EventObject e,HTMLElement t,Object eOpts)

知道所有这些东西我们可以指派处理程序:

//       event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  // handling event here
});

小部件事件处理

小部件事件处理与DOM节点事件处理非常相似。

首先,小部件事件处理是通过使用Ext.util.Observable。为了正确地处理事件,小部件必须对Ext.util.Observable作为混音。所有内置小部件(如Panel、Form、Tree、Grid、都有Ext.util.Observable默认情况下作为混音。

对于小部件,有两种分配处理程序的方法。第一个是使用方法(或addListener)。例如,让我们创建Button小部件和分配click事件发生。首先,应该检查事件的文档以获得处理程序的参数:

单击(Ext.tton.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);
  }
});

自定义事件触发

首先,需要使用附加事件方法:

myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);

使用addEvents方法是可选的。正如对此方法的注释所述,没有必要使用此方法,但它提供了事件文档的位置。

若要启动事件,请使用火灾事件方法:

myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);

arg1, arg2, arg3, /* ... */将被传递给处理程序。

myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
  // event handling here
  console.log(arg1, arg2, arg3, /* ... */);
});

值得一提的是插入附加事件方法调用是小部件的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设置中,这些事件对于控制器之间的通信非常有用。

假设我们有一个带有选择框的控制器站(SenchaMVC示例):

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还有。

在触发应用程序范围内的自定义事件方面,现在有了一个新的方法。ExtJS V5.1 is published, which is using Ext.GlobalEvents

当触发事件时,可以调用:Ext.GlobalEvents.fireEvent('custom_event');

注册事件的处理程序时,可以调用:Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

此方法不限于控制器。任何组件都可以通过将组件对象作为输入参数作用域来处理自定义事件。

扫码关注云+社区