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

Question

A component definition:

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

A ' select ' handler of the child item must create a widget and add this widget to the items array of its parent.

Inside of this child item, it its 'select' handler, I can find its parent by some search techniques. But I would like to avoid it if it is possible. I do not have a reference variable to the parent neither.

A better approach would be - to create function in the parent, and attach it somehow to the child item:

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

The question, how to attach onSiRemoteCombo ?

I've found a similar solution here: How to create listener for child component's custom event

First, it does not work for me. I can give a full example that I tried to use. 2nd, I would like to create items via the most common way/in the common place, not via initComponent method. I would like to have something like:

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);
}

But I get an exception:

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

And also, attach a listener after each rendering, really is a bad idea.

Are there any best practices for such use cases? Ideally, if it will work in different versions of Ext JS, at least in 5.x and 6.x

Attach a handler in a child and access its parent? A child should not depend on its parent. Only parent should know, what to do.

Answer 1

One way to solve this is by wrapping the combo item component initialization into form's initComponent method. This way when setting a listener for the combo, you can use this.formMethod to reference a form method. Here is some code:

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');
    }
});

The second approach by using a string listener on the combo, and by setting defaultListenerScope to true on the form. This way the listener function will be resolved to the form's method. Again, some code:

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');
    }
});

And here is a working fiddle with both approaches: https://fiddle.sencha.com/#view/editor&fiddle/27un