ExtJS：未知高度的图像下方的文本答案

【问题标题】：ExtJS: text beneath image of unknown heightExtJS：未知高度的图像下方的文本
【发布时间】：2016-03-31 13:15:39
【问题描述】：

我正在使用 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-box-item 和 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 组件来实现这一点。

【问题讨论】：

为什么将位置设置为绝对？让 ext 做布局问题

标签： css extjs

【解决方案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'
                        }
                    ]
                }
            ]
        }
    ]
});

【讨论】：