Ext.ProgressIndicator outside of a Ajax.request

It's a long time since my last tutorial. But I think I got another useful example to show.
Maybe some already know the new ProgressIndicator in Sencha Touch 2.3.x. You can simply attach it to a Ajax.request as the progress option to show the download/upload progress to the users of your app.
I wanted to use this also for other use-cases such as the FileTransfer class in Cordova / Phonegap. Even if your now bound to this example I did the a showcase with the FileTransfer.download method :)

DEMO LINK

ZIP LINK

	///////////////////////
	// FileTransfer
	///////////////////////
	var fileTransfer = new FileTransfer(),
	remoteFile = encodeURI('http://www.nbb.be/DOC/BA/PDF7MB/2010/201061200005_1.PDF'),
	localFile = cordova.file.documentsDirectory + 'test.pdf'; //'cdvfile://localhost/persistent/test.pdf';
	// Create ProgressIndicator
	var progressIndicator = Ext.create("Ext.ProgressIndicator", {
	loadingText: 'Downloading: {percent}%'
	});
	// Add progressIndicator to Viewport and show
	Ext.Viewport.add(progressIndicator);
	progressIndicator.show();
	// Define onprogress event to update progressIndicator
	fileTransfer.onprogress = function(progressEvent) {
	if (progressEvent.lengthComputable) {
	Ext.callback(progressIndicator.updateProgress, progressIndicator, [(progressEvent.loaded / progressEvent.total), "download"]);
	}
	if(progressEvent.total > 0 && !progressIndicator.getDynamic() && oprogressIndicator.getInitialConfig().dynamic) {
	progressIndicator.setDynamic(true);
	}
	};
	// Start file download
	fileTransfer.download(remoteFile, localFile, successCallback, errorCallback);
	// Success callback
	function successCallback(entry) {
	progressIndicator.hide();
	console.log("download complete: " + entry.fullPath);
	}
	// Failure callback
	function errorCallback(error) {
	progressIndicator.hide();
	console.log(error);
	}

view raw 00_fileTransfer.js hosted with ❤ by GitHub

	///////////////////////
	// AJAX
	///////////////////////
	var scope = this;
	// Create ProgressIndicator
	var progressIndicator = Ext.create("Ext.ProgressIndicator", {
	loadingText: "Downloading: {percent}%"
	});
	// Add progressIndicator to Viewport and show
	Ext.Viewport.add(progressIndicator);
	progressIndicator.show();
	// Define the request object
	var request = {
	url: 'http://www.nbb.be/DOC/BA/PDF7MB/2010/201061200005_1.PDF',
	method: 'GET',
	xhr2: true,
	progress:progressIndicator,
	disableCaching: false,
	timeout: '600000',
	success: function(response) {
	progressIndicator.hide();
	console.log(response);
	},
	failure: function(response) {
	progressIndicator.hide();
	console.log(response);
	}
	};
	// Request
	Ext.Ajax.request(request);

view raw 01_ajax.js hosted with ❤ by GitHub