javascript - 可滚动属性网格容器 - extJS

我正致力于在 extJS 中制作一个容器，它将根据用户在我的表单中单击另一个网格上的行来动态添加属性网格。我想要这个包含属性的容器网格可滚动，以便容器保持固定大小，但用户可以根据需要在其中添加或删除任意数量的属性网格。

这是我用来创建容器的代码片段:

Ext.define('SSAF.plugin.CHEF.view.chefAttributeGridContainer', {
    extend: 'Ext.container.Container',
    autoScroll: true,
    layout: {
        type: 'vbox'
    },
    width: 400,
    border: 1,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
        labelWidth: 80,
        // implicitly create Container by specifying xtype
        xtype: 'datefield',
        flex: 1,
        style: {
            padding: '10px'
        }
    },
    items: [
        Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
        Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
        Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
        Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
        Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid')
    ]
});

虽然我已将 autoScroll 属性添加到我的网格，但我没有收到预期的效果。

这是它目前的样子: