javascript - 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):

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

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

对于此类用例有什么最佳实践吗？理想情况下，如果它可以在不同版本的 Ext JS 中工作，至少在 5.x 和 6.x 中

在子进程中附加一个处理程序并访问其父进程？ child 不应该依赖 parent 。只有 parent 应该知道，该怎么做。

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在表格上为真。这样监听器函数将是 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');
    }
});

这是两种方法的有效 fiddle :https://fiddle.sencha.com/#view/editor&fiddle/27un