ExtJS: bilinmeyen yüksekliğin görüntü altındaki metin

Question

ExtJS kullanıyorum 5.

Pencerem var. İçeride resmin altına bir görüntü ve bir metne ihtiyacım var. Görüntü çalışma zamanında değiştirilebilir, bu yüzden yüksekliğini ayarlayamıyorum.

Şu anda var:

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' 
       } 
      ] 
     } 
    ] 
} 

Görüntü üst sitesinden (pencere)% 100'ünü sahiptir. Ancak etiketler için kapsayıcı, arka plan olarak görüntünün bulunduğu pencerenin üstünde oluşturulur. Bu sınıf, x-box-madde ve CSS içeriyor:

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

ben liquidLayout eleman (konteyner) yorumsuz top: 0 yok ama o zaman bu özellik sınıfından x-box-item alınır.

Konteyneri görüntünün altına nasıl yerleştirebilirim? HTML’de bir bütünlük oluşturma konseptim var ve o zaman çok kolay bir görev ama bunu ExtJS bileşenlerini kullanarak yapmayı tercih ediyorum.

Answer 1

Ben henüz başka kapta şeyi koymak ve mutlak için konumunu ayarlamak neden bu yeni konteyner doğru

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' 
         } 
        ] 
       } 
      ] 
     } 
    ] 
});