可滚动属性Grid容器 - extJS

我正在制作一个extJS中的容器，它将动态添加属性网格，具体取决于用户单击表单中另一个网格上的行。我希望这个容器具有属性网格可滚动，以便容器保持固定大小，但用户可以根据需要添加或删除尽可能多的属性网格。可滚动属性Grid容器 - 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') 
    ] 
});

虽然我已经添加了自动滚屏属性为我的网格，我没有收到预期的效果。

这是它目前的样子：