Javascript vbox中的extjs布局滚动

我在将滚动条添加到网格时遇到问题，网格位于vbox容器内部。 我不能直接指定高度，因为我不知道它。在该vbox容器中，还有一个高度未定义的“另一个内容”，因此我既不能使用“高度”，也不能使用“flex”。我需要使网格填充页面中所有剩余的空间，如果有超过它所能容纳的行数，我需要将滚动条添加到该网格中。 这是代码中最重要的部分：

{
layout: {
    type: 'vbox',
    align: 'stretch'
}, 
items:[
    {
        title: 'center'
    },{
        html: 'another content'
    },{
        xtype: 'grid',
        autoScroll: true, // <-- this is not working
        columns: [
            { text: 'User', dataIndex: 'userId' }
        ],
        store: new Ext.data.Store({
            model: 'Ext.data.Record',
            fields: [
                { name: 'userId', type: 'string' }
            ],
            data: ( function(){
                var res = []
                for(var i=0; i<1000; i++){
                    res.push({ userId: 'User'+i});
                }
                return res;
            })()
        })

    }
]
}

{
布局：{
键入：“vbox”，
对齐：“拉伸”
}, 
项目：[
{
标题：“中心”
},{
html:“其他内容”
},{
xtype:'网格'，
autoScroll:true，//只需删除
autoScroll:true
并将其替换为
flex:1


Ext.application({
名字：“小提琴”，
启动：函数（）{
Ext.create（'Ext.container.Viewport'，{
renderTo:Ext.getBody（），
布局：{
类型：“边框”
},
项目：[
{
宽度：“100%”，
地区：'北'，
项目：[{
标题：“北方”
},{
html:“其他内容”
}]
}, 
{
地区：'中心'，
布局：“适合”，
项目：[{
布局：{
键入：“vbox”，
对齐：“拉伸”
}, 
项目：[
{
标题：“中心”
},{
html:“其他内容”
},{
xtype:'网格'，
弹性：1，
栏目：[
{text:'User'，dataIndex:'userId'}
],
存储：新的Ext.data.store({
模型：“Ext.data.Record”，
字段：[
{name:'userId'，type:'string'}
],
数据：（函数（）{
var res=[]
对于（var i=0；i可能是一个很好的解决方案，即创建带有滚动的面板，并在该面板中完全推网格，但我不知道如何执行此操作，因此可以使用
vbox
来代替
anchor
，它们也有类似的功能（并且切换没有给出任何结果）很好，非常好，在fiddle中按预期工作，但在我的项目中不工作…因此，这是对这个问题的回答。但我将搜索我的fiddle和真实项目之间的差异…稍后将标记为答案。我发现了差异并解决了一个问题。问题是，我的
vbox
容器位于另一个
vbox
c中容器，但是有不正确的
flex
设置。所以我为所有嵌套节点指定
flex:1
，这将导致网格。非常感谢！
Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.container.Viewport', {          
            renderTo: Ext.getBody(),
            layout: {
                        type: 'border'
            },
            items: [
                {
                    width: '100%',
                    region: 'north',
                    items: [{
                        title: 'north'
                    },{
                        html: 'another content'
                    }]
                }, 
                {
                    region: 'center',
                    layout: 'fit',
                    items: [{
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        }, 
                        items:[
                            {
                                title: 'center'
                            },{
                                html: 'another content'
                            },{
                                xtype: 'grid',
                                flex: 1,
                                columns: [
                                    { text: 'User', dataIndex: 'userId' }
                                ],
                                store: new Ext.data.Store({
                                    model: 'Ext.data.Record',
                                    fields: [
                                        { name: 'userId', type: 'string' }
                                    ],
                                    data: ( function(){
                                        var res = []
                                        for(var i=0; i<1000; i++){
                                            res.push({ userId: 'User'+i});
                                        }
                                        return res;
                                    })()
                                })

                            }
                        ]
                    }
                    ]
                }]
        });
    }
});