Крайняя граница области: ЮГ --- ширина слишком маленькая

Question

Может кто-нибудь сказать мне, почему моя граница: ЮЖНАЯ область имеет такую ​​небольшую ширину? Я хочу, чтобы он растянулся, чтобы взять всю нижнюю часть экрана. Я попытался сделать мой код максимально простым, поэтому я не могу понять, почему этот fieldLabel сжимается.

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

ниже футер

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' 
    } 
] 

картина

Answer 1

Попробуйте это:

layout: { 
    type: 'border', 
    align:'stretch' 
}, 

и приложение колонтитула:

},{ 
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:

Это может быть полезно организовать следующим образом:

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

В приложении использования сноска Classe:

requires : ['Ext.layout.container.Fit'], 

Посмотрите на эту скрипку:

https://fiddle.sencha.com/#fiddle/1hki