Progress Bar

[Joel]

I needed a progress bar for Sencha Touch (just like the Ext one) but couldn't seem to find one. Attached is my port of the Ext ProgressBar into Sencha Touch. Use it just like you would the Ext one. Eg:

var p = new Ext.MessageBox({progress: true});
p.show();
p.updateProgress(.7, 'Importing 7/10');
p.hide();

Just like the Ext one, you need to close the progress bar yourself. I've only tested it on iPhone, but Android should work.

[Joel]

If you are using this please change the css file to change all the right radius' from 8px to 20px. I made it all bigger for the iPhone, but forgot to fix the right hand side. Sorry!

[gkatz]

Joel;
thanks for sharing.
can you put a demo page up?
also, was the plugin reuploaded with the proper css?

[Joel]

I'll put up a demo page tonight. I can't seem to change the attached files (the 'Go Advanced' button on editing the posts doesn't work). So I've attached the corrected version here.

[hokusmokus]

Hi Joel,

I only started coding Sencha Touch a couple days ago, but I would recomend:

your code:

Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {

recommend:

Ext.ux.ProgressBar = Ext.extend(Ext.BoxComponent, {

Also, I recommend that you register an xtype:


Ext.reg('progressbar', Ext.ux.ProgressBar);
I hope this helps.

Thanks

[Joel]

You could put it in Ext.ux (and that's probably best-practice), but a progress bar really should be part of the core, and since I grabbed it from the Ext code-base I left it as Ext. Your choice.

You could register a type, but in this instance I'm just using it as part of the MessageBox and not intending to use it anywhere else. So the registration is not neccessary. But, again, it's your choice and if you wanted to use it elsewhere (and you needed it available through xtype) you could register it.

[hokusmokus]

Thanks for quick response.. i see your points.

I have a quick question, can you please explain this function definition:

updateProgress : function (value, text, animate)


I assume that 'value' is from 0-100? so if i put 100 the progressbar will be filled?

'text' is some status that will be displayed below progressbar?

'animate' is a boolean, stipulates to animate or not? not quite sure i understand..

your help is greatly apreciated,

thank you

[hokusmokus]

Nevermind, i got it working.. i understand.. wooohoo!

nice progress bar!

[Joel]

Sorry, I was a bit lazy and didn't bring the comments across from Ext. I'll update it tonight with the comments in case anyone else has the same problem.

Looks like you worked it out, but for anyone else:
- value: The percentage number the bar should be filled up by (a number between 0 and 1. Eg: for half filled use 0.5)
- text: The text to overlay on the bar. I usually use something like '1/10 Imported'. You need to construct it yourself
- animate: I don't think this is used (a hang over from Ext). On Ext it animates the moving of the bar. On Sencha it's ignored. I might see if this affects anything and port it across to if required.

-Joel

[Sameer Khan]

I am new to sencha touch..Right now in my application i am using Mask only...But our requirement is, to use progress bar..But in sencha touch 1 Api upto now there is no such class for progressbar...

Plz provide some steps to use your Progress bar...


Thanks in Advance...