ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

ExtJs中的Ext.Ajax.request如何实现带有waitMsg等待提示的效果

一、在ExtJs中，当我们使用fp.form.submit方法提交表单时，可以通过设置waitMsg属性来实现等待提交时的提示效果。对于Ext.Ajax.request来说，这个方法并不适用。

二、那么，如何在Ext.Ajax.request中实现waitMsg等待提示效果呢？下面是一种可能的实现方式。

我们在发起Ajax请求前，通过Ext.MessageBox.confirm来确认用户是否真的要进行操作。如果用户确定要修改性别，我们创建一个新的Ext.LoadMask，并显示它，提示用户“正在提交申请，请稍后！”这个mask会阻挡页面的其他操作，给用户一种等待的感觉。

然后，我们发起Ext.Ajax.request请求。在请求成功（suess）或失败（failure）的回调函数中，我们都隐藏这个mask。如果请求成功并且服务器返回的数据表示操作成功，我们显示一个提示框告知用户操作成功的信息；如果操作失败，我们则显示失败的信息。

以下是具体的代码实现：

```javascript

Ext.MessageBox.confirm('Message', '请问您确定要修改性别吗？', function(btn) {

if (btn == 'yes'){

var myMask = new Ext.LoadMask(Ext.getBody(), {

msg: '正在提交申请，请稍后！'

});

myMask.show();

Ext.Ajax.request({

url : '', //此处填写你的url地址

params : { //此处填写你的参数

sex : sex //假设sex是你需要传递的参数

},

success : function(response,option) {

var res = Ext.decode(response.responseText);

if(res.success){ //假设服务器返回的数据中有一个字段叫success，用来表示操作是否成功

myMask.hide();

Ext.MessageBox.alert('提示信息', res.msg); //显示成功信息

}else{

myMask.hide();

Hs.util.Msg('提示信息', res.msg); //显示失败信息或者错误提示信息

}

},

failure : function(form, action) { //请求失败的处理函数

myMask.hide(); //隐藏mask提示框

Hs.util.Msg('提示信息', '请求失败'); //显示请求失败的信息，具体信息可以根据实际情况修改

}

});

}

});

```

以上就是在ExtJs中使用Ext.Ajax.request实现带有waitMsg等待提示效果的方法。这种方式可以很好地提升用户体验，让用户知道程序正在处理他们的请求，避免他们因为等待而产生焦虑感。希望这个例子能对大家有所帮助。如果有任何疑问或者需要进一步的解释，欢迎留言交流。非常感谢大家对狼蚁SEO网站的支持！