Question

刚开始使用progressbarwidget，我希望textTpl中的文本始终在进度条中居中对齐，无论条形图的百分比是什么，当我的意思是居中时我的意思是进度条的中心而不是中心进步价值。请参阅下面的小提琴和附加图像

https://fiddle.sencha.com/#fiddle/1dm7

我看到另一个线程上的引用来设置位置：relative，这会将文本设置为条形图的中心，但这样做意味着条形图不再显示进度。我看到创建进度条时它有2个div，包含以下类，x-progress-text和x-progress-bar，两者都包含文本值。

提前致谢

Answer 1

您可以展开ProgressBarWidget，并覆盖template，例如：

Ext.define('Fiddle.view.ProgressBarWidget', {
    extend: 'Ext.ProgressBarWidget',

    xtype: 'fiddle-progressbarwidget',

    template: [{
        reference: 'backgroundEl'
    }, {
        reference: 'barEl'
    }, {
        reference: 'textEl',
        style: {
            left: 0,
            right: 0
        }
    }],
});

工作示例：https://fiddle.sencha.com/#fiddle/1dn4

Answer 2

最终解决方案是在进度条容器上添加onResize处理程序：

onResize: function () {
    var me = this,
        progressBar = me.down('progressbarwidget');

    // Set text width to element width so that it can be centered
    progressBar.setWidth(progressBar.el.getWidth());
}

这个想法是从 Ext.grid.column.Widget.onResize()中发生的事情中复制的。

用户 CD .. 的解决方案不起作用（ user2751034 评论中的解决方案也不起作用）
如果您有双色文本，例如 Classic 主题：

即使您在Sencha来源中复制模板（textEl个barEl子项也是如此：

Ext JS Progress Bar - 文本对齐到中心

2 个答案: