How to load sepereate Extjs application into another Extjs application

Question

I have a Parent ExtJs application where in which only one combo box with some values will be present. Each value in the combo box will pertain to seperate extjs application. i mean if we select any value from combo box, another seperate extjs application should be loaded in the screen. Please give some ideas to do this.

Answer 1

You can render a application to a HTML element. Create a container component in application A and render the viewport of application B to this element.

Launch App A:

Ext.application({
    name: 'AppA',
    extend: 'AppA.Application',
    // Add in one of your components a container with DOM id=DomIdOfElementInAppA
    autoCreateViewport: 'AppA.view.main.Main'
});

Launch AppB:

Ext.application({
    name: 'AppB',
    extend: 'AppB.Application',
    // Dont do this, we want to render the app to a custom container
    // autoCreateViewport: 'AppB.view.main.Main'
    launch: function ()
    {
        Ext.create('Bliss.view.main.Main', { renderTo:'DomIdOfElementInAppA' });
    }
});

Please consider to create convert App B into a component.