View Full Version : Progress Bar

4 Dec 2011, 7:37 PM
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.updateProgress(.7, 'Importing 7/10');

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

4 Dec 2011, 7:44 PM
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!

6 Dec 2011, 1:38 AM
thanks for sharing.
can you put a demo page up?
also, was the plugin reuploaded with the proper css?

6 Dec 2011, 1:27 PM
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.

6 Dec 2011, 4:04 PM
Hi Joel,

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

your code:

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


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.


6 Dec 2011, 4:08 PM
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.

6 Dec 2011, 4:30 PM
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

6 Dec 2011, 4:31 PM
Nevermind, i got it working.. i understand.. wooohoo!

nice progress bar!

6 Dec 2011, 4:35 PM
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.


Sameer Khan
7 Dec 2011, 2:39 AM
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...

7 Dec 2011, 2:35 PM
Hi Joel,

I found a bug with the progressbar, maybe you can help.

I am using Android + Phonegap + Sencha Touch

Immediately after I execute 'updateProgress', my Android debug log is spammed with the following:

m_mainFrame->editor()->hasComposition not

the spamming does not stop... it just keeps spamming

Is there a clean-up method... like after I am done using the progressbar i want to destroy it.

7 Dec 2011, 2:36 PM
Bug In Android with ProgressBar

Hi Joel,

I found a bug with the progressbar, maybe you can help.

I am using Android + Phonegap + Sencha Touch

Immediately after I execute 'updateProgress', my Android debug log is spammed with the following:

m_mainFrame->editor()->hasComposition not

the spamming does not stop... it just keeps spamming

Is there a clean-up method... like after I am done using the progressbar i want to destroy it.

7 Dec 2011, 3:46 PM
I've created a demo page (http://www.eomis.com.au/laundrybasin) that demonstrates the usage of the progress bar. I've also updated the code slightly to support a few more things (like looping progress bars). There are 3 examples on the demo page:
- Standard: Showing the basic API usage to get a progress bar up
- Iterating: Using an iterator to progress through a set of items. This is the iterator we use in our internal framework and you are free to use what ever you need as long as you can call the updateProgress throughout your code
- Looping: This progress bar loops forever until you stop it. I've set it up to stop after 15 seconds (so that you can see that it loops around). Ext uses this for things like file uploads when it's not clear when it will actually be complete. You are probably better off using the load mask in Sencha, but this is just another option

I'll update the code in the first post (if I'm able to) to reflect these new changes, otherwise the code on the demo server is not compressed, so feel free to grab it from there. If you have any questions, I'm more than happy to help!

7 Dec 2011, 3:47 PM
hokusmokus I've added some clean up code (for destroying and what not) that might fix your problem. I don't have access to an Android device, but if the code update doesn't work for you it might be a problem with the CSS. Try removing the animated bits and see if that helps.

7 Dec 2011, 9:26 PM
Hey all, I've updated the code to support the animate parameter on updateProgress. I've updated the demo accordingly. Note: Animations only work on iPhone, as Sencha disables automatically for Android (AFAIK). Sencha Touch 2 will probably fix this.

11 Dec 2011, 3:50 AM
awesome plugin
love it...

28 Feb 2012, 9:34 PM
Im getting an error :

TypeError: 'undefined' is not a function (evaluating 'Ext.Msg.progress('Importing')')

Please help :(

Sameer Khan
29 Feb 2012, 6:21 AM
Hi, From git hub you download Progressbar and work with that.. Thats better...
But please take care while using this progress bar because in that they have written this pointer to represent their js fiele...But from your file mention your panel name.progress bar then , you won't get any conflict with this pointer...Plz observe...Right now also i think u r facing same problem i observer from your error msg...

29 Feb 2012, 8:15 PM
If I understand you right in your code msg would be ur panel ??
Ok, can you post the GitHub link ??? Thanks :D

12 Jul 2012, 1:43 AM
Hey Guys....

i am developing the mobile application in sencha architect and there is a login screen in my application. Once i click on login button it takes around 5-6 seconds of time to fetch the data from the back end... for that time duration there is nothing on screen ... no message no busy signal ... so i wanted to introduce a progress bar / Status bar here....

Can any one of you please help me here.... as i am not able to do that... i searched all the forum but dint get the proper response from anywhere

please help.

Deepak Patil

23 Nov 2012, 2:29 AM
joel r anybody having this code it would be helpful if some posts it....i am very need of it

23 Nov 2012, 8:53 PM
Hi joel , your work is awesome ... it would be great if u upload the working demo of the progress bar...

Thanks in advance.....

30 Jan 2013, 12:08 PM
Hi, is this component also works with sencha touch 2, on android and iphone ?

thanks for answering in advance :)

Pardeep Sharma
22 Sep 2017, 9:41 AM
I want to use progress in Sencha touch Mbile app. So Can you please let me know the demo link or How can I use this.