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？

我在这里找到了类似的解决方案：How to create listener for child component's custom event

首先，它对我不起作用。我可以举一个我尝试使用的完整示例。 第二，我想通过最常见的方式/在常见的地方创建项目，而不是通过 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);

而且，在每次渲染后附加一个监听器，确实是个坏主意。

对于此类用例是否有任何最佳做法？理想情况下，如果它可以在不同版本的 Ext JS 中工作，至少在 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。这样，侦听器函数将resolved 传递给表单的方法。再次，一些代码：

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&fiddle/27un