1

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.

Improve this question
1
  • In principle, one application can handle everything, what are you looking for with multiple applications? Commented Apr 21, 2024 at 18:31

2 Answers 2

Reset to default
1

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Oh, great, this approach is much more serious. Need to study it. Vielen Dank, mein Freund!
0

I managed to figure out this issue by rewriting Ext.application to class definitions extending Ext.app.Application like this:

Ext.application({ name : 'Parent app', launch : function() { Ext.define('ChildApp1', { extend: 'Ext.app.Application', name: 'ChildApp1', sayHello: function() { console.log('ChildApp 1'); } });

Now you can call various apps methods like this:

 const app1 = Ext.create('ChildApp1'); app1.sayHello();

Here is fiddle.

Also you can read some interesting information in old sencha forum thread.

UPDATE

If you use more than one application in DOM, your sub applications must not have Ext.container.Viewport as viewport (it is only one). Change it to Ext.container.Container:

From this:

Ext.application({ name: 'SubApp', requires: ['SubApp.view.Viewport'], mainView: 'Viewport',

to:

Ext.define('SubApp', { name: 'SubApp', extend: 'Ext.app.Application', requires: ['SubApp.view.ViewportContainer'], launch: function() { const viewportContainer = Ext.create('SubApp.view.ViewportContainer');
Improve this answer

2 Comments

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.
We really use this approach, it's just very difficult to draw the real picture in the fiddle. Child Apps are loaded as Ext.application via Ext.Loader.loadscript and are working fine. But I suspect that this is not quite right. Could you explain better your thought with a fiddle in the new answer on my question? My new approach with Ext.define suits me, but if yours works too, I'll accept it as the correct answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.