Javascript 边界布局的奇怪行为-ExtJS 4

下面是发生的事情：

代码如下：

extend: 'Ext.container.Viewport',
    alias: 'widget.viewport',

    layout:'border',
    defaults: {
        collapsible: true,
        split: true,
        bodyStyle: 'padding:15px'
    },
    items: [{
        title: 'Footer',
        region: 'south',
        height: 150,
        minSize: 75,
        maxSize: 250,
        cmargins: '5 0 0 0'
    },{
        title: 'Navigation',
        region:'west',
        margins: '5 0 0 0',
        cmargins: '5 5 0 0',
        width: 175,
        minSize: 100,
        maxSize: 250
    },{
        title: 'Main Content',
        collapsible: false,
        region:'center',
        margins: '5 0 0 0'
    }]

布局控制器：

Ext.define('MyAppp.controller.Layout', {
    extend: 'Ext.app.Controller',

    init: function(){
        //kreiraj Viewport
        Ext.create('MyApp.view.Viewport');

        console.log("Layout created!");
    }
});

成功登录控制器：

success: function(form, action){
        win.destroy();
        this.getController('Layout').init();
            },

---

这种布局是怎么回事？

试着将您的项目放入带有边框布局的面板或容器中

extend: 'Ext.container.Viewport',
alias: 'widget.viewport',


defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:15px'
},
items: [{xtype: panel,
layout: 'border',
items[{...

---

我已经创建了一个加载启动屏幕，当我删除它时，边框布局效果很好。

这个问题的问题是，我们很难重现，因为代码不完整。你能让它在jsfiddle.net中失败吗？然后我们可以玩一会儿。