附录

Question

从我发现的示例中，此代码应将newPanel添加到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，然后将新的子组件添加到该布局的特定区域。

Answer 2

添加新面板后，您可能需要致电viewport.doLayout()，因为视口已经呈现：

viewport.add(newPanel);
viewport.doLayout();

来自add（）文档：

如果已经渲染了Container 当调用add时，您可能需要调用doLayout刷新视图导致任何未经渲染的孩子要渲染的组件。这是必需，以便您可以添加多个仅在需要时才使用子组件刷新布局一次。

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

附录

2 个答案: