动态添加项目到边框视口

Question

我想首先创建一个空视口(布局:边框),然后添加项目,最后渲染和显示.但是当我创建了viewport元素时,它会抛出一个错误,说:

未捕获的TypeError:无法读取undefined的属性'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

根据从文档中获取的注释:

BorderLayout的区域在渲染时固定,此后,其子组件可能不会被删除或添加.要在BorderLayout中添加/删除组件,请将它们包装在由BorderLayout直接管理的其他Container中.

顺便说一下

使用Border布局的任何Container 必须具有带区域的子项:'center'