ExtJS 边框布局不呈现其子项答案

【问题标题】：ExtJS border layout does not render its childrenExtJS 边框布局不呈现其子项
【发布时间】：2013-02-04 21:11:30
【问题描述】：

我将以下组件添加到面板中。当我将布局设置为边框时，不会渲染孩子。但是，如果我将布局更改为其他（例如 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，但无法解决我的问题。

【问题讨论】：

你在哪里渲染容器？它有尺寸吗？是显式地还是通过容器？你不能只单独发布一个组件。
它工作正常jsfiddle.net/StK2Y 一个建议，永远不要在原型上设置对象，在这里可能不是问题，但将来会咬你。 layout: { type:'border'},
为什么中心区域有布局'fit'？
@Izhaki 我一直在关注这个并尝试“适合”stackoverflow.com/questions/4480405。它没有解决问题。
@Evan 我在视口、面板和标签面板上进行了尝试。你的尺寸问题帮助我思考。我喜欢为你的评论点赞，但我不被允许（目前）。

标签： extjs

【解决方案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()
});

【讨论】：