Question

我正在使用ExtJS4 MVC结构创建Border布局。我定义了北部，西部，中部和南部地区。所有区域都在显示，但问题在于，所有区域都从屏幕的左上角开始，因此它们会重叠。

有人可以请我帮我正确的边框布局，以便它适合整个屏幕.. ??

这是我的代码：

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

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

使用Border布局的任何Container都必须包含子项区域：“中心”。中心区域中的子项始终是调整大小以填充其他区域未使用的剩余空间布局。

因此要么在视口中将'border'更改为'fit'，要么将region config添加到'myborderlyt'。

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

    } ]

extjs4在边框布局中重叠面板

1 个答案: