Размер столбцов Sencha Touch Grid не может быть изменен до полноэкранного

Question

Я новичок в Sencha, я пытаюсь использовать расширение Sencha Touch Grid в Sencha Architect 3 для отображения списков элементов, которые включают тексты и изображения. Мне удалось отобразить эти данные внутри компонента сенсорной сетки, но я не могу заставить эти столбцы изменить размер до полноэкранного размера. Я потратил часы, пытаясь заставить это работать, не делая никакого головокружительного пути. Ниже приведен фрагмент кода для представления. Любые советы и помощь будут оценены.

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