Question

我有以下组件添加到Panel中。将布局设置为边框时，不会渲染子项。但是，如果我将布局更改为其他布局（例如hbox，vbox，auto），则可以正常工作。

你能告诉我我做错了什么。我正在使用ExtJS 4.1.3

Ext.define('WebAdmin.view.reference.CountryMain', {
    extend        : 'Ext.container.Container',
    alias         : 'widget.country.main',
    requires      : ['Ext.layout.container.Border',
                 'Ext.resizer.BorderSplitter'],
    layout        : {
        type        :'border'   // does not work
    },
    initComponent : function() {
        var me = this;
        me.items = [{
            region      : 'center',
            layout      : 'fit',
            html        : 'Center'
        },{
            region      : 'east',
            html        : 'East',
            width       : 300,
            split       : true,
            collapsible : true
        }];
        me.callParent();
    }
});

我已关注Why will my ExtJS tab will not show items with a border layout，但无法解决我的问题。

Answer 1

问题很可能是你没有给你的容器宽度/高度。这可以在配置中明确地完成，或者通过确保父容器使用布局（而不仅仅是默认布局，不会对任何大小进行调整）。

在这个例子中，我将你的组件添加到主体，给它一个硬编码的宽度/高度http://jsfiddle.net/StK2Y/这是有效的

Ext.create('WebAdmin.view.reference.CountryMain', {
    title: 'Border Layout',
    renderTo: Ext.getBody(),
    width: 500,
    height: 500    
});

但是，如果父容器没有设置宽度/高度，则边框布局将无效http://jsfiddle.net/StK2Y/1/

Ext.create('WebAdmin.view.reference.CountryMain', {
    title: 'Border Layout',
    renderTo: Ext.getBody()
});

ExtJS边框布局不会渲染其子项

1 个答案: