Sencha touch 2 Sencha触摸网格列无法调整为全屏

我是sencha的新手，我正在尝试使用sencha Architect 3中的sencha触摸网格扩展来显示包含文本和图像的元素列表。我已经能够在触摸屏组件中显示这些数据，但我无法将这些列调整为全屏大小。我花了好几个小时试图让它工作，但没有任何进展。下面是该视图的代码段。任何建议和帮助都将不胜感激

Ext.define('MyApp.view.MyGridView', {
 extend: 'Ext.grid.Grid',
 alias: 'widget.myGridView',

requires: [
    'Ext.grid.column.Template',
    'Ext.XTemplate',
    'Ext.grid.plugin.MultiSelection',
    'Ext.grid.plugin.ViewOptions',
        ],

config: {
    centered: false,
    fullscreen: false,
    height: '100%',
    styleHtmlContent: true,
    width: '100%',
    emptyText: 'No records found',
    store: 'Usines',
    itemHeight: 50,
    variableHeights: true,
    title: 'Sites',
    columns: [
        {
            xtype: 'templatecolumn',
            styleHtmlContent: true,
            tpl: [
                ' <div>',
                '            <img class="photo" src="data:image/png;base64,{picture}" />',
                ' </div>'
            ],
            width: 65,
            dataIndex: 'picture',
            text: 'Photo'
        },
        {
            xtype: 'templatecolumn',
            styleHtmlContent: true,
            tpl: [
                '<div float:left>',
                '    <strong>{name}</strong>',
                '</div>     '
            ],
            width: 150,
            dataIndex: 'name',
            text: 'Name'
        },
        {
            xtype: 'templatecolumn',
            styleHtmlContent: true,
            tpl: [
                '<div>',
                '    <tpl if="statutKpi==0">',
                '        <img  src ="images/status_green.png"/>   ',
                '    </tpl>',
                '    <tpl if="statutKpi==1">',
                '        <img  src ="images/status_orange.png"/>   ',
                '    </tpl>',
                '    ',
                '    <tpl if="statutKpi==2">',
                '        <img src ="images/status_red.png"/>',
                '    </tpl>',
                '</div>'
            ],
            width: 70,
            align: 'center',
            dataIndex: 'statusKpi',
            text: 'Kpi'
        },
        {
            xtype: 'templatecolumn',
            minWidth: 10,
            styleHtmlContent: true,
            tpl: [
                '<div float:right>',
                '',
                '    <tpl if="statutEvent==0">',
                '        <img  src ="images/msg_green.png"/>   ',
                '    </tpl>',
                '    <tpl if="statutKpi==1">',
                '        <img  src ="images/msg_red.png"/>   ',
                '    </tpl>',
                '',
                '</div>'
            ],
            width: 80,
            align: 'center',
            text: 'Event'
        }
    ],
    plugins: [
        {
            type: 'gridmultiselection'
        },
        {
            type: 'gridviewoptions'
        }
    ]
},

initialize: function() {
  Ext.Viewport.add({
  xclass:'MyApp.view.MyGridView'
 });

---

多亏了这个链接，我才能够解决这个问题