1

Estoy creando un Ext.Window y lo estoy intentando organizar con paneles, ya los he creado pero no comprendo bien como darles estructura, Quiero que un icono y dos frases se vean de la siguiente forma:

-------------------------------
|           |       Frase 1
|    Icono  | -----------------
|           |       Frase 2

-------------------------------

Y he usado el siguiente código:

var Panel1 = new Ext.Panel({
    header: false,
    frame: false,
    border: false,
    collapsible: false,
    layout: 'column',
    items [{
          xtype: 'label',
          text: "Frase 1",
          style: 'font-size:12px; margin-left: 20px; margin-top: 30px'
          }]
});

var Panel2 = new Ext.Panel({
    header: false,
    frame: false,
    border: false,
    collapsible: false,
    layout: 'column',
    items [{
          xtype: 'label',
          text: "Frase 2 2",
          style: 'font-size:12px; margin-left: 20px; margin-top: 30px'
          }]
});

var miIcono = Ext.create({
   xtype: 'box',
   height: 30,
   width: 30,
   autoEl: {
        tag: 'img',
        src: 'rutaDeMiImagen'
       }
});

myNewWindow = nex Ext.Window({
    width: 400,
    height: 250,
    items : [miIcono, Panel1, Panel2]
});

myNewWindow.show()

Pero se me muestra de la siguiente forma:

-------------
|   Icono   |
-------------
|  Frase 1  |
-------------
|  Frase 2  |
-------------

¿Alguna idea de como solucionar esto? Gracias por vuestro tiempo.

2
  • ¿Que versión de Ext estas usando?
    – Marcos
    Commented el 8 abr. 2022 a las 10:53
  • Buenos Marcos, gracias por interesarte por mi pregunta, pues en mi caso mi Ext es el Ext 3.2.0
    – MoonLight
    Commented el 9 abr. 2022 a las 10:08

1 respuesta 1

0

Podrías usar TableLayout.

Ejemplo:

Ext.onReady(function() {

  var Panel1 = new Ext.Panel({
    header: false,
    frame: false,
    border: false,
    collapsible: false,
    html: "Frase 1",
    style: 'font-size:12px; margin-left: 20px; margin-top: 30px'
  });

  var Panel2 = new Ext.Panel({
    header: false,
    frame: false,
    border: false,
    collapsible: false,
    layout: 'column',
    html: "Frase 2",
    style: 'font-size:12px; margin-left: 20px; margin-top: 30px'
  });

  var miIcono = Ext.create({
    xtype: 'box',
    height: 30,
    width: 30,
    rowspan: 2, // ACA indicamos que ocupa 2 filas
    autoEl: {
      tag: 'img',
      src: 'rutaDeMiImagen'
    }
  });

  var panel = new Ext.Panel({
    renderTo: Ext.getBody(),
    layout: 'table',
    layoutConfig: {
      columns: 2 // ACA indicamos que son 2 columnas
    },
    items: [
      miIcono,
      Panel1,
      Panel2
    ]
  });
});
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<script src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>

1
  • He probado y curiosamente se muestran toda seguidas en vez de bajar, intentaré averiguar por qué pasa esto
    – MoonLight
    Commented el 10 abr. 2022 a las 14:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.