Extjs Ext JS进度条-文本对齐到中心

刚开始使用progressbarwidget，我希望textTpl中的文本始终在进度条内居中对齐，无论进度条的百分比是多少，当我指居中时，我指的是进度条的中心，而不是进度值的中心。请参阅下面的小提琴和所附图片

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

---

提前感谢

您可以扩展

ProgressBarWidget

，并覆盖

模板

，如：

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

    xtype: 'fiddle-progressbarwidget',

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

---

工作示例：

最终解决方案是在进度条容器上添加一个

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..的解决方案不起作用（用户2751034注释中的解决方案也不起作用）
如果您有两种颜色的文本，如经典主题：

即使您在Sencha源代码中复制模板（使用

textEl

的

barEl

子级）：

---

您好，这看起来很有希望，有一点我注意到了，如果您将该值设置为0.1（10%），则文本将重复，一个居中，另一个左对齐，我通过将样式属性添加到背景中来对其进行排序。如果解决了我的问题，我会将其插入我的应用程序并进行更新：）