extjs – 动态向边框视口添加项目

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

Uncaught TypeError: Cannot read property ‘flex’ of undefined

这是我的代码：

<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>

解决方法:

根据docs的说明：

The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout.

顺便说一下

Any Container using the Border layout must have a child item with region:’center’