extjs4 overlapping panels in border layout - extjs

Question

I am creating a Border layout using ExtJS4 MVC structure. I am defining north,west,center and south regions. All the regions are being displayed but the problem here is that, all the regions are starting at the top left corner of the screen so they are getting overlapped.
Can someone please help me get the border layout right,so that it fits the entire screen..??
Here is my code:
Border.js
Ext.define('IN.view.item.Border',{
extend : 'Ext.container.Container',
alias : 'widget.myborderlyt',
requires : [ 'Ext.layout.container.Border' ],
title : 'Border layout',
autoShow : true,
defaults : {
split : true,
width : 800,
height : 900
},
layout : 'border',
items : [
{
region : 'north',
xtype : 'panel',
title : 'North region title here',
html : 'Here is the north region..111111111111111111111111111'
} ,
{
region : 'west',
xtype : 'panel',
title : 'west region',
html : 'Here is west...1222221111111111',
width : 150
},
{
region : 'center',
xtype : 'panel',
html : 'Center region....aaaaaaaaaeeeeeeeeeeeeeeeeetttttttttccccccccc'
} ,
{
region : 'south',
height : 60,
html : "South region ..ggggggggggggggggggggggg"
}
]
});
app.js
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : 'IN',
appFolder : 'app',
controllers : [ 'Items' ],
launch : function() {
console.log('in LAUNCH-appjs');
Ext.create('Ext.container.Viewport', {
layout: 'border',
items : [ {
xtype : 'myborderlyt'
} ]
});
}
});

Answer 1

Ext.create('Ext.container.Viewport', {
layout: 'border',
items : [ {
xtype : 'myborderlyt'
} ]
});
In this code snippet, viewport's layout is 'border' but its item doesn't have a 'region' config.
This is what documentation says
Any Container using the Border layout must have a child item with
region:'center'. The child item in the center region will always be
resized to fill the remaining space not used by the other regions in
the layout.
So either change 'border' to 'fit' in viewport or add region config to 'myborderlyt'.
items : [ {
xtype : 'myborderlyt',
region : 'center'
} ]