动态添加项目到边框视口

Question

我想首先创建一个空视口（布局：边框），然后向其中添加项目，最后渲染并显示。 但是当我创建视口元素时，它抛出一个错误，说：

未捕获类型错误：无法读取未定义的属性“flex”

这是我的代码：

<script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>
<script>
Ext.require(['*']);
Ext.onReady(function() {
    Ext.QuickTips.init();

    var viewport = Ext.create('Ext.container.Viewport', {
        layout: 'border'
    });

    var north = blablabla...
    viewport.add([north,south]);

    viewport.doLayout();
});
</script>

Answer 1

根据摘自 docs 的注释：

BorderLayout 的区域在渲染时固定，此后，其子组件可能无法删除或添加。要在 BorderLayout 中添加/删除组件，请用一个附加的 Container 包裹它们由BorderLayout直接管理。

顺便说一句

任何使用边框布局的容器必须具有区域为“center”的子项