Do we really need to explicitly add Sencha View to Viewport? - sencha-touch-2

Question

In all the examples on Sencha Touch 2 I see code samples like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
Ext.create('MyApp.view.MyView');
}
});
However, the code generated by Sencha Cmd is like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
Ext.Viewport.add(Ext.create('MyApp.view.MyView')); // <--- NOTICE THIS LINE
}
});
Notice that the example code did not add the newly instantiated View to Viewport but the actual code did. Are both codes equivalent? In the example code, how will the View add itself to the Viewport or that is optional?

Answer 1

Ext.Viewport is basically a container with the layout set as 'card'.
In your first sample, the class should have the config option 'fullscreen' set to true.
Setting fullscreen:true will automatically add the comoponent to the viewport when an instance is created.
Ext.define('MyApp.view.test', {
extend: 'Ext.Container',
config: {
fullscreen:true,
html: ['screen2'].join("")
}
});
Ext.create('MyApp.view.test');
From the doc for fullscreen
Force the component to take up 100% width and height available, by
adding it to Ext.Viewport.
In the second sample, a component is added to the viewport. (Don't need the fullscreen option). Like adding a panel into a container.
Ext.define('MyApp.view.home', {
extend: 'Ext.Container',
xtype: 'homecontainer',
config: {
html: ['test'].join("")
}
});
Ext.Viewport.add(Ext.create('MyApp.view.home'));
From the doc for viewport
Because Ext.Viewport extends from Ext.Container, it has as layout
(which defaults to Ext.layout.Card). This means you can add items to
it at any time, from anywhere in your code. The Ext.Viewport
fullscreen configuration is true by default, so it will take up your
whole screen.