RowEditor coverd by the column header

I am trying to use the roweditor on the grid panel. But the roweditor is always shown half coverd by the column header (see print screen). Any ideas what the issue is here?

roweditor-issue.jpg

Here is the source code:

Code:

Ext.define('lab6.view.LanguageList', { 
    extend : 'Ext.grid.Panel',
    
    alias  : 'widget.languagelist',
    
    title       : 'Languages',
    
    columnLines : false,
    
    store       : 'Languages',
    
    header: true,
    
    frame: true,
    
    selModel: 'rowmodel',
    
    plugins: {

        ptype: 'rowediting',
        clicksToEdit: 1
    },
    
    columns : [
        {
            xtype     : 'gridcolumn',
            flex      : 1,
            dataIndex : 'Id',
            text      : 'Id'
        },
        {
            xtype     : 'gridcolumn',
            flex      : 1,
            dataIndex : 'ShortName',
            text      : 'Short Name',
            editor:{
                allowBlank:false
            }
        },
        {
            xtype     : 'gridcolumn',
            flex      : 1,
            dataIndex : 'IsoCode',
            text      : 'ISO Code',
            editor:{
                allowBlank:false
            }
        },
        {
            xtype     : 'gridcolumn',
            flex      : 1,
            dataIndex : 'UnitId',
            text      : 'Un.IT Id',
            editor:{
                allowBlank:false,
                xtype:'numberfield',
                minValue:1
            }
        }
    ]
});

Any help would be greatly appreciated!

Tom

RowEditor coverd by the column header