从按钮处理程序触发应用程序范围的事件

Question

我有这个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是一个可以从应用程序中的许多地方获得的函数,我希望它可以用作应用程序范围的事件,但这些似乎只能从控制器中获得.
如何.application.fireEvent('testStart'...)从此按钮内的处理程序调用？

我正在使用这个问题作为事件的常量参考,以及Sencha文档,但找不到答案.

Answer 1

你进入this.application控制器范围.

鉴于你在这里明显使用MVC,我认为最好坚持使用MVC概念; 也就是说,为了可重用性,组件不应该知道控制器使用它,而是控制器应该知道它正在使用什么组件.

因此,您应该真正在控制器中监听事件,并从那里激活应用程序事件.

问题是无法从控制器访问actioncolumn处理程序(它在内部调用Ext.grid.column.Action processEvent()).

因此,您最好的方法是在视图中触发一个新事件:

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

另请注意,您可以为列定义全局处理程序,如下所示:

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

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

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

然后在控制器中捕获此事件.

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

顺便提一下,请注意,考虑到您要执行的操作,更清晰的代码将是:

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