javascript - 边框布局的奇怪行为 - ExtJS 4

Question

这是发生了什么：

http://www.youtube.com/watch?v=zVEftCJ2F_U&feature=youtu.be

这是代码：

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!");
    }
});

登录控制器 onSuccess：

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

这个布局是怎么回事？

Answer 1

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

Answer 2

尝试将您的项目放在具有边框布局的面板或容器中

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


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