View Full Version : Ext.ProgressBar size height

Troy Wolf
26 Feb 2010, 9:20 PM
I am posting in general discussion because I'd like to generally discuss the Ext.ProgressBar. ~o)

I'm just wanting to hear from folks who use the Ext.ProgressBar component (v2 or v3). I found that it simply did not work the way I'd expect. After several hours of trial and error, I gave up and wrote my own progress bar component--making use of Ext utilities such as TextMetrics to center my progress bar text horizontally and vertically no matter what size font, etc.

The number one issue I had with Ext.ProgressBar was that setting the height simply did not produce the desired result. The outer containing box would size accordingly, but the colored progress bar and the text always remained the same height. I tried stripping down my examples and used different browsers, but could not, for example, produce a 40px tall bar. I was able to add additional styling that got the height of the colored bar correct and enlarged my font size. However, the 2 text layers were no longer positioned exactly on top of each other. I tried to resolve it...but I reached that threshold of "I could build what I want quicker than I'll figure this out."

I had the exact same problem as the second image in this post:

In that post, however, the author says his problem went away after he eliminated a rogue stylesheet. Not so for me.

I'm very happy with my progress bar component and made it configurable in many ways and even added a performance option that skips the text metrics on text updates if you know your bar text does not change significantly while allowing you to override the setting for individual text updates if necessary. For example, if you are going to process 1,000 items and your progress bar text will look like "item 38 of 1,000". You don't really need to worry about exact centering just because the "38" will range from 1 to 1,000.

I don't like to re-invent the wheel, so I'd like to figure out where I went wrong with Ext.ProgressBar. ~o)

27 Feb 2010, 1:43 AM
A casual bit of fiddling comes up with

Ext.override(Ext.Element, {
alignMiddle: function(parent) {
if (Ext.isString(parent)) {
parent = Ext.get(parent) || this.up(parent);
'margin-top': (parent.getHeight() / 2 - this.getHeight() / 2) + 'px'

Ext.override(Ext.ProgressBar, {
setSize: Ext.ProgressBar.superclass.setSize,
onResize: function(w, h) {
var inner = Ext.get(this.el.child('.x-progress-inner')),
bar = inner.child('.x-progress-bar'),
pt = inner.child('.x-progress-text');
ptInner = pt.child('*');
ptb = inner.child('.x-progress-text-back'),
ptbInner = ptb.child('*');
Ext.ProgressBar.superclass.onResize.apply(this, arguments);

Really, the widget should support this!

Troy Wolf
28 Feb 2010, 1:13 PM
Thanks, Animal! You are kind of amazing, btw. Your "casual bit of fiddling" represents hours of frustrating trial and error for me. ~o)

I have not tested your tweaks, but knowing you, the code you posted is tested and functional.

I found it interesting my post was moved to Help. I really wasn't asking for help. As I had stated, I'd already given up on the ProgressBar and written my own component. I was simply interested in discussing why I found the ProgressBar inadequate for my specific purpose.


13 Oct 2010, 5:59 AM
This post really saved me a lot of time. Definitely belongs to Help...

13 Oct 2010, 6:18 AM
I'll FAQ it.