Setting Application MainView via Ext.app.Application.launch() method vs. Ext.app.Application.mainView config - extjs

Question

According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.

Answer 1

If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});