Sencha Touch Grid columns cannot resize to fullscreen - sencha-touch-2

Question

I am new to sencha, I am trying to use Sencha Touch Grid extension in sencha Architect 3 to display lists of elements which includes texts and images. I have been able to display these data inside a touch grid component but I can't get these columns to resize to fullscreen size. I have spent hours trying to get it work without making any head way. Below is the code snippet for the view. Any advice and help will be appreciated.
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'
});