enter image description here How I want it to look ^
Current Code:
Ext.create('Ext.Container', { width: '100%', layout: 'vbox', renderTo: document.body, defaults: { xtype: 'container', width: '50%', layout: 'vbox', border: 0 }, items: [{ bodyStyle: {}, defaults: { style: {}, }, items: [{}] }, { items: [{ xtype: 'container', style: {}, }, { xtype: 'container', style: { 'background': 'grey', 'color': 'white', 'font-size': '15px', }, width: '100%', height: 50, html: 'Layer 1 Header' }, { xtype: 'container', style: { 'background': 'lightgrey', 'color': 'black', 'font-size': '15px', }, width: '100%', height: 200, html: 'Layer 1 Body' }, ] }, { xtype: 'container', style: { 'background': 'darkred', 'color': 'white', 'font-size': '15px', }, width: '25%', height: 200, html: 'Layer 2 Left' }, { xtype: 'container', style: { 'background': 'darkgreen', 'color': 'white', 'font-size': '15px', 'pack': 'center', }, width: '25%', height: 200, html: 'L ayer 2 Right' } ] });
You can combine vbox
/ hbox
layout with align
set to stretch
in order to achieve this layout. Check this code, tested in a Fiddle (ExtJS 7.3.0 - Material, classic toolkit):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo: document.body,
items: [{
xtype: 'container',
style: {
'background': 'grey',
'color': 'white',
'font-size': '15px',
},
height: 50,
html: 'Layer 1 Header'
}, {
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [, {
xtype: 'container',
flex: 1,
height: 200,
style: {
'background': 'darkred',
'color': 'white',
'font-size': '15px',
},
html: 'Layer 2 Left'
}, {
xtype: 'container',
flex: 1,
height: 200,
style: {
'background': 'darkgreen',
'color': 'white',
'font-size': '15px'
},
html: 'Layer 2 Right'
}]
}
]
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.