View Full Version : ExtJS 4 MVC - how to load only current controller and its related data ?

22 Nov 2011, 12:59 PM

as we know, Ext.application has 'controllers' property/config/option (call it whatever you like). So we can give what controllers we have. And then, for controllers we can specify which views do they have.

My question is, is there a way to let the Ext application know about current controller/action pair depending on URL (just the way it is done in e.g. PHP - Zend, Code Igniter frameworks) ?
(to not have each and every controller, view in respective arrays loaded and executed)


22 Nov 2011, 1:13 PM
All controllers are instantiated when when Ext.application launches the app.

22 Nov 2011, 8:18 PM
yes I know, that is the problem. For example, if I'm in auth/login page, I would like to have only 'auth' controller and it's 'login' view loaded, and not also 'index' controller with its various views and 'auth' controller with 'register', .... and other views and controllers loaded.

23 Nov 2011, 6:30 AM
Then I suggest having a two page application if you don't want everything loaded at once.

23 Nov 2011, 10:53 AM
more details please.

Let's say, I have 8 controllers, each one having 5 views.
And currently I'm on index.php/auth/login page.
Is there a way in ExtJS 4 to load only 'auth' controller with its 'login' view only ?

23 Nov 2011, 1:45 PM
You can have a Controller loaded but not initialized... meaning you put a class in the Ext.application's requires Array and that Controller's init method won't be executed. On successful login, you could then manually execute the init method on the controllers.

23 Nov 2011, 6:55 PM
I see, so ExtJS lacks this simple feature...

I understand your solution but in that case also I'll have unnecessary AJAX calls, loading my controller files which I don't need for that particular page.

Ok, thanks anyway.

24 Nov 2011, 5:17 AM
just the way it is done in e.g. PHP - Zend, Code Igniter frameworks

No expert here, but maybe this is the issue. ExtJS is not php/Zend etc.

An app has one external entry url from the web.
Then there is no need to hyperlink anywhere within your app.
The address bar (url) never changes!

If your controllers are large and vastly different, maybe separate apps are appropriate, with a slim 'login app' up front.

If you want more control over which contoller is loaded when, don't put your controllers in the app config, but call the loader in response to user actions.

Easy for me to say. I have not done it. I think the question is reasonable.

Maybe look at http://www.bleext.com/products/bleextop-a-desktop-for-ext4-and-codeigniter/ ...think that loads 'modules' ....

Or look here: "In larger applications, you might want to load additional controllers at runtime. You can do this by using the getController method."

24 Nov 2011, 6:43 PM
if ExtJS "isn't php/Zend etc." it should not even attempt to introduce MVC.

But, the thing is, that technically it isn't complicated to do that, especially after what they have implemented already. I just wanted to know weather it is supported natively by the framework.

About url of ExtJS app, I didn't noticed such a thing (well, it has 'defaultUrl' in configs but it isn't concerned in my case).

Problem isn't that my app is big, but in inappropriate AJAX calls (for loading contreollers and views) which can be easily avoided (as I understand correctly).

My solution is to parse URL, grab controller and method names and generate contreoller and respective view arrays dynamically depending on these values.

24 Nov 2011, 7:15 PM
something like this in app.js file:

url = document.URL.split("/");
var contreollers = [];
var views = [];

if( url.length <= 4 ){

controllers = ['index'];
views = ['index/index'];

if( document.URL.indexOf('index.php') >= 0 ){

controllerPos = 4;

controllerPos = 3;

controllers = [url[controllerPos]];

if( url.length > controllerPos+1 ){

views = [url[controllerPos]+'/'+url[controllerPos+1]];

views = [url[controllerPos]+'/index'];

25 Nov 2011, 10:25 AM
It makes a lot of sense to have an MVC architecture on the front end and back end. Back end for the reasons we have been using it but on the front end because RIAs are becoming much more complex than ever before so let's attempt to keep things separate just like on the back end.

26 Nov 2011, 9:31 AM
It does seems odd that Application has no setController method.

So I guess what vgrigory is doing is writing his own "router".

I am a long way from knowing, but it seems easy to image loading a whole lot of controller logic that may never be instantiated (user only visits blog section of site, but a dozens of other complex controllers for site areas also exist)

But I guess we can load a particular controller on demand, just like any other js file?
Problem would be knowing how to wire it up, as that magic is currently buried in the app config.
Presumably could trace that thru and mimic it?

Perhaps separate apps for each section of a site may be the best way.

26 Nov 2011, 9:58 AM
Ext.app.Application has a getController that will look for a Controller. If it does not find one, it will attempt to create one. I leverage this for my SubAppDemo where I have created "subapplications"

26 Nov 2011, 10:18 AM

Thanks very much.

1 Dec 2011, 4:17 PM
@vgrigory - If you still need an answer, actually in my app i'm using this user library:

It's an router, that's mimics the browser refresh, each time you redirect the user to an route declared on the app. You load the controllers that you need dynamic, it's really nice!

If you would like to see an system with an login page well structured, you can download an demo on this page:


This login system was build using the router class, and it's an nice aproach when you wanna work with MVC.

If you don't wanna to use any of these links, and still wanna to see an good MVC approach the core part to get it working is using the getController method, which load the controller that you had specified, all the views, stores, models related to that controller, but you will also need to put some functions to get full functionally of the controller. Doing something like this, you will have an app really flexible that load's just what the user needs to load.

An example of what i wrote:

var app = application;
var args = Array.prototype.slice.call(arguments, 1);

controller.init.apply(controller, args);

Well, with this code, you will an dynamic load of your controllers!
Also, If you try to use the links that i passed on this post, you will have an full functionally with the controller, i think you should try them, and if you had any doubt, i will try to help you. God bless you.

1 Dec 2011, 9:51 PM

Thanks for your answer, I actually satisfied with my own solution and currently use it (you can find it at the beginning of this thread). I just wanted to know isn't there a standard mechanism from ExtJS.
Well, seems not. Thank you again. Bye.

1 Jan 2012, 1:57 PM
@vgrigory (http://www.sencha.com/forum/member.php?111006-vgrigory)

I believe that the only solution is to override the constructor: class Ext.Application. Of course the name of the controller (unique to execute, unique for request) must be passed via url parameter

There are several points into the Ext.application source to apply yor extension:
(1) ... var = Ext.Array.from controllers (this.controllers)
& & ln = controllers.length controllers,
i, controller;
this.controllers Ext.create = ('Ext.util.MixedCollection') ............

(2) Ext.onReady (function () {
for (i = 0; i <ln; i + +) {
DC = this.getController (controllers [i]);
controller.init (this);

Sorry if I do not write well,
Hi for all.

28 May 2012, 7:05 AM