Ext-进度条

1.progress使用

Ext.MessageBox.progress('请等待',msg:'读取数据中……');  

 

真实案例

tqbtnNews:function(){
        var me = this;
        var list = me.getNewsList();
        Ext.MessageBox.progress('请等待','提取中...');//打开滚动条
        Ext.Ajax.request({
            url: webPath+'/news/newsEastmoneyList',
            method: 'POST',
            success: function (response, options) {
                Ext.MessageBox.hide();//隐藏滚动条
                var data = Ext.decode(response.responseText);
                if(data.success){
                    list.getStore().load({page:1});
                    Ext.Msg.alert('提示','提取成功，共提取'+data.zg+'条.');
                }else{
                    Ext.Msg.alert('提示',data.error);
                }
            },
            failure: function (response, options) {
                Ext.Msg.alert('提示','提取失败，请求地址错误');
            }
        });
    }

 

进度条经常应用到需要用户等待某一操作完成的场景。在执行一些比较耗时的操作时，我们需要用它来提示用户耐心等待。Ext.MessageBox为我们提供了默认的进度条，只要将progress参数设为true，对话框中就会出现进度条，如下面的代码所示：

Ext.MessageBox.show({  
  title:'请等待',  
  msg:'数据读取中……',  
  width:240,  
  progress:true,  
  closable:false  
}); 

也可以使用Ext.MessageBox提供的progress函数，如下面的代码所示：

Ext.MessageBox.progress('请等待',msg:'读取数据中……'); 

我们已经得到了进度条，但是他的状态不会发生变化（自动向前推进），我们需要调用Ext.MessageBox.update-Progress()函数让进度条状态发生变化。通常我们还会使用closable:false来隐藏右上角的关闭按钮，从而禁止用户关掉进度条。

现在，为上边的例子添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随时间而变化，10秒以后进度条对话框将会隐藏，代码如下边所示：

 

var f=function(v){  
    return function(){  
    if (v==11){  
    Ext.MessageBox.hide();  
       }else{  
       Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个，一共10个。');  
       }  
    };  
};  
for(var i=1;i<12;i++)  
{  
setTimeout(f(i),i*1000);  
}  

除了这种可以精确地控制进度的进度条，我们还可以使用一种可以自动控制变化的进度条提示框，这是需要使用：

Ext.MessageBox.wait()。

Ext.MessageBox.wait('请等待',msg:'数据读取中……');  

这是弹出的对话框的进度条就会自动的向前推进了，不过我们无法对进度条的值进行精确地控制，如果等待的时间过长，进度条满格之后又会从零开始向前推进。根据具体情况选择使用Ext.MessageBox.progress()或 Ext.MessageBox.wait()。