Extjs4 gird请求后台时的进度条

最新推荐文章于 2024-01-07 12:31:07 发布

原创最新推荐文章于 2024-01-07 12:31:07 发布 · 310 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs4

Extjs4 专栏收录该内容

10 篇文章

订阅专栏

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

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();
  }
});