ExtJS: Text unter Bild unbekannter Höhe

Question

Ich verwende ExtJS 5.

Ich habe ein Fenster. Im Inneren brauche ich ein Bild und einen Text unter dem Bild. Das Bild kann zur Laufzeit geändert werden, daher kann ich seine Höhe nicht einstellen.

Zur Zeit habe ich:

Ext.define('SystemMonitor.view.AboutWindow', { 
    extend: Ext.window.Window, 
    layout: 'vbox', 
    height: 420, 
    width: 652, 
    items: [ 
     { 
      xtype: 'image', 
      width: '100%', 
      //autoEl: 'div', 
      //height: '100%', 
      src: 'resources/images/about.png' 
     }, 
     { 
      xtype: 'container', 
      layout: 'vbox', 
      //liquidLayout: true, 
      padding: 10, 
      items: [ 
       { 
        xtype: 'label', 
        text: 'Server Monitor' 
       }, 
       { 
        xtype: 'label', 
        text: '(c) 2016' 
       } 
      ] 
     } 
    ] 
} 

Bild hat 100% ihrer Eltern (Fenster). Der Container für Etiketten wird jedoch am oberen Fensterrand mit dem Bild als Hintergrund gerendert. Es hat Klasse x-box-Element und CSS:

element.style { 
    padding: 10px; 
    margin: 0px; 
    right: auto; 
    left: 0px; 
    top: 0; 
} 
.x-box-item { 
    position: absolute !important; 
    left: 0px; 
    top: 0; 
} 

Als ich Kommentar- liquidLayout das Element (Container) nicht top: 0, aber dann ist diese Eigenschaft von Klasse x-box-item genommen.

Wie kann ich den Container unter dem Bild positionieren? Ich habe das Konzept, alles in HTML zu rendern, und dann ist es eine sehr einfache Aufgabe, aber ich bevorzuge es, dies mit ExtJS-Komponenten zu erreichen.

Answer 1

Ich habe alles noch in einem anderen Behälter und dieser neue Container ordnet alles richtig

Ext.define('SystemMonitor.view.AboutWindow', { 
    extend: 'Ext.window.Window', 
    height: 420, 
    width: 652, 
    items: [ 
     { 
      xtype: 'container', 
      items: [ 
       { 
        xtype: 'image', 
        width: '100%', 
        src: 'resources/images/about.png' 
       }, 
       { 
        xtype: 'container', 
        cls: 'page-content', 
        layout: { 
         type: 'vbox', 
         align: 'stretch' 
        }, 
        items: [ 
         { 
          xtype: 'label', 
          itemId: 'softwareTitleAndVersion', 
          text: 'System Monitor ' 
         }, 
         { 
          xtype: 'label', 
          itemId: 'copyright' 
         } 
        ] 
       } 
      ] 
     } 
    ] 
});