Sencha Touch 2.0 Progress Indicator

Question

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.

Answer 1

Here is another way to solve it without progressIndicator:

FIDDLE

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)
    }
});