Multiple Ext.Applications (Big Applications)

[steffenk]

from organize point of view, the multi-app approach is much better, as each sub-app is bundled together.

This is the same as you now from other application having multiple modules, each module is in one folder and is an application by it's own. So it does not collidate with the MVC concept.

[Fredric Berling]

You are right Steffen. Is not the new Application instance itself that is interesting. Its being able to dynamicall load separate MVC structures. An ApplicationModuleManager would be interesting.

[steffenk]

Fredric, i looked to your simple testcase. it won't work again after closing the window.

My approach would be, like your suggested ModuleManager, to have a factory class which stores instances of apps, and create the app on the fly if not instanciated yet. That sounds like a doable solution.

[Fredric Berling]

Yes i noticed that. Didnt give it too much thought in the example.

To create a Module Object we just need to return it to the ModuleManager. It do return the complete Application instance.

Ext.ModuleManager.add('MYAPP', Ext.create(...)...)...

Something like that?

[steffenk]

not really, with Ext.create you already create an instance.

Register should be something like

MyApp.ModuleManager.register('MyApp.application.App1', 'application/app1/app.js');

In app1/app.js there would be an Ext.define of he module application, and if you need it you ask ModuleManager like

//app1 is the alias for this application, MyApp1 the name
var app = MyApp.ModuleManager.createApplication('app1', 'MyApp1', config).launch();

where this is done:

createApplication: function(alias, name, config) {
  var app = this.appCollection.findById(name);
  if (app) {
    return app;
  } else {
    var nameConf = {name: name};
   return Ext.create(alias, nameConf, config || {});
  }
}

note that this is pseudo code, but should be obvious how this would work
Didn't thought much about the params now, but we'll see in practise.

[Fredric Berling]

Ok.. I see your point Steffen.

I will see what i can do with that.

Could someone at Sencha correct us if we are way off here?. Certantly this must have been discussed in the Redwood office at some point :-). Is there another plan for packages/modules ?

[stevil]

Is there another plan for packages/modules ?

Was posting with Jacky about the fact that the class loader didn't support aliases (can't dynamically load a class by alias alone - as in xtype in a config), but he did mention a "unified factory pattern" as a possible future design concept. Not sure if that has relevance to your situation, but it got my attention.

stevil

[Fredric Berling]

Ive been doing some more testing and this is probably the approach i will go for at this point.

We want this structure:



In the main app you tell the loader where to find you different "sub-apps" (lets call them Apps)

// Points out in wich directory each namespace belongs. Here i use one directory per "App". 
Ext.Loader.setPath('App1','Applications/APP1')
Ext.Loader.setPath('App2','Applications/APP2')
Ext.Loader.setPath('App3','Applications/APP3')

Ext.application({
    name: 'Portal',
    appFolder: 'Portal',
   	controllers:[
		'Main'
	],
	launch:function(){
		Portal.app = this  //Added for global reference to application instance. (This should be possible to do smarter)
	
	}
});

I then use a special extend for a panel , wich i use as the front page for each app. Its basically a panel where you can use the controllers array (much like in the Ext.application)

/**
* @class Portal.lib.panel.AppPanel
*
* Special panel to use when your panel uses controllers. 
* On render the controllers array will be processed and each controller instance will be added and initiated into the
* main Ext.applications controllers array.
*
* @namespace Portal.lib.panel
* @author Fredric Berling
*/

Ext.define('Portal.lib.panel.AppPanel' , {
	extend	: 'Ext.panel.Panel',
	//Array of controllers used in this xtype (string)
	controllers:[],
	initComponent: function(){
        this.callParent(arguments);
        this.on('afterrender', this.registerControllers, this);
    },
    registerControllers: function(){
        //Instanciate the controllers into the global Applications controllers array
        Ext.each(this.controllers, function(control){
            var controller = Portal.app.controllers.get(control);
            if (!controller) {
                controller = Ext.create(control, {
                    application: Portal.app,
                    id: control
                });
                Portal.app.controllers.add(controller);
            }
       		controller.init(); //Run init on the controller         
        }, this);
    }
	
});

So every app panel is extended from this class and thus gets the possibility to use thir own controllers.

A simple implementation would look like this

Ext.define('App2.view.ui', {
    extend: 'Portal.lib.panel.AppPanel',  
    alias:'widget.APP2',
    title: 'Application 2',
    controllers: ['App2.controller.Main'],
    items:[ .... ]	
    }]
    
});

This basically gives you this:

When you instanciate a panel of type Portal.lib.panel.AppPanel it will automatically register the named controllers in the Ext.app.Application controllers collection, and directly after that fire off the controllers init() function.

Files needed will be loaded automatically when you instanciate the AppPanel.

What is needed in this point is a smart way to unregister the controllers listeners when you destroy the AppPanel. Any suggestions here.

I have included a fully working easy example to paste into you examples folder. Its a portal with three buttons who start up applications with their own MVC structure and controllers.

[Fredric Berling]

Example does not work right now. Ext JS 4.0.1 changed the autoCreateViewport config default value to false.

Just add this line in main apps.js

autoCreateViewport:true

[mrdanger]

Thanks for your example. This ist the solution i prefer.
Now i want to implement the Desktop-Application as Main-Application.