Javascript ExtJS 3.4 vbox布局未正确渲染

我试图在vbox布局中渲染一个GridPanel和两个常规面板（稍后将根据用户操作更新面板）

我让商店正常运转

var store = new Ext.data.ArrayStore({
    autoDestroy: true,
    storeId: 'myStore',
    fields: [
       {name: 'categoryId', type: 'int'},
       {name: 'categoryName', type: 'string'}
    ]
});

在我开始使用vbox之前，GridPanel工作正常

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header:'Category ID', width: 40, sortable: true, dataIndex: 'categoryId', hidden: true},
        {header:'Cat. Name', width: 80, sortable: true, dataIndex: 'categoryName'}
    ],
    flex: 10,
    loadMask: true,
    stripeRows: true,
    viewConfig: { autoFill: true }, //This makes the columns span the screen onLoad
    sm: new Ext.grid.RowSelectionModel({
        singleSelect: true
    })
});

我给vbox添加了一个高度，因为我读到它必须有一个

var mainPanel = new Ext.Panel({
    renderTo: 'myDiv',
    frame: true,
    layout: 'vbox',
    layoutConfig: {
        align: 'stretch'
    },
    height: '200px',
    items: [
        grid,
        {
            flex: 5,
            title: 'Take Action',
            id: 'SelectedItemPanel',
            bodyStyle: {
                background: '#ffffff',
                padding: '6px 15px 0px 15px'
            },
            html: 'Please select item above to take action upon.'
        },
        {
            flex: 5,
            title: 'Preview',
            id: 'SelectedItemPanel2',
            bodyStyle: {
                background: '#ffffff',
                padding: '6px 15px 0px 15px'
            },
            html: 'Magic!'
        }
    ]
});

但它仍然渲染为高度约为10px的灰色边框，并且不会按要求占用300px的空间

---

我猜我遗漏了一些溢出声明或其他东西，但这很令人沮丧，因为我花了约4个小时来尝试获得如此简单的工作：-（

嗨，问题在高度配置中

给出

高度：300

（删除单引号）

请参见

height不需要单位（假定为px），它是一个整数值而不是字符串，因此也不需要引号