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



使用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属性中定义了所需的控制器,甚至通过控制器引用引用了控制器。

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

{
xtype: 'criteriaGrid'
}

并且渲染得很好。唯一不起作用的是事件处理程序没有通过网格面板进行注册。如果需要的话,我总是可以为此制造麻烦,但我认为我的问题和期望的行为是非常清楚的。

将defaultListenerScope设置为false。

defaultListenerScope : false

这就是API文档要说的内容-defaultListenerScope

如果为true,则此组件将是使用字符串名称指定的事件,以便可以动态解析。该组件将自动成为defaultListenerScope(如果指定了控制器)。

相关内容

  • 没有找到相关文章

最新更新