边框布局中的extjs4重叠面板

我正在使用extjs4mvc结构创建一个边框布局。我正在定义北部、西部、中部和南部地区。所有区域都会显示，但这里的问题是，所有区域都从屏幕的左上角开始，因此它们会重叠

有人能帮我把边框的布局弄对吗，这样它就适合整个屏幕了

这是我的密码：

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

在此代码段中，视口的布局为“边框”，但其项没有“区域”配置。 这就是文档所说的

任何使用边框布局的容器都必须有一个子项 地区：'中心'。中心区域中的子项将始终为 调整大小以填充中其他区域未使用的剩余空间 布局

所以，要么在视口中将“border”更改为“fit”，要么将region config添加到“myborderlyt”

items : [ {
        xtype : 'myborderlyt',
        region : 'center'

    } ]

items : [ {
        xtype : 'myborderlyt',
        region : 'center'

    } ]