Q:

Scrolling with extjs 4 layout regions only when browser goes below 1024x768

My Viewport.js consists of four stacked vertical bands that all have a minimum width of 1024 and a combined minimum height of 768 (would like it to fit on an iPad without scrolling)
me.items = [{
    xtype: 'pageHeader',
    region: 'north'
},{
    xtype: 'pageBreadcrumb',
    region: 'north'
},{
    xtype: 'pageMain',
    region: 'center',
    cls: 'oc-view-center'
},{
    xtype: 'pageFooter',
    region: 'south',
    layout: 'border'
}];

When I resize a desktop browser I'm running into issues with the scrollbars sometimes appearing without scroll thumbs (which i can live with) but also the pageFooter floats over the top of the 'center' panel which I need to fix.
How do I get scrolling to work properly given the layout in the screenshot below?

A:

You cannot specify more than one container in each of the border regions.  You might want to think about nesting one of the containers in the container in the "north" region.  Also, make sure you have set the autoScroll to true in your viewport configuration.

