extjs6-simple-examples/ExtJs/progress-bar.html at master · Folgerjun/extjs6-simple-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         function progressBar(v) {
            return function()	{
               if(v == 10) { // 加载完成后操作
                  Ext.MessageBox.hide();
                  result();
               } else {
                  var i = v/9;
                  Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
               }
            };
         };
         function showProgressBar() {
            for(var i = 1; i < 11; i++){
               setTimeout(progressBar(i), i*500);
            }
         }
         function result(){
            Ext.Msg.alert('status', 'Process completed succesfully');
         }
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('buttonId'),
            text: 'Click Me',
            listeners: {
               click: function() {
                  Ext.MessageBox.show({  // 进度条：这用于显示完成的工作的进度，并显示后端工作仍在进行中，所以请等待，直到完成。
                     title: 'Please wait',
                     msg: 'Loading items...',
                     progressText: 'Initializing...',
                     width:300,
                     progress:true,
                     closable:false
                  });
                  showProgressBar();
               }
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button to see progress bar  </p>
   <div id = "buttonId"></div>
</body>
</html>