10

At the moment our team evaluate possibility of converting large corporate web-application (kind of a ERP system, 600+ unique screens) using ExtJS for the front end. The application was build on our open sourced eludia engine

Our engine requires Model definition (it morphs database as you edit definition), have some kind of Controller (Content modules) and Presentation (Presentation modules with code that generates actual js+html mix)

Like some people from this thread our team has a problem:

We'd like to have Model and View in server side and just to send JSON-data to the front-end

Currently eludia core developers(=my team, we maintain both this application and eludia) have done some steps toward morphing engine to use ExtJS as front end

My team is considering:

  • continue using old Content modules as server side code
  • generating Model files for ExtJS on the fly using server-side Model definition,
  • converting Presentation modules to client-side ExtJS view modules, and write client-side controllers for each screen But now there is one more problem: ExtJS requires to enumerate all controllers in Ext.app.Application Every time a person writes new/ converts a screen from old engine he should add it to this list

Can Ext.app.Application.controllers ... be generated dynamically?

Therefore these questions, ordered by fuzziness:

  • Can you name any large enough (600+ screens, preferable open-sourced) MVC/non MVC application which uses ExtJS as front-end ?
  • Are we moving in the right way?

UPDATE

I should try to narrow question

One doesn't need to load all controllers at once during app startup?

What I trying to say, maybe it is possible to load controllers in a more 'dynamic' approach:

  • generate one controller js for opened screen
  • append new ones to Ext.app.Application.controllers whenever user does something (clicks a link, button, etc.): when new screen is needed
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
jonny
  • 1,326
  • 9
  • 44
  • 62
  • Controllers usually contains business logic, so how do you want to generate controllers in general way if your business logic is specific to your app? Or do you want to generate just CRUD operations for your models? If so, you can consider to create generic controller, which will work with different types of models. But if your controllers are different, then (if I understand you correctly) you need to load these controllers from the server via AJAX call, right? Please clarify. – Pavel Podlipensky Oct 28 '11 at 18:08
  • yes, I need to load these controllers from the server via AJAX call, not all at once – jonny Oct 29 '11 at 12:30

5 Answers5

6

The best way for you to use controller on-demand is to load them dynamically and create instances of controllers when needed. Also you need to put your controllers in separate js files, so the schema will be the following:

//let's say you need to use controller User:
var controller = ControllerManager.get('User');//I believe you have some controller manager, similar to Sencha's Ext.ControllerManager
if(controller){
//use it here
}
else {
  loadScript([url of your controller script], controllerLoaded);
}
...
function controllerLoaded(){
//create controller instance here if needed and use it then
}
...
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

UPDATE In order to integrate new controller into already running Ext.app.Application you need to extend Ext.app.Application and add the following method:

addController: function(name){
  //at this point your controller .js file should be already loaded into the DOM  
  var c = this.getController(name); //controller will be created automatically by name in this getter 
  //perform the same initialization steps as it would have during normal ExtJs process
  c.init(this);
  с.onLaunch(this);
}

Btw, instead of using custom method to load javascript file dynamically you can use ExtJs builtin method of Ext.Loader:

/**
         * Load a script file, supports both asynchronous and synchronous approaches
         *
         * @param {String} url
         * @param {Function} onLoad
         * @param {Object} scope
         * @param {Boolean} synchronous
         * @private
         */
        loadScriptFile: function(url, onLoad, onError, scope, synchronous)
Pavel Podlipensky
  • 8,201
  • 5
  • 42
  • 53
  • I know how to create/load contoller, I am just not sure how to 'plug it in' in running ExtJS application – jonny Oct 31 '11 at 15:12
6

Your best bet is to depend on Ext.Loader, but do not use loadScriptFile() method as suggested above.

Ext 4 introduces a class system. One of (many) benefits of that is dep-tree that allows you to manage all your inter-component dependencies and load classes as needed.

Here is how you initialize loader

Ext.Loader.setPath('App','/js/app');
Ext.Loader.setPath('WidgetsLibrary','/js/widgets');
Ext.Loader.setConfig({enabled: true});

Define a dynamically-loaded controller class:

Ext.define('App.controller.Menu', {
    extend: 'Ext.app.Controller',      // leave it as it is
    models: ['Event','User'],          // this assumes App.model.* prefix
    stores: ['Options','Permissions'], // this assumes App.store.* prefix
    views:  ['menu.Bar','SmartButton'],// this assumes App.view.* prefix
    requires: [
        'App.whatever.other.class',    // auto-load this class as a dependency
        'WidgetsLibrary.*',            // auto-load all classes in WidgetsLibrary
    ],

    init: function(){}

 // [...]

Now to dynamically-load your controller class (a mockup):

Ext.require(                   
    'App.controller.Menu',     // this auto-loads all dependencies 
    function(){ 
        // ... as soon as this class 
        //    and all its dependencies have loaded...
        var controller = Ext.create('App.controller.Menu');  // create an instance
        controller.init();                                   // launch init() method
    }
);

BONUS: by using class system and loader, you don't have to maintain your own controller collection and check if controller has been loaded or not. Just use Ext.ClassManager.isCreated() method described here.

if(Ext.ClassManager.isCreated('App.controller.Menu')){
    // ... controller has already been loaded and init ... 
}else{
    // we need to auto-load that controller using Ext.require()
}

More reading:

Artur Bodera
  • 1,662
  • 22
  • 20
1

We just went through this with our webapp. ~250 screens. Yes, we load our controllers dynamically.

Time to build a screen using Ext.JS is about 400% faster than using YUI, which was our previous platform. Nice bit was that we could keep the YUI Connect object which works with better efficiency than the Ext.JS version.

We have an App class that manages the loading and initializing of Ext.JS controllers. Here, we use the only other YUI class in our code which is YUI.get (YUI.get.script). Just make sure you don't load a controller twice in the same session.

I assume you want to dynamically load these controllers for loading time (which is what we struggled with initially too). EXTEND, EXTEND, EXTEND.

Ext.define('namespace.classname', {
{
    extend: 'Ext.form.panel',
    // your code here
}

This will lower your overall code downloading, and speed up the initialization.

Bradley
  • 2,071
  • 2
  • 21
  • 32
  • here is man doing something similar to what I want: http://stackoverflow.com/questions/6290729/how-to-use-ext-define-in-extjs4 good point, will look into it, thanks! – jonny Nov 02 '11 at 09:35
0

While I don't know if this will work (never tried), what I would look at is the Ext.app.Application.getController() method. From the api reference:

Returns instance of a controller with the given name. When controller doesn't exist yet, it's created.

So theoretically, you could call getController() with your dynamically defined controller and it will create it.

One side note that I learned while looking at Ext 4. Controllers can't fire events, so what you have to do to communicate between controllers is to fire events on the Application object, described in this post

KallDrexx
  • 27,229
  • 33
  • 143
  • 254
0

I asked the same kind of question here: http://www.sencha.com/forum/showthread.php?151220-Adding-controllers-views-dynamically-in-Ext-MVC-pattern

It doesn't seem like this is supported well in current Ext 4. I have since switched direction and am not using the MVC architecture that Ext provides, and instead am using the same techniques I used in Ext 3, which is adding/loading additional components on certain handlers (button or link clicks, hovers, searches, etc).

In my application, all my components are custom extensions of base Ext classes, and really end up acting a lot like a controller, with the superclasses being the view. For example, if I have an extension of Ext.panel.Panel, besides initial configuration of items and layout, I'm not doing anything that affects the view (that is all handled in the base class). Most of the class is attaching handlers and other things to the panel to provide application-specific behavior, which is basically the definition of a controller. It isn't perfect, but it is better than the current alternative, in my opinion.

If you want any examples of what I'm talking about, or have questions about my specific implementation, let me know and I'll be glad to assist.

Sean Adkinson
  • 8,425
  • 3
  • 45
  • 64