Extjs border region: SOUTH--- width is too small - extjs

Question

Can someone tell me why my border: SOUTH region has such a small width?
I want it to stretch to take the whole bottom of the screen.
I've tried to make my code as basic as possible so I can't see why that fieldLabel is being squished.
Ext.define('ExtApplication4.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'ExtApplication4.view.main.MainController',
'ExtApplication4.view.main.MainModel',
'ExtApplication4.view.main.Header',
'ExtApplication4.view.main.Footer',
'ExtApplication4.view.portalRealtime.PortalRealtime',
'ExtApplication4.view.settings.settings',
'ExtApplication4.view.menu.Menu',
'ExtApplication4.model.MenuListModel',
'ExtApplication4.model.ClientListModel'
],
controller: 'main',
viewModel: 'main',
plugins: 'viewport',
layout: {
type: 'border',
align: 'stretch'
},
items: [{
region: 'center',
id: 'centerID',
layout: 'card',
activeItem: 0,
items: [{
xtype: 'app-portalRealtime'
}]
}, {
xtype: 'appheader',
region: 'north',
title: 'north',
style: 'background-color: #363434;'
}, {
xtype: 'appfooter',
region: 'south'
//title: 'south'
//style: 'background-color: #363434;'
//title: 'Footer',
//region: 'south',
//xtype: 'container',
//frame: true,
//height: 100,
//minHeight: 75,
//maxHeight: 150,
//html: '<p>Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com</p>',
//items: [
//{
// layout: {
// type: 'hbox'
// },
// anchor: '100%',
// defaults: {
// xtype: 'displayfield',
// width: 200
// },
// items:[
// {
// //xtype: 'displayfield',
// fieldLabel: 'hello user'
// },
// {
// //xtype: 'displayfield',
// fieldLabel: 'goodbye user'
// }
// ]
//}
//]
}, {
region: 'west',
split: true,
collapsible: true,
title: 'Menu',
xtype: 'app-menu'
}]
});
below is the footer
Ext.define('ExtApplication4.view.main.Footer', {
//extend: 'Ext.panel.Panel',
extend: 'Ext.container.Container',
xtype: 'appfooter',
requires: ['Ext.layout.container.Fit'],
//html: '<p>Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com</p>'
height: 30,
//width: '100%',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com'
//cls: 'myLabelCSSFooter'
},
//{
// xtype: 'tbspacer',
// flex: 1
//},
{
xtype: 'displayfield',
fieldLabel: 'PrelimData:',
value: '6:00 AM'
//cls: 'myLabelCSSFooter',
//margin: '0 10px 0 0'
},
{
xtype: 'displayfield',
fieldLabel: 'PrelimData:',
value: '6:00 AM'
//cls: 'myLabelCSSFooter',
//margin: '0 10px 0 0'
}
]
picture

Answer 1

Try this:
layout: {
type: 'border',
align:'stretch'
},
and the app footer:
},{
region: 'south',
xtype:'container',
height: 25,
padding: '5 0 0 0',
frame: true,
style: 'border-top: 1px solid #363434;',
html: '<div style="text-align:center; font-size:10px;"> 'Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com',</div>'
},{
EDITED:
It may be useful to organize as follows:
Ext.define('YourApp.view.main.Main', {
extend: 'Ext.container.Viewport',
requires: [
'RA.view.main.MainController',
'RA.view.main.MainModel',
'RA.view.west.MainMenuPanel',
'RA.view.center.MainCenterPanel',
'RA.view.footer.Footer',
'RA.view.header.headerContent'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border',
align:'stretch'
},
items: [{
region: 'south',
xtype: 'appfooter'
},{
region: 'north',
xtype: 'headercontent'
},{
region: 'west',
xtype: 'mainmenupanel'
},{
region: 'center',
xtype: 'maincenterpanel'
}]
});
In app footer classe use:
requires : ['Ext.layout.container.Fit'],
Look at this fiddle:
https://fiddle.sencha.com/#fiddle/1hki