Каков синтаксис для добавления панели в компонент области просмотра?

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 ():

Если контейнер уже обработан когда добавить называется, вам может понадобиться вызовите doLayout, чтобы обновить вид который вызывает любого бездетного ребенка Компоненты для визуализации. Это требуется, чтобы вы могли добавить несколько дочерние компоненты, если необходимо, пока только обновить макет один раз.