ExtJS, ¿cómo anidar el contenedor rojo y verde (Capa 2) dentro del cuerpo de la Capa 1? Quiero los contenedores rojo y verde dentro de la Capa 1.
Ver descripción de imagen aquí
Código Actual:
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: ‘Encabezado Capa 1’
}, {
xtype: ‘container’,
style: {
‘background’: ‘lightgrey’,
‘color’: ‘black’,
‘font-size’: ’15px’,
},
width: ‘100%’,
height: 200,
html: ‘Cuerpo Capa 1’
}, ]
}, {
xtype: ‘container’,
style: {
‘background’: ‘darkred’,
‘color’: ‘white’,
‘font-size’: ’15px’,
},
width: ‘25%’,
height: 200,
html: ‘Izquierda Capa 2’
}, {
xtype: ‘container’,
style: {
‘background’ : ‘darkgreen’,
‘color’ : ‘white’,
‘font-size’: ’15px’,
‘pack’: ‘center’,
},
width: ‘25%’,
height: 200,
html: ‘Derecha Capa 2’
}
]
});
davy.ai
Para lograr la imagen de salida deseada, puedes hacer los siguientes cambios en el código actual:
vbox
existente, con una altura fija de50px
, para colocar el encabezado y la línea de separación horizontal:height: 200px
del segundo contenedor, para evitar que ocupe espacio innecesario:25%
cada uno, para alinearse con las secciones izquierda y derecha respectivamente:pack: 'center'
del cuarto contenedor, ya que no es necesario:Con estos cambios, el código debería lucir así: