Question

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',
        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 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.