Loading Ext.app.ViewController via Ext.application() / modern toolkit

Question

According to the Sencha Documentation here: https://docs.sencha.com/extjs/7.0.0/modern/Ext.app.Application.html we can automatically load application controllers as needed via the controllers configuration of the Ext.application() method (thus avoiding the need to include many script tags within the html) like so:

Ext.application({ 
        name: 'App',
        controllers:['Main']
});

this requires a controller like this:

Ext.define('App.controller.Main', {
    //extend: 'Ext.app.ViewController',
    extend: 'Ext.app.Controller'
});

And this works. However, the controllers must derive from Ext.app.Controller and can not be Ext.app.ViewController (in which case we receive error because of a missing doInit() controller method). Can anybody explain why is that? And how to instantiate an Ext.app.ViewController using the automatic loading logic?

score 1 · Answer 1 · answered Mar 27 '22 at 11:17

You are confusing ViewControllers with AppControllers. ViewControllers are the C from MVC while AppControllers kinda global. Those are not specific to any view but application. The lifecycle also different as ViewControllers created for views while AppControllers created for the entire application. In your example you need Ext.app.Controller instead of ViewController, if you wish to use ViewController it must be attached to e.g. a Ext.Component.

Ext.define('ViewController', {
    extend : 'Ext.app.ViewController',
    alias: 'controller.SomethingController',

    onClick: function() {
    }
});

Ext.define('View', {
    extend: 'Ext.Panel',
    controller: 'SomethingController',

    items: [{
        xtype: 'button',
        handler: 'onClick',  
    }]
});

MX Starter · Answer 2 · 2022-07-18T12:42:25.740

Well, i can understand this.

However, listing the controller inside the controllers array within Ext.application() automatically loads the appropriate controller's javascript file:

Ext.application({ 
    name: 'App',
    controllers:['Main'] //loads app/controller/Main.js
});

After this, listing the view class name within the controllers views array automatically loads the view's JS file:

Ext.define('App.controller.Main', {
    //extend: 'Ext.app.ViewController',
    extend: 'Ext.app.Controller',
    views:['Main'] //loads app/view/Main.js
});

This way i do not need to include the 2 JS source files within the html. I could use the views config within the Ext.application() also, but the Sencha docs here: https://docs.sencha.com/extjs/7.0.0/modern/Ext.app.Application.html

is telling us this:

*Note that we didn't actually list the Views directly in the Application itself. This is because Views are managed by Controllers, so it makes sense to keep those dependencies there. ... In turn, each Controller simply needs to list the Views it uses and they will be automatically loaded*

And this is true, but only for the application controllers, which means i can not benefit from the automatic loading when want to use a view controller. The other confusing part is that the application controller actually can control a view also...

ViewControllers are newer than Application controllers. They came with Ext@5, before that you had to use Deft to achieve the same functionality. The problem with AppControllers that they are global, it won't scale well. It really has an additional feature of implicit loading of classes, but the same can be achieved with ViewControllers as well, but I don't think adding one additional element in `requires` array is a big deal. — Istvan Tabanyi, Apr 01 '22 at 08:11
Imagine you have an application with global controllers, e.g. for 'Post', 'User', 'Settings' etc. But all those parts split into more smaller ones, `Post.edit`, `User.view` etc. And in `User.view` you have a `User.details` component. Which should obviously can be complicated enough to have its very own ViewController. Anyways it all depends on you, you are not even forced to use Controllers at all, if you prefer ViewModels, stick with those, you can inline any controlling logic in your views as well. — Istvan Tabanyi, Apr 01 '22 at 08:12

Loading Ext.app.ViewController via Ext.application() / modern toolkit

2 Answers2