Question

使用ExtJS 5.1.0和我偶然发现了这篇博文：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'）的处理程序引用没有向控制器注册（得到“无方法”错误），尽管从不同的Ext.form.Panel可以正常工作。我在requires属性中定义了所需的控制器，甚至通过控制器参考引用了控制器。

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

{
    xtype: 'criteriaGrid'
}

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

Answer 1

将defaultListenerScope设置为false。

defaultListenerScope : false

这就是API doc所说的 - defaultListenerScope

如果为true，则此组件将成为默认范围（此指针）用字符串名称指定的事件，以便范围可以动态解决。该组件将自动成为如果指定了控制器，则为defaultListenerScope。

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

1 个答案: