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

Question

组件定义：

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

child 项的“select”处理程序必须创建一个小部件并将此小部件添加到其 parent 的 items 数组中。

在这个 child 项目中，它是它的 'select' 处理程序，我可以通过一些搜索技术找到它的 parent。但如果可能的话，我想避免它。我也没有 parent 的参考变量。

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

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

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

在 child 中附加处理程序并访问其 parent？ 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 to true on the form. This way the listener function will be 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

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

Ext Js Attach Event Handler In Parent Container To Its Child Item

javascript

extjs

event-handling

extjs6.2