Sencha Touch Bundle Trial Grid

Question

I´m trying to create a grid in a view,but the column headers are over the title and I don´t know what is incorrect. This is the preview:

Here is the code of the view:

Ext.define('demoapp.view.MainMenu',{
extend:'Ext.form.Panel',
requires:['Ext.TitleBar','demoapp.store.CCAA'],
alias:'widget.mainmenuview',
config:{
    layout:{
        type:'fit'
    },
    items:[{
        xtype:'fieldset',
        items:[{
            xtype:'titlebar',
            title:'Menú principal',
            docked:'top',
            items:[{
                xtype:'button',
                text:'Desconectar',
                itemId:'logOffButton',
                align:'right'
            }]
        },
        {
            xtype:'fieldset',
            items:[{
                xtype:'selectfield',
                itemId:'CCAAcombo',
                label:'Comunidad Autonoma',
                store:'storeCCAA',
                displayField:'nombre',
                valueField:'id',
                autoSelect:false,
                placeHolder:'Elige una para filtrar'
            },
            {
                xtype: 'container',

                items:[{
                    xtype: 'grid',
                    requires: ['Ext.grid.Grid',
                               'Ext.grid.HeaderGroup',
                               'Ext.grid.plugin.Editable',
                               'Ext.grid.plugin.ViewOptions',
                               'Ext.grid.plugin.MultiSelection',
                               'Ext.grid.plugin.ColumnResizing',
                               'Ext.grid.plugin.SummaryRow'
                    ],
                    title: 'EJEMPLO GRID LICITACIONES',
                    headerContainer: {
                           height: 65
                    },
                    itemHeight: 60,
                    columns:[
                             {
                                 text:'Id'
                             },
                             {
                                 text:'N.Licitacion'
                             },
                             {
                                 text:'Organismo'
                             },
                             {
                                 text:'Tipo'
                             },
                             {
                                 text:'F-Pub'
                             },
                             {
                                 text:'Estado'
                             },
                             {
                                 text:'Ofertado'
                             },
                             {
                                 text:'Presupuestado'
                             },
                             {
                                 text:'Prorroga'
                             }
                    ]
                }]
            }]
        }]
    }],
    listeners:[{
        delegate:'#logOffButton',
        event:'tap',
        fn:'onLogOffButtonTap'
    },
    {
        delegate:'#CCAAcombo',
        event:'change',
        fn:'onCCAAcomboChange'
    }]
},
onLogOffButtonTap:function(){
    this.fireEvent('onSignOffCommand');
},
onCCAAcomboChange:function(field,value){
    var idCCAA=value;
    this.fireEvent('onCCAAcomboChangeAction',idCCAA);
}
});

I want the column headers and columns under the title.

Answer 1

Add:

width:'100%',

to the grid properties solves the problem.