ExtJS MVC conventions, naming and behavior

Question

Lately (2.x / 3.x) I just used xtype & factory methods to receive a instance of a class which was as simply as fast. Now I have started 4.x and my first App with MVC. As described in the tutorial the MVC pattern requires me to extend a class for each view I wan't to use, even if I use it just one time. But the best practice written by Sencha itself says:

just extend for re-useability or adding of functionality

In my case I need to register a whole bunch of classes even if they could be created from one base class except of some params like title, width,...

Another point is that the Controller overwrites any StoreId by convention and also requires a strict typing, means the class-name must end with an s. But as far as I know I cannot spare neither the model nor the store within the the controller store/model-array so is there any other point for this convention cause it seems not to spare typing.

Next point is that after merging from 3.X to 4.X the application initial load time has extended which seems to be caused due to either the many new classes that need to get defined or due to the fact that all controllers get instantiated at startup due to the default behavior of the MVC pattern. Is there any way to not auto instantiate a controller and just doing it lazy, for example when I request it on the application controller?

Yes I know, that are a bunch of questions but I guess they all around the same topic.

EDIT

After some sourcecode-digging I am no longer sure about the requirement of the s when naming a store. I thought I stumbled over this while going through the MVC tutorial. Can anyone verify this?

EDIT 2

My conclusions

Lacy rendering is quite simple. First of all the Controller should not be mentioned in the ApplicationController controller array. To create a instance of such a controller use the ApplicationController.getController(pureClassName) [Note that each controller contains a reference to the ApplicationController called application] Now you need to be aware of the fact that the init(application) method and the onLaunch(application) method get no longer invoked by the ApplicationController, you need to do this yourself. When calling getController() the ApplicationController first lookup if there is already a instance of this controller in the internal reference cache if not it creates a instance and inject the controllername as Id. So controllers are a sort of singleton which is perfectly fine. The controller itself creates all the getter for the registered stores, models and views and, that's a guess, it instantiate them (at least the stores) About naming restrictions for stores, there no restrictions about ending with an s.

Izhaki Izhaki · Accepted Answer · 2012-02-28T12:40:44

These are very valid points.

First, it has to be mentioned that you don't have to use MVC with ExtJS 4. You can still use ExtJS 3 style in your code.

I assume that if you understand the advantages of MVC and decide to adapt it, then yes - you will have to extend classes and there is some overhead, but admittedly you will end up with a cleaner, more reusable code. It has to be said that while you need to extend top-level views, the items within them can still be coded old style. In addition to this, within the init() of the controller you can modify certain view configs (which allows less of class extension, but more controller code).

I have to admit that if you have experience with ExtJS 3 and you're migrating to MVC style of an app, you will eventually see that the benefits outweigh the work involved.

Personally it's the first time I've been made aware of this 's' business with stores. So I can't comment much on this.

Lastly, a properly-written ExtJs 4 app, one that makes use of dynamic loading should load faster than an ExtJS 3 app. You can also compile an Ext version that only includes code used in your app. And yes, you can instantiate controllers (and their views and stores) when you need them, which works like a charm:

loadPage: function(aControllerName)
{
    // save recent page in a cookie
    Ext.util.Cookies.set('RecentPage', aControllerName);

    // Dynamically load the controller
    var iController = this.getController(aControllerName);

    // Manually initialise it
    iController.init();

    // Load the page (by getting the first view of the controller).
    var iPage = this.getView(iController.views[0]).create();

    // Add the page to the content panel.
    var iContentPanel = this.getContentPanel();

    iContentPanel.removeAll(true);

    iContentPanel.add(iPage);

    iContentPanel.doLayout();
}

ExtJS MVC conventions, naming and behavior

2 Answers