What is the syntax for adding a panel to a viewport component?

Question

From the above examples, this code should add newPanelto viewportboth its eastern region, but it just does nothing:

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

How to add a new panel to the viewport?

Adding

I got it to work, here is the main code for those who have the same problem, I do not add to the viewing area, but to the area in the viewing area, and I clear the content area before adding new content

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

You may need to call viewport.doLayout()after adding a new panel, as the visualization is already displayed:

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

From the add () documentation:

add, doLayout . , , , .

Answer 2

, , , BorderLayout. BorderLayout ( ) . , - . , , BorderLayout, .