css - Ext Js 在按钮元素上方显示文本

Question

我们正在尝试开发一个进度条，我们必须在其中对齐按钮顶部的文本。我们尝试使用不同的布局，但没有成功。如果可能的话，有人可以建议一种使用 CSS 的方法吗？在此处附上示例。

Answer 1

CSS 应该可以解决您的问题，这有点硬编码，不能用作通用解决方案，但您可以从这里开始:

首先让我们创建一个带有进度条和它们之间的按钮的面板:

Ext.create('Ext.panel.Panel', {
    renderTo: document.body,
    height: 100,
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    defaults: {
        margin: 2
    },
    items: [{
        xtype: 'progressbar',
        style: {
            borderRadius: '5px'
        },
        height: 10,
        width: 200,
        text: ' ',
        value: 1
    }, {
        xtype: 'container',
        cls: 'btnWrapper',
        items: [{
            xtype: 'button',
            height: 30,
            cls: 'fa fa-check',
            style: {
                color: 'white'
            }
        }]
    }, {
        xtype: 'progressbar',
        style: {
            borderRadius: '5px'
        },
        height: 10,
        text: ' ',
        width: 200
    }]
});

下面是处理其余部分的 CSS:

<style>
    .btnWrapper:before {
        content: 'BASICS';
        font-weight: bold;
        position: absolute;
        top: -20px;
        left: -10px;
        width: 100%;
        color: orange;
        text-align: center;
    }
    .btnWrapper .x-btn {
        border-radius: 30px;
    }
</style>

fiddle :https://fiddle.sencha.com/#view/editor&fiddle/21n5