Extjs4 gird请求后台时的进度条

liubl2011

于 2011-11-08 13:09:03 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs4 文章标签： extjs4

本文链接：https://blog.csdn.net/liubl2011/article/details/84078555

Extjs4 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在使用ExtJS开发的Grid页面中，通过结合ExtJS的form组件和Ajax请求，在提交数据前显示进度条，提升用户体验。通过在Grid的tbar按钮上实现等待提示，以及在提交表单前锁定页面并显示加载动画，实现了高效且友好的数据提交流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Extjs4版本ext-4.0.2a。
在Extjs中form请求时可以设置属性waitTitle,waitMsg显示进度条


form.getForm().submit({
  method: 'POST',
  waitTitle: '系统提示',
  waitMsg: '正在处理,请稍候',
  url: 'task/addTaskInfo',
  success: function(){
    Ext.Msg.alert('成功', '保存成功');
    store.load();
  },
  failure: function(form, action){
    Ext.Msg.alert('系统提示', '添加失败');
   }
});

但是在grid页面tbar的button上没有这个属性，这样我们在提交前加上两段代码


var el = grid.getEl();   
el.mask("正在发布中……");  
Ext.Ajax.request({
  // 定义后台url映射。参数为选择行的任务id。
  url: 'task/sendTaskInfo',
  params: {
    task_code : str
  },
  // 发送请求成功回调函数。
  success: function(){
    Ext.Msg.alert('成功', '发布成功');
    store.load();
    el.unmask();
  },
  // 发送请求失败回调函数。
  failure: function(){
    Ext.Msg.alert('失败', '发布失败');
    el.unmask();
  }
});