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.

Answer

1. 

   davy.ai

   July 19, 2023 at 3:36 am

   Para lograr la imagen de salida deseada, puedes hacer los siguientes cambios en el código actual:

   1. Agrega un nuevo contenedor dentro del diseño vbox existente, con una altura fija de 50px, para colocar el encabezado y la línea de separación horizontal:

   {
       xtype: 'container',
       layout: {
           type: 'hbox',
           align: 'stretch'
       },
       height: 50,
       items: [{
           xtype: 'container',
           style: {
               background: 'grey',
               color: 'white',
               fontSize: '15px',
               flex: 1
           },
           html: 'Encabezado de la Capa 1'
       }, {
           xtype: 'container',
           style: {
               width: '3px',
               background: 'black',
               marginLeft: '10px',
               marginRight: '10px'
           }
       }]
   }
   

   1. Elimina la propiedad height: 200px del segundo contenedor, para evitar que ocupe espacio innecesario:

   {
       xtype: 'container',
       style: {
           background: 'lightgrey',
           color: 'black',
           fontSize: '15px'
       },
       width: '100%',
       html: 'Cuerpo de la Capa 1'
   }
   

   1. Agrega dos nuevos contenedores para la sección del pie de página y establece sus anchos en 25% cada uno, para alinearse con las secciones izquierda y derecha respectivamente:

   {
       xtype: 'container',
       layout: 'vbox',
       style: {
           background: 'darkred',
           color: 'white',
           fontSize: '15px',
           textAlign: 'center',
           height: '100%'
       },
       width: '25%',
       items: [{
           xtype: 'container',
           style: {
               marginTop: '50px',
               flex: 1
           },
           html: 'Capa 2 Izquierda'
       }, {
           xtype: 'container',
           style: {
               marginBottom: '50px',
               flex: 1
           },
           html: 'Pie de página Izquierdo'
       }]
   }, {
       xtype: 'container',
       layout: 'vbox',
       style: {
           background: 'darkgreen',
           color: 'white',
           fontSize: '15px',
           textAlign: 'center',
           height: '100%'
       },
       width: '25%',
       items: [{
           xtype: 'container',
           style: {
               marginTop: '50px',
               flex: 1
           },
           html: 'Capa 2 Derecha'
       }, {
           xtype: 'container',
           style: {
               marginBottom: '50px',
               flex: 1
           },
           html: 'Pie de página Derecho'
       }]
   }
   

   1. Elimina la propiedad pack: 'center' del cuarto contenedor, ya que no es necesario:

   {
       xtype: 'container',
       style: {
           background: 'darkgreen',
           color: 'white',
           fontSize: '15px'
       },
       width: '25%',
       height: 200,
       html: 'Capa 2 Derecha'
   }
   

   Con estos cambios, el código debería lucir así:

   Ext.create('Ext.Container', {
       width: '100%',
       layout: 'vbox',
       renderTo: document.body,
       defaults: {
           xtype: 'container',
           width: '50%',
           layout: 'vbox',
           border: 0
       },
       items: [{
           xtype: 'container',
           layout: {
               type: 'hbox',
               align: 'stretch'
           },
           height: 50,
           items: [{
               xtype: 'container',
               style: {
                   background: 'grey',
                   color: 'white',
                   fontSize: '15px',
                   flex: 1
               },
               html: 'Encabezado de la Capa 1'
           }, {
               xtype: 'container',
               style: {
                   width: '3px',
                   background: 'black',
                   marginLeft: '10px',
                   marginRight: '10px'
               }
           }]
       }, {
           bodyStyle: {},
           defaults: {
               style: {},
           },
           items: [{}]
       }, {
           items: [{
               xtype: 'container',
               style: {},
           }, {
               xtype: 'container',
               style: {
                   background: 'lightgrey',
                   color: 'black',
                   fontSize: '15px'
               },
               width: '100%',
               html: 'Cuerpo de la Capa 1'
           }, ]
       }, {
           xtype: 'container',
           layout: 'vbox',
           style: {
               background: 'darkred',
               color: 'white',
               fontSize: '15px',
               textAlign: 'center',
               height: '100%'
           },
           width: '25%',
           items: [{
               xtype: 'container',
               style: {
                   marginTop: '50px',
                   flex: 1
               },
               html: 'Capa 2 Izquierda'
           }, {
               xtype: 'container',
               style: {
                   marginBottom: '50px',
                   flex: 1
               },
               html: 'Pie de página Izquierdo'
           }]
       }, {
           xtype: 'container',
           layout: 'vbox',
           style: {
               background: 'darkgreen',
               color: 'white',
               fontSize: '15px',
               textAlign: 'center',
               height: '100%'
           },
           width: '25%',
           items: [{
               xtype: 'container',
               style: {
                   marginTop: '50px',
                   flex: 1
               },
               html: 'Capa 2 Derecha'
           }, {
               xtype: 'container',
               style: {
                   marginBottom: '50px',
                   flex: 1
               },
               html: 'Pie de página Derecho'
           }]
       }]
   });
   

Comments are closed.