ExtJS 3.4 vbox layout is not rendering correctly

Question

I'm trying to render a GridPanel, and two regular Panels in a vbox layout (will update the Panels based on user actions later).

http://jsfiddle.net/auVez/

I have the store working OK

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

And the GridPanel was working OK before I started working with the vbox...

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
    })
});

I've added a height to the vbox, because I read that it must have one...

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

But it still renders as an, approx, 10px height grey border, and doesn't take up 300px as requested.

I'm guessing I'm missing some overflow declaration or something, but this is frustrating, as I've spent ~4 hours I don't have on trying to get something so simple to work :-(

Answer 1

Hi problem is in height config

give height:300 (remove single quotes s)

see here jsfiddle link