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-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组件实现这一点。

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

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

1 个答案: