extjssencha-touch-2sencha-touch-2.1

Sencha Touch 2.0 Progress Indicator


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.


Solution

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