动态添加项目到边框视窗

dynamic add items to border viewport

本文关键字:边框 添加 项目 动态      更新时间:2023-09-26

我想先创建一个空的viewport(layout:border),然后向其中添加项目,最后渲染和显示。但是当我创建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>

根据文档中的注释:

一个BorderLayout的区域在渲染时是固定的,之后,它的子组件不能被移除或添加。要在一个BorderLayout中添加/删除组件,需要将它们包装在一个额外的容器中,该容器由BorderLayout直接管理。

顺便说一下

任何使用Border布局的Container 必须有一个region:'center'的子元素