ExtJS multiple child applications inside primary

I'm trying to use multiple Applications inside one parent Application.

Here is example fiddle like this:

Ext.application({
    name : 'Parent app',
    launch : function() {

        Ext.application({
            name: 'ChildApp1',
            sayHello: function(){
                console.log('ChildApp 1');
            }
        });

        Ext.application({
            name: 'ChildApp2',
            sayHello: function(){
                console.log('ChildApp 2');
            }
        });

But when I'm trying to interact between apps, it seems that last App rewrites whole primary namespace.

I am trying to dynamically access a specific App, but I get only the App created last.

const appName = 'ChildApp1';
Ext.app.Application.instance.getApplication(appName).sayHello(); // calls ChildApp2 method

How is it possible to dynamicly call (I don't know app name in advance) multiple applications methods from each other ?

Am I right with classes architecture/definition or not?

Further thoughts:

If I had looked more closely, the error is obvious, because the global variable Ext is redefined, and the last created variable overwrites everything that was before.

From what I see in your fiddle you could use a workspace with packages. It does not look like you are really using 2 Ext Applications. Unfortunately fiddle does not support custom packages.

Create a workspace

https://docs.sencha.com/cmd/7.7.0/guides/workspaces.html

sencha generate workspace /path/to/workspace

Create a Package

With a workspace you can add packages: https://docs.sencha.com/cmd/7.7.0/guides/cmd_packages/cmd_packages.html

sencha generate package common

Dynamic Package Loading

With packages you can use dynamic package loading: https://docs.sencha.com/cmd/7.7.0/guides/dynamic_package_loading.html

Explanation

A package can be a supplier of functionality, views, data, ... A package can be build just like an application, but you can bundle or import it with your main application.

Example Usecase

1. A workspace can hold several apps and packages. If you have several applications you can add your overrides into a base package, and require it for all your apps. This basically loads functionality.
2. If you build a dashboard and only want to load a certain part from the beginning, you can use packages to load them on the fly with the part of the application, you need on button press in the dashboard. This basically loads additional views on the fly.
3. A theme package overrides a given theme.