I have the following Viewport that houses my app...

    Ext.define('my.view.Viewport', {
        extend: 'Ext.Viewport',
        id: 'viewport',
        layout: 'border',
        autoDestroy: true,

        initComponent: function() {
            this.items = [
                {xtype: "widget.HeaderContainer"},
                {xtype: "widget.BodyContainer"},
                {xtype: "widget.FooterContainer"}
As the browser window resizes all the components fill the space nicely but when the window goes below 1024x768 I would like scrollbars to appear as if all the components draw as if the window was 1024x768 (and then go away if the window view is greater than 1024x768 again)

Hope this makes sense. Probably something simple but I couldn't find a way to do this without it being too buggy.

Thanks for your suggestions