JavaScript DHTML/Ext JS/ProgressDialog

Материал из Web эксперт
Перейти к: навигация, поиск

Set progress text for Progress dialog

  
<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>



Set, update progress bar dialog

  
<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>
<script type="text/javascript">

Ext.onReady(function(){
    Ext.Msg.progress("Hey!", "waiting...", "progressing");
    var count = 0;
    var interval = window.setInterval(function() {
      count = count + 0.04;
      
      Ext.Msg.updateProgress(count);
      
      if(count >= 1) {
        window.clearInterval(interval);
        Ext.Msg.hide();
      }
    }, 100);
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/ProgressDialog&oldid=2313»