Ext JS Fortschrittsbalken - Text an der Mitte ausgerichtet

Question

Ich habe gerade mit progressbarwidget begonnen, ich möchte den Text von meinem TextTpl jederzeit in der Fortschrittsleiste zentriert werden, unabhängig davon, um wie viel Prozent der Balken steht, wenn ich meine zentriert meine das Zentrum des Fortschrittsbalkens und nicht das Zentrum des Fortschrittswerts. Siehe Geige unten und angehängtes Bild

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

ich auf einem anderen Thread eine Referenz zu sehen gesetzt position: relative, das den Text in der Mitte der Stange festgelegt ist, aber tut so bedeutet die Bar zeigt den Fortschritt nicht mehr an. Ich sehe, wenn der Fortschrittsbalken erstellt wird, hat es 2 divs, die die folgenden Klassen enthalten, x-progress-Text und x-progress-bar, beide enthalten den Textwert.

Vielen Dank im Voraus

Answer 1

Sie ProgressBarWidget erweitern können, und die template außer Kraft setzen, wie:

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

    xtype: 'fiddle-progressbarwidget', 

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

Arbeitsbeispiel: https://fiddle.sencha.com/#fiddle/1dn4

Answer 2

Die endgültige Lösung ist eine onResize Handler über die Fortschritte hinzufügen Stabbehälter:

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()); 
} 

Diese Idee von kopiert, was inExt.grid.column.Widget.onResize() passiert.

---

Die Lösung von Benutzern CD .. funktioniert nicht (auch nicht das man in user2751034 Kommentar)
im Fall, dass Sie Zweifarben-Text haben, wie in Klassischen Thema :

auch wenn Sie die Vorlage in Sencha Quellen (mit textEl Kinderreproduzieren 0):