Progress dialog demo : Dialog « Ext JS « JavaScript DHTML






Progress dialog demo

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.MessageBox.show({
       title        : 'Wait',                              
       msg          : "Deleting...",
       progressText : 'Initializing...',
       width        : 300,
       progress     : true,                                                 
       closable     : false
    });
    
    
    var updateFn = function(num){                                           
       return function(){
          if(num == 99){
             Ext.MessageBox.updateProgress(100, 'All Items deleted!');       
             Ext.MessageBox.hide.defer(1500, Ext.MessageBox);             
          }         
          else{     
             var i = num/100; 
             var pct = i;
             Ext.MessageBox.updateProgress(i, pct + '% completed');       
          }         
      };    
    };
    
    for (var i = 1; i < 100; i++){                                         
       setTimeout(updateFn(i), i * 50+1);
    }
});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

   
    
  








Related examples in the same category

1.Model window dialog
2.Not closable dialog
3.Update progress dialog
4.Hide dialog
5.Set call back function for dialog
6.Multiline dialog box
7.Wait Dialog: Dialog with indefinite progress bar and custom icon (will close after 8 sec).