View Full Version : Progress bar extension.

11 Aug 2007, 3:12 PM
Hi, all.

This extension is a very simple realization of progress bar component.
There are two classes:
Ext.ux.ProgressBar, which inherits from Ext.BoxComponent and
Ext.ux.ProgressBarItem, which inherits from Ext.Toolbar.Item and delegates to Ext.ux.ProgressBar.

The screenshoot and extension package are attached to the message. The api is simple but if anyone will have questions, I'll do my best to answer.

12 Aug 2007, 3:31 AM
IE Style bugfix.

12 Aug 2007, 8:49 PM
FYI, there is an official Ext ProgressBar in 2.0 for anyone who has SVN access.

12 Aug 2007, 11:22 PM
Yes, I know but I am not in that list yet.

13 Aug 2007, 12:15 AM
No problem -- just mentioning it in case anyone else reads this and is looking for the same thing in 2.0 :). Your version should still be quite useful for anyone on 1.1.

15 Aug 2007, 3:06 AM
This looks great, I am experimenting with Ext 1.1 to see what its all about.

Do you have a sample of how one would use this progress bar?
I can't seem to get it to work, I guess I am pretty dumb when it comes to Ext things right now!

I have :

progress = new Ext.ux.ProgressBar( {id:'statusbar.progress'} );
progress.render( Ext.get('statusbar.progress') ) ;

<span id="statusbar.progress" style="width:200px;height:24px"></span>

But nothing happens?

15 Aug 2007, 3:25 AM
Try to change span to div, or td any block element will do.
Also there is a bug in getPercentValue() method, try to replace it with following

getPercentValue : function(value)
value = value || this.value;
var gap = this.max - this.min;
value -= this.min;
return Math.round(value * 100 / gap);

Or download my UploadDialog extension (http://max-bazhenov.com/dev/ExtJS.ux/Ext.ux.UploadDialog.zip), the updated progress bar extension is included in the package

15 Aug 2007, 4:11 AM
Works great now thanks!!
Will be sure to check out the UploadDialog extension as well!

28 Aug 2007, 7:37 PM
I noticed there is a ProgressBarItem class in the .js file as well, can you post an example on how to add a ProgressBarItem to a toolbar dynamically? I know you just add an instance of it to the toolbar, but I'm not sure how to go about rendering it correctly after it's dynamically added to the toolbar via the toolbar's .add() method.

29 Aug 2007, 4:26 AM
Use it like any other toolbar item, it will be rendered by the toolbar automaticaly.

var tb = new Ext.Toolbar('container_id');
var progress_bar = tb.addItem(new Ext.ux.ProgressBarItem({value: 35}));

Please notice that file posted in the thread first message is outdated and contains bugs, the last version of the Ext.ux.ProgressBar is included in the another my extension Ext.ux.UploadDialog (http://max-bazhenov.com/dev/ExtJS.ux/Ext.ux.UploadDialog.zip)