Проблемы с Viewport
 

Всем привет.

Не очень понятно для меня работает вьюпорт.

Если так написано, то все работает, все хорошо:
Ext.onReady(function(){
.........
var mainviewport= new Ext.Viewport({
layout: 'border',
items: [headpanel,maincont,footpanel]
});

});

А если вот так, то выводится только основная панель:

Ext.onReady(function(){
.........
var mainviewport= new Ext.Viewport({
layout: 'border',
items: [maincont]
});
mainviewport.add(headpanel);
mainviewport.add(footpanel);
mainviewport.doLayout();
});

В чем может быть причина? В какую сторону вообще копать? Что делаю неправильно?

А какие-то ошибки пишет в консоли? в Firebug'е?

Нельзя изменить layout viewporta после того как он был отрендерен

Правильно будет делать это например таким образом:

Ext.onReady(function(){
    viewport = new Ext.Viewport({
        autoshow:true,
        layout: 'border',
        defaults: {
            activeItem: 0,
        },
        items: [
            {
                region: 'west',
                split:true
            },{..},{..}
    ]
    });
    
    west = viewport.getComponent(0);
    
    west.add(new Ext.DragPanel({
        collapsible: true,
        title: 'Navigation',
        width: 200,
        }
    ));
    west.setWidth(200);
    west.doLayout();
    
    viewport.syncSize();
});

А где он меняется?

Вы динамически добавляете регионы в viewport?

спасибо за ответ, я тоже кстати нашел этот код.

да, хочу динамически менять вид страницы без ее перезагрузки, просто меняя панели во вьюпорте

А можно просто задать все панели сразу, а потом не нужные делать не видимыми. С кнопками в меню это срабатывает.
Просто параметр hidden:true ставить.

то есть будет много центральных панелей и только одна из них - видимая?

Тогда уж лучше сделать одну центральную панель с layout: 'card' и в ней менять другие панели.