Ext JSプログレスバー - テキストを中央に配置

Question

ちょうどプログレスバーウィジェットを使用して開始しました。バーが何パーセントであるかにかかわらず、常にtextbarのテキストが進行中のバーの中央に揃えられます。プログレスバーの中心であり、進行値の中心ではありません。私は位置を設定するには、別のスレッドでの参照を見て、以下のフィドルと添付された画像

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

を参照してください：相対的な、これはバーの中央にテキストを設定するが、そうすることはバーを意味しませんもはや進歩を示さない。進捗バーが作成されたときに、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()に何が起こるかからコピーされます。あなたはクラシックテーマのように、2色のテキストを持っている場合は

---

ユーザーCDからソリューションに...が働く（もuser2751034コメントでいずれかを実行）しない
：あなたは（のtextEl子どもたちと煎茶ソースにテンプレートを再現していても

0）：