grid layout issue

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function () {
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': []
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    Ext.create('Ext.form.Panel', {
        title: 'Functional Groups',
        height: 600,
        width: 400,
        margin: '15 25 10 5',
        emptyText: 'No data',
        viewConfig: 
        { emptyText: 'No data',
          deferEmptyText: false },
        bodyPadding: 10,
        flex: 1,
        renderTo: Ext.getBody(),
        items: [
            {
            xtype: 'fieldset',
            title: 'Physical Stock Locations',
            itemId: 'locations',
            items: [{
                xtype: 'grid',
                minHeight: 65, //Causing layout failure => else the view has no height and the empty text is not displayed.
                border: false,
                emptyText: 'No locations for this group',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }]
            }]
        }]
    });
    //else the empty text is not displayed.
    Ext.ComponentQuery.query('#locations grid')[0].view.refresh();
});