I have to add progress indicator with % of complete in different ajax request using Sencha touch 2.x, for example if I've 2 Ajax request progress indicator will show 50% complete on each request after successful server response.
Here is another way to solve it without progressIndicator:
Ext.application({
name : 'Fiddle',
launch : function() {
var progressIndicator = Ext.create('Ext.Panel', {
html: '<table style="height:30px; width:100%">'+
'<tr>'+
'<td id="start" style="background-color:green;width:1%"></td>'+
'<td id="end"></td>'+
'</tr></table>',
centered : true,
modal : true,
hideOnMaskTap : true,
width : '50%',
height : '80',
});
var progress = 1;
//progressIndicator.updateBar();
Ext.Viewport.add(progressIndicator);
progressIndicator.show();
var intervalProgress=setInterval(function(){
//console.log(progress);
progress+=1;
document.getElementById("start").style.width = (progress) +'%';
//progressIndicator.setProgress(progress);
//progressIndicator.updateBar();
if(progress >= 100){
clearInterval(intervalProgress)
}
},100)
}
});