Ext Js将父容器中的事件处理程序附加到其子项

Question

组件定义：

Ext.define('Retroplanner.view.dimension.DimensionMapping', {
alias: 'widget.dimensionMapping',
extend: 'Ext.form.Panel',
...
items: [{
xtype: 'combo'
}, ...
]

子项的"select"处理程序必须创建一个小部件，并将此小部件添加到其父项的items数组中。

在这个子项的内部，它是"选择"处理程序，我可以通过一些搜索技术找到它的父项。但如果可能的话，我想避免。我也没有父级的引用变量。

更好的方法是在父项中创建函数，并以某种方式将其附加到子项：

Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
onSiRemoteCombo: function(cmb, rec, idx) {
alert("select handler");
var newItem = Ext.widget('somexType');
this.items.add(newItem);
}

问题是，如何连接onSiRemoteCombo？

我在这里找到了一个类似的解决方案：如何为子组件的自定义事件创建侦听器

首先，它对我不起作用。我可以举一个我试图使用的完整例子。第二，我想通过最常见的方式/在公共位置创建项，而不是通过initComponent方法。我想要一些类似的东西：

Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
afterRender: function() {
var me = this;
//exception here
//Uncaught TypeError: Cannot read property 'on' of undefined
me.items[0].on('select', onSiRemoteCombo, this);
},
items: [{
xtype: 'combo'
}, ...
],
onSiRemoteCombo: function(cmb, rec, idx) {
alert("Ttt");
var dimensionMapping = Ext.widget('propGrid');
this.getParent().add(dimensionMapping);
}

但我有一个例外：

//exception here
//Uncaught TypeError: Cannot read property 'on' of undefined
me.items[0].on('select', onSiRemoteCombo, this);

而且，在每次渲染后都附加一个侦听器，这真的是个坏主意。

对于这样的用例，有什么最佳实践吗？理想情况下，如果它能在不同版本的ExtJS中工作，至少在5.x和6.x 中是这样

在子对象中附加处理程序并访问其父对象？孩子不应该依赖父母。只有家长才应该知道，该怎么办。

Answer 1

解决此问题的一种方法是将组合项组件初始化封装到表单的initComponent方法中。这样，在为组合设置侦听器时，可以使用this.formMethod引用表单方法。这里有一些代码：

Ext.define('Fiddle.view.FirstForm', {
extend: 'Ext.form.Panel',
bodyPadding: 15,
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: 'combo',
fieldLabel: 'First Combo',
store: ['first', 'second'],
listeners: {
'select': this.onComboSelect
}
}]
});
this.callParent();
},
onComboSelect: function () {
alert('I am a first form method');
}
});

第二种方法是在组合中使用字符串侦听器，并在窗体中将defaultListenerScope设置为true。这样，侦听器函数将解析为窗体的方法。再次，一些代码：

Ext.define('Fiddle.view.SecondForm', {
extend: 'Ext.form.Panel',
bodyPadding: 15,
defaultListenerScope: true,
items: [{
xtype: 'combo',
fieldLabel: 'Second Combo',
store: ['first', 'second'],
listeners: {
'select': 'onComboSelect'
}
}],
onComboSelect: function () {
alert('I am a second form method');
}
});

这是两种方法的一个有效组合：https://fiddle.sencha.com/#view/editor&小提琴/27un