Using Ext.ProgressIndicator during ajax calls in Sencha touch

Question

Ext.ProgressIndicator doesn't have any examples / sample code,

does anyone know how to use this while ajax calls and waiting for response?

methods like

setDynamic()   

sourcesetFallbackText()

setLoadingText()

don't have any effect on the progress display text. Or am I using them incorrectly.

Answer 1

You first need to create the progress indicator, which is quick and easy:

var progressIndicator = Ext.create("Ext.ProgressIndicator", {
    loadingText: "Uploading: {percent}%"
});

Then in your XHR request, you'll set the progress property like so:

...
progress: progressIndicator
...

I would have put an example together for you myself, but I found one on GitHub here: https://github.com/senchalabs/ajax_demos/blob/master/ajax-upload.html

You may also want to check out this existing bug as it deals with file upload and effects versions <= 2.3.1: http://www.sencha.com/forum/showthread.php?275277-File-Upload-from-Sencha-Touch-2.3-app

Happy Coding!