Firing application wide events from button handlers

问题

I have this gridPanel:

Ext.define('BM.view.test.MacroList', {
extend: 'BM.view.GridPanel',
alias:'widget.macro-test-list',

store: 'Tests',

initComponent: function() {

    this.columns = [
        {
            xtype:'actioncolumn',
            width:50,
            items: [
            {
                icon: 'images/start.png',
                tooltip: 'Start Test',
                handler: function(grid, rowIndex, colIndex) {
                    this.application.fireEvent('testStart', grid.getStore().getAt(rowIndex)); 
                // application not defined here because 'this' is the button.
                }]
     }]
}
}

stratTest is a function that will be available from many places in the application, and I would like it to be used as an application wide event, but those seem to be available only from controllers.
How do I call .application.fireEvent('testStart'...) from the handler inside this button?

I'm using this question as a constant reference to events, and the Sencha docs, but couldn't find the answer.

回答1:

You get this.application within a controller scope.

Given you are clearly using MVC here, I'd say it's best to stick to MVC concepts; that is, for reusability sake, a component shouldn't know what controller uses it, but rather a controller should know what components it is using.

So you should really listen to the event in the controller, and fire an application event from there.

The problem is that there's no access to the actioncolumn handler from the controller (it is called internally in Ext.grid.column.Action processEvent()).

So your best shot is to fire a new event in the view:

this.columns = [
    {
        xtype:'actioncolumn',
        ...
        items: [
        {
            ...
            handler: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
                this.fireEvent( 'columnaction', aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord); }
        }]
 }]

Notice also that you can define a global handler for the column, like so:

this.columns = [
    {
        xtype:'actioncolumn',

        handler: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
            this.fireEvent( 'columnaction', aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord); }

        ...
        items: [
        {
            ...
        }]
 }]

And then catch this event in the controller.

init: function() {
    this.control({
        'macro-test-list actioncolumn':{
            columnaction: this.onAction
        }
    });
},

onAction: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
    this.application.fireEvent( 'testStart', aGrid.getStore().getAt( aRowIndex ) );
}

Notice, by the way, that given what you are trying to do, a cleaner code would be:

onAction: function( aGrid, aRowIndex, aColIndex, aItem, aEvent, aRecord ) {
    this.application.fireEvent( 'testStart', aRecord );
}

回答2:

In terms of firing application-wide custom events, there is a new method now after ExtJS V5.1 is published, which is using Ext.GlobalEvents.

When you fire event, you do this:

Ext.GlobalEvents.fireEvent('custom_event',args); 

When you register a handler of the event, you do this:

var obj = Ext.create('Ext.form.Panel', {
  // ....
});
Ext.GlobalEvents.on('custom_event', function(arguments){
  /* handler codes*/
}, obj}; 

This method is not limited to controllers. Any component can handle a custom event through putting the component object as the input parameter scope.

Here is a fiddle.

回答3:

APPNAME.getApplication.fireEvent() is available application-wide.

来源：https://stackoverflow.com/questions/12234747/firing-application-wide-events-from-button-handlers