Ext.js:进度条(Progress bar )

目录

返回到:Ext.js 教程:组件

进度条:这用于显示完成的工作的进度,并显示后端工作仍在进行中,所以请等待,直到完成。

语法

它基本上是一个消息框,显示任务的进度。 下面是创建进度条的简单语法。

 Ext.MessageBox.show({
   title: 'Please wait',
   msg: 'Loading items...',
   progressText: 'Initializing...',
   width:300,
   progress:true,
   closable:false
});

下面是一个简单的例子显示进度条:

<!DOCTYPE html>
<html>
<head>
   <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
   <script src="./ext-6.0.0/build/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>

这将产生以下结果:

Ext.js:进度条(Progress bar )

返回到:Ext.js 教程:组件

作者:terry,如若转载,请注明出处:https://www.web176.com/extjs_api/11729.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2023年3月3日
下一篇 2023年3月3日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注