使用 ExtJS 显示连续进度条答案

【问题标题】：To Show a Continuous ProgressBar using ExtJS使用 ExtJS 显示连续进度条
【发布时间】：2010-12-23 08:49:42
【问题描述】：

问题：- 我需要嵌入一个进度条，它将持续运行直到操作完成。 ExtJS 提供了一个 Progressbar Ext.Progressbar，它将：-
a) 使用 wait 方法连续运行
b) 在更新 updateProgress 方法后运行。

在这两种情况下，进度条的输出都是

我正在尝试的解决方案是：-
第 1 步：
第二步：
第三步：

请给我建议一个解决方案或方法。我使用的 JavaScript 库是 ExtJS。提前致谢。

示例链接参考：-
http://dev.sencha.com/deploy/dev/examples/simple-widgets/progress-bar.html

【问题讨论】：

标签： javascript extjs

【解决方案1】：

这是一个简单的方法：您可以创建一个动画 Gif，显示您描述的连续进度条：

在操作开始时动态创建 gif 为 src 的 img 元素
完成时移除 img 元素

或者如果你想在操作前显示空的进度条，在完成后显示完整的进度条：

包含一个带有 src 属性的 img 元素，指向空进度条的图像
更新 img src 以引用动画 gif
更新 img src 以在末尾引用完整进度条的图像

【讨论】：

【解决方案2】：

Ext.get('buttonID').on('click', function(){
    Ext.MessageBox.show({
       msg: 'Saving your data, please wait...',
       progressText: 'Saving...',
       width:300,
       wait:true,
       waitConfig: {interval:200},
       icon:'ext-mb-download', 
       animEl: 'buttonID'
   });
    setTimeout(function(){
        //This simulates a long-running operation like a database save or XHR call.
        //In real code, this would be in a callback function.
        Ext.MessageBox.hide();
        Ext.example.msg('Done', 'Your fake data was saved!');
    }, 8000);
});

【讨论】：

【解决方案3】：

我收集了 Ext JS 在三年前的 0.4 中用于提供不确定的进度条；然而，由于浏览器可以停止动画 GIF 的方式，它被删除了。您可以使用该论坛帖子中指示的样式恢复它 - 使用 Firebug 之类的东西来查看您应该设置什么样式。

Forum reference

【讨论】：

【解决方案4】：

另一种使用 JavaScript 的方法：您可以使用 setTimeout 或简单的动画库（如 emile.js emile.js）在父 div（进度条）内为彩色 div（进度指示器）的左边距设置动画。

ExtJS 还在 Ext.Element 类的 setter 中提供了一个可选动画：

您可以在每一步调用 setX(x,animation) 并在进度指示器上使用可选参数 animate
或者在进度条前插入一个透明的“pusher”元素，在“pusher”上调用setWidth(width,animate)将进度条向右推

在这两种情况下，您都应该在动画选项中提供完成回调来重置动画和循环。

【讨论】：