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

时间:2012-12-14 15:26:47

标签: javascript extjs extjs4

以下是发生的事情:

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();
            },

这种布局发生了什么?

2 个答案:

答案 0 :(得分:0)

尝试将您的商品放在带边框布局的面板或容器中

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


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

答案 1 :(得分:0)

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