From the examples I have found, this code should add the newPanel to viewport as its east region, but it simply 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 can I add a new panel to a viewport?

Addendum

I got it to work, here is the main code for those with the same issue, I'm not adding to the viewport but to the region within the viewport, and I empty the region of its contents before I add new contents:

Ext.onReady(function(){

    ...

    regionContent = new Ext.Panel({
        id: 'contentArea',
        region: 'center',
        padding:'10开发者_JS百科',
        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);
    }
}

To clarify, the actual problem was that you cannot generically load a new component directly into any container that already has a BorderLayout. By its nature, a BorderLayout takes up the entire space within its container (the viewport in your case) and manages all panels within it. As such, you can't just go in later and stick another panel into the same container -- it has nowhere to go. As you deduced, the proper approach is to create your BorderLayout then add new child components into specific regions of that layout.

You may need to call viewport.doLayout() after you add newpanel because viewport is already rendered:

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

From the add() documentation:

If the Container is already rendered when add is called, you may need to call doLayout to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once.