如何向extjs视口添加条件滚动

我有以下视口，其中包含我的应用程序

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"}
        ];
        this.callParent(arguments);
    }
});

当浏览器窗口调整大小时，所有组件都会很好地填充空间，但当窗口低于1024x768时，我希望出现滚动条。视口中的所有组件都应该像窗口是1024x768一样绘制（如果窗口视图再次大于1024x768，则应消失）

希望这是有意义的。可能是一些简单的事情，但我找不到一个方法来做这件事，而不是太多的车

感谢您根据Ext Docs提供的建议

：

您必须注意构造函数或initComponent上每个组件的大小，并执行以下操作

constructor:function(config){
    var config= Ext.apply({},config,{    
        autoscroll:((window.innerWidth<1024) && window.innerHeight < 768))?true:false
}) 

构造函数：函数（配置）{
var config=Ext.apply（{}，config，{
autoscroll:（（window.innerWidth以下是我所做的：
将页眉和页脚高度固定为特定的px值。中心区域有一个layout=fit的容器（尽管这不是必需的）。此容器将主应用程序视图作为项目获取，这意味着该视图将填充视口分配给它的任何空间。放入中心区域容器的视图的autoScroll属性将设置为true，并且不会指定高度或宽度。其子组件也不会。
这是一个
执行此操作的正常方法是在视口子对象上使用
minHeight
和
minWidth
配置

您必须确保在子项上也包含
autoScroll:true
config

例如：对于其中的每一项：

this.items = [
    {xtype: "widget.HeaderContainer"},
    {xtype: "widget.BodyContainer"},
    {xtype: "widget.FooterContainer"}
];

一个简单的
minWidth:1024
config就可以了

根据您的
HeaderContainer
和
FooterContainer
是否为静态高度，
minHeight
配置会有点棘手

如果是，那么您只需在
BodyContainer
上包含一个
minHeight
配置，该配置相当于
768-staticHeaderHeight-staticFooterHeight

如果希望页眉或页脚也可以单独调整大小（它们不是静态大小）每当一个同级的高度发生变化时，您必须通过重置最小尺寸来跳过某些限制。
但是如果视口的大小发生了变化，该怎么办？如果要使所有子组件都具有滚动条，当视口低于1024x768时，难道不必重新创建所有子组件吗？
viewport.on（'resize'，
事件和面板有一套自动滚动的方法：谢谢alex。我认为这是最好的解决方案。如果我以后能想出一个，我会发布另一个。谢谢JSFIDLE示例的不错的布局，但我不希望任何组件有滚动条。我的应用程序目前运行良好，可以完美地填充窗口。我只想知道oking for是一种使视口认为它是1024x768的方法，而不管实际窗口大小。好的建议-希望它们对某人的布局有用我不希望任何组件滚动，只需要视口认为它是1024x768，并相应地绘制所有组件，即使窗口小于1024x768。我可能没有o将整个应用程序包装在另一个最小尺寸的面板中，但希望在不嵌套另一个组件层的情况下完成此操作