ExtJS：未知の高さの画像の下にあるテキスト

Question

私はExtJS 5を使用しています。

私は窓があります。中にはイメージとイメージの下のテキストが必要です。画像は実行時に変更することができるので、その高さを設定することはできません。

現在、私が持っている：

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

画像は、その親（ウィンドウ）の100％を持っています。しかし、ラベル用のコンテナは、画像を背景としてウィンドウの上部に表示されます。これは、クラスX-ボックス・アイテムとCSSがあります

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

私はliquidLayout要素（コンテナ）コメントを解除top: 0を持っていませんが、その後、このプロパティは、クラスx-box-itemから取られています。

コンテナを画像の下に配置するにはどうすればよいですか？私はHTMLですべてをレンダリングするコンセプトを持っています。それから、非常に簡単な作業ですが、ExtJSコンポーネントを使用してこれを実現することをお勧めします。

Answer 1

は、私はまだ別の容器にすべてを入れて、あなたは絶対的に位置を設定している理由は、この新しいコンテナが正しく

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