ExtJS 3.4 Vbox布局无法正确渲染

Question

我正在尝试渲染一个烤面板，在vbox布局中进行了两个常规面板（将稍后根据用户操作更新面板）。

http://jsfiddle.net/auvez/

我的商店工作正常

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!'
        }
    ]
});

，但它仍然以AN为AN，大约10px高度灰色边框，并且不按要求占用300px。

我猜我错过了一些溢出声明或其他内容，但这令人沮丧，因为我花了〜4个小时来尝试使某些简单工作的工作： - （

Answer 1

hi问题在高度config

给出height:300（删除单语引号S）

请参阅此处的JSFIDDLE链接