将面板添加到视口组件的语法是什么？

Question

从我发现的示例中,此代码应该将newPanelto 添加viewport为其东部区域,但它根本不执行任何操作:

var viewport = new Ext.Viewport({
    layout: 'border',
    items: [ regionMenu, regionContent ]
});

var newPanel = new Ext.Panel({
    region: 'east',
    width: 300,
    html: 'this is a panel that is added'
});
viewport.add(newPanel);

如何将新面板添加到视口？

附录

我得到它的工作,这是有相同问题的人的主要代码,我不是添加到视口,而是添加到视口中的区域,并在添加新内容之前清空其内容的区域:

Ext.onReady(function(){

    ...

    regionContent = new Ext.Panel({
        id: 'contentArea',
        region: 'center',
        padding:'10',
        autoScroll: true
    });

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [ regionMenu, regionContent ]
    });

    clearExtjsComponent(regionContent);
    var start_info_panel = new Ext.Panel({
        title: 'Start Info',
        padding: 10,
        width: 300,
        html: 'this panel was added from the start view'
    });
    regionContent.add(start_info_panel);
    regionContent.doLayout();

});


function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

Answer 1

为了澄清,实际问题是您不能将新组件直接加载到已有BorderLayout的任何容器中.就其本质而言,BorderLayout占用其容器内的整个空间(在您的情况下为视口)并管理其中的所有面板.因此,您不能只是稍后进入并将另一个面板粘贴到同一个容器中 - 它无处可去.正如您所推断的,正确的方法是创建BorderLayout,然后将新的子组件添加到该布局的特定区域.