Grid problem

Hi,

I have created a very simple project that displays a few hundred records in a grid.

The problem is that the grid doesn't seem to display correctly. As shown in image below, the grid does not use all available space.

grid1.jpg

If I sort one column by clicking on the column header all available space is used but I suddenly have two scrollbars??? See image below

grid2.jpg

What is happening here? Please help me on this. I have been very impressed with what I've seen of Ext JS so far, but that this simple example fails makes me a little bit scared about the quality of the widgets. Hopefully it is me that does something wrong. My view file looks like this:

Code:

Ext.define('testApp.view.main.Main', {

    extend: 'Ext.container.Container',
    xtype: 'app-main',

    items: [{
        xtype: 'grid',
        store : 'Objects',


columns : [{
    text : 'Column1',
    dataIndex : 'Column1'
},{
    text : 'Column2',
    dataIndex : 'Column2'
},{
    text : 'Column3',
    dataIndex : 'Column3'
}]

}]
});

And by the way I have tried to runn sencha app build and sencha app refresh but it does not help.