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>

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/21n5

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

1 个答案: