Ext.grid.Panel 中的事件处理程序

Question

使用 ExtJS 5.1.0，我偶然发现了这个博客 post：http://www.learnsomethings.com/2014/11/13/extjs-5-action-column-item-viewcontroller-handler-binding/ ...它在引用控制器方法时节省了大量的配置工作，因为我可以在我的控制器中引用方法无需控制器中的任何显式配置对象。我已经在我的应用程序中以多种形式使用它，没有任何问题。

所需要做的就是将方法名称添加到处理程序引用中，如下所示：

handler: 'methodReference'

瞧！

但是，现在我试图让它与以下 Ext.grid.Panel 一起工作，但没有成功：

Ext.define('cardioCatalogQT.view.grid.Criteria', {
    extend: 'Ext.grid.Panel',

    xtype: 'framing-buttons',
    store: 'Payload',

    controller: 'main-view',
    requires: [
        'cardioCatalogQT.view.main.MainController'
    ],

    columns: [
        {text: "Description", flex: 1, sortable: true, dataIndex: 'description'},
        {text: "Type", width: 120, sortable: true, dataIndex: 'type'},
        {text: "Operator", width: 120, sortable: true, dataIndex: 'comparatorSymbol'},
        {text: "Value", width: 120, sortable: true, dataIndex: 'value'}
    ],
    columnLines: true,
    selModel: {
        type: 'checkboxmodel',
        listeners: {
            selectionchange: 'onSelectionChange'
        }
    },

    // This view acts as the default listener scope for listeners declared within it.
    // For example the selectionModel's selectionchange listener resolves to this.
    defaultListenerScope: true,

    // This view acts as a reference holder for all components below it which have a reference config
    // For example the onSelectionChange listener accesses a button using its reference
    referenceHolder: true,

    onSelectionChange: function(sm, selections) {
        this.getReferences().removeButton.setDisabled(selections.length === 0);
    },

    // inline buttons
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: [{
            minWidth: 80,
            text: 'Execute',
            xtype: 'button',
            itemId: 'executeTest',
            handler: 'onExecuteClick'
        }]
        }, {
        xtype: 'toolbar',
        items: [{
            reference: 'removeButton',  // The referenceHolder can access this button by this name
            text: 'Remove Criterion',
            tooltip: 'Remove the selected item',
            iconCls: 'remove',
            disabled: false
        }]
    }],

    height: 300,
    frame: true,
    iconCls: 'icon-grid',
    alias: 'widget.criteriaGrid',
    title: 'Search',

    initComponent: function() {
        this.width = 750;
        this.callParent();
    }
});

在我停靠的 itms 中对 onExecuteClick (handler: 'onExecuteClick') 的处理程序引用没有向控制器注册（出现 "no method" 错误），尽管它在不同的 Ext.form.Panel.我在 requires 属性中定义了所需的控制器，甚至通过控制器引用引用了控制器。

我的所有表单和网格都在主视图中通过别名 xtypes 引用，如

{
    xtype: 'criteriaGrid'
}

并渲染得很好。唯一不起作用的是事件处理程序没有通过网格面板注册。如果需要，我总是可以为此创建一个 fiddle，但我认为我的问题和所需的行为非常清楚。

Answer 1

将 defaultListenerScope 设置为 false。

defaultListenerScope : false

这就是 API 文档所说的 - defaultListenerScope

If true, this component will be the default scope (this pointer) for events specified with string names so that the scope can be dynamically resolved. The component will automatically become the defaultListenerScope if a controller is specified.

Ext.grid.Panel 中的事件处理程序

event handler in Ext.grid.Panel

gridview

extjs

event-handling