動的にアイテムをボーダービューポートに追加する

Question

最初に空のビューポート（レイアウト：境界線）を作成してから項目を追加し、最後にレンダリングして表示します。 しかし、私は、ビューポート要素を作成したとき、それはエラーを投げるには、こう述べています。ここ

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> 

Answer 1

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'