Viewport's regions without xtype

[martinrame]

Hi, by hand editing a Viewport config I can create this:

https://github.com/leonardorame/Ext4-MVC-Tutorial/wiki/screen1.png

The code to do it is this:


Ext.define('DEMO.view.Viewport', { extend: 'Ext.container.Viewport',
layout: 'border',
initComponent: function() {
Ext.apply(this, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
region: 'center',
html: '<h1 class="x-panel-header">This is the center region.</h1>'
},
{
region: 'south',
html: '<h1 class="x-panel-header">Page footer</h1>'
},
]
});
this.callParent();
}
});

Using Designer, I did try to do the same, but regions are configured as XType "container". How can I remove the xtype?.

Here's the code generated by Designer.


Ext.define('MyApp.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
layout: {
type: 'fit'
},
region: 'center'
},
{
xtype: 'container',
height: 150,
html: '<h1 class="x-panel-header">Page Title</h1>',
region: 'north'
},
{
xtype: 'container',
height: 150,
html: '<h1 class="x-panel-header">Page Footer</h1>',
region: 'south'
}
]
});


me.callParent(arguments);
}
});

[aconran]

The defaultType in most cases is panel. Designer explicitly sets the xtype configuration under all circumstances regardless of whether its needed or not.