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

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?

Answer 1

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',
}]
});

Answer 2

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...