Ext JS Progress Bar - 文本對齊到中心

剛剛開始使用progressbarwidget時，我希望textTpl中的文本始終在進度欄中居中對齊，而不管該欄的百分比是多少，當我的意思是居中時，我的意思是進度條的中心，而不是進度值的中心。請參閱下面小提琴和附加的圖像Ext JS Progress Bar - 文本對齊到中心

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

我看到另一個線程來設置位置參考：相對的，這並設置文本到酒吧的中心，但這樣做意味着酒吧不再顯示進度。我看到進度條創建時有2個div，包含以下類，x-progress-text和x-progress-bar都包含文本值。

在此先感謝

來源

2016-07-14 user2751034

https://www.sencha.com/forum/showthread.php?313019-Progress-Bar-how-to-center-Text-at-all-times-regardless-of百分比 –

您可以擴展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

來源

2016-07-15 08:43:16

嗨，這看起來很有希望，有一件事我注意到，如果您將值設置爲0.1（10％），文本被複制，一個居中，另一個左對齊，我設法通過添加樣式屬性到backgroundEl也是如此。如果它解決了我的問題，我會將其插入我的應用程序並進行更新:) – user2751034

這已解決了我的問題，謝謝:) – user2751034

的最終解決方案是在進步添加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評論的）的情況下
你有雙色文字，就像在經典主題：

即使你重現模板煎茶源（與兒童0）：

來源

2016-09-29 14:13:22 Teejay

Ext JS Progress Bar - 文本對齊到中心

回答

相關問題