Sencha Touch Bundle 试用网格

Question

我正在尝试在视图中创建网格，但是 headers 列在标题上方，我不知道哪里不正确。 这是预览：

视图代码如下：

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

我想要 headers 列和标题下的列。

Answer 1

添加：

width:'100%',

到网格属性解决问题。