Handling event separately for multiple instances of a view

I have an ExtJS 5 MVVM designed application with a main tab panel in which we add multiple instances of a view (call it detailView)

The detailView has a number of different custom child components (derived from form panels, tab panels, etc.) that all define “loaddata” functions on their respective viewControllers which enabling them to load themselves based on a given record ID as input.

I would like to fire a single event to load the child components within a particular instance of a detailView tab.

I thought of using a global event. However, the load handlers of the child components in all detailView instances would then be called to handle this event (and maybe be required to check if the event pertains to its particular parent detailView). This seems superfluous.

Is there a way to target an event to the child components of a particular instance of the detailView?

While I could possibly invoke the child components’ load functions directly from a detailView function, I feel that using events provides better decoupling

Here is stripped down version of the code –

Code:

Ext.define('app.view.detailView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.detailview',
 
    requires: [
        'app.view.detailViewViewModel',
        'app.view.detailViewViewController',
        'app.view.TestChildPanel',
        'app.view.ChildTabPanel',
        'Ext.form.field.Text',
        'Ext.button.Button',
        'Ext.form.Panel',
        'Ext.tab.Panel'
    ],
 
    controller: 'detailview',
    viewModel: {
        type: 'detailview'
    }
    title: 'Detail View',
 
    items: [
        {
            xtype: 'textfield',
            anchor: '100%',
            fieldLabel: 'Label'
        },
        {
            xtype: 'button',
            text: 'ParentButton',
            listeners: {
                click: 'onButtonClick'
            }
        },
        {
            xtype: 'testchildpanel',
            listeners: {
                ChildButtonClicked: 'onFormChildButtonClicked'
            }
        },
        {
            xtype: 'childtabpanel'
        }
    ]
 
});
 
 
Ext.define('app.view.detailViewViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.detailview',
 
    onButtonClick: function(button, e, eOpts) {
        console.log('Parent Button Clicked');
 
        this.fireEvent('loaddata', this);
    }
});
 
 
 
 
Ext.define('app.view.TestChildPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.testchildpanel',
 
    requires: [
        'app.view.TestChildPanelViewModel',
        'app.view.TestChildPanelViewController',
        'Ext.button.Button'
    ],
 
    controller: 'testchildpanel',
    viewModel: {
        type: 'testchildpanel'
    },
    bodyPadding: 10,
    title: 'My Form',
 
    items: [
        {
            xtype: 'button',
            reference: 'childButton',
            text: 'ChildButton',
            listeners: {
                click: 'onButtonClick'
            }
        }
    ]
 
});
 
Ext.define('app.view.TestChildPanelViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.testchildpanel',
 
    listen: {
        controller: {
            '*': {
                loaddata: function(){
                            console.log('loaddata Handled by Child');
                        }
            }
        }
    },
 
    onButtonClick: function(button, e, eOpts) {
        console.log('Child Button Clicked');
        this.fireViewEvent('childButtonClicked', this);
    }
 
});

Handling event separately for multiple instances of a view