Question

I have a viewport with code

Ext.define('WIMM.view.Viewport', {
extend: 'Ext.container.Viewport',
autoScroll: true,
layout: 'anchor',
items: [
    {
        border: false,
        title: 'Header',
        layout: 'fit',
        xtype: 'container',
        html: 'Header block. We\'ll try to do this again'
    },{
        layout: 'border',
        items: [
            {
                collapsible: true,
                width: 240,
                title: 'Aside Column',
                region:'west',
                layout: 'fit',
                html: 'Aside widgets (news, balance, budget, goals) would be here.'
            },{
                title: 'Main Block',
                border: false,
                region:'center',
                layout: 'fit',
                html: 'Main block were tabPanel would be nested in.'
            }
        ]
    },{
        title: 'footer',
        xtype: 'container',
        layout: 'fit',
        html: 'Some information in footer (copyrights, disclaimer link)'
    }
]
});

But item with border layout shrinks and only 1px border of that block is visible. It’s important for me to have scrollBar, so I can’t use border layout for entire viewport.

Answer 1

You have to set the height of the panel with the border layout.

{
    layout: 'border',
    height: 100,
    items: [
        {
        collapsible: true,
        width: 240,
        title: 'Aside Column',
        region: 'west',
        layout: 'fit',
        html: 'Aside widgets (news, balance, budget, goals) would be here.'},
    {
        title: 'Main Block',
        border: false,
        region: 'center',
        layout: 'fit',
        html: 'Main block were tabPanel would be nested in.'}
    ]
}

Look at this: http://jsfiddle.net/3CabN/4/