Question

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.

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 );
}