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'...)？

我使用this question作为事件的常量引用，以及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 );
}

Answer 2

在激发应用程序范围的自定义事件方面，现在有一种新方法在ExtJS V5.1发布后使用Ext.GlobalEvents。

当你开火事件时，你这样做：

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

注册活动的处理程序时，请执行以下操作：

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

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

这是fiddle。

Answer 3

APPNAME.getApplication.fireEvent（）可在整个应用程序范围内使用。

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

3 个答案: