前言:

经常使用网易邮箱,当客户端与服务器进行通信会,在右上角会出现左情提示。如下图所示:

重写Ext.Ajax.request,Ext.data.Connection

 

       使用Extjs进行开发系统时,客户端功能相当丰富。大部门工作都是直接从服务器获取数据再送给widgets进行显示出来。Ext.Ajax是继承Ext.data.Connection而来,而Ext.data.Store在进行加载数据时都需要用到Ext.data.Connection。

    Ext.data.Connection提供以下三个事件:

1、beforerequest  请求服务器之前

2、requestcomplete 和服务通信成功后

3、requestexception 请求失败

        而这三个事件分别在执行request、doFormUpload、handleResponse、handleFailure触发,所以,重写这四个函数就可以实现在请求服务过程中进行相关操作。

    在这里,大家可以先看一下以下几个Function   http://www.extjs.com/deploy/dev/docs/?class=Function

 

解决办法:

首先,在HTML文件中加入如下代码:

 

>

 

 

其loading-ing的CSS样式如下:

 

}

 

 

通过Extjs实现提示等待功能可以有以下两种解决办法:

一、可以监听beforerequest  、requestcomplete 、requestexception 事件,在每次用到Ext.Ajax或Ext.data.Connection时都写监听函数。

    此方向可以解决问题,但是,每次使用Ext.Ajax或Ext.data.Connection都需要写监听函数,这样,重复工作较多。不可行

二、重写Ext.data.Connection

    重写Ext.data.Connection的request、doFormUpload、handleResponse、handleFailure几个函数,在执行这几个函数之前选执行你的动作。代码如下:

 

;
    })
})

 

 

问题:

在一个页面中同时执行几个request函数时,当第一个request执行完成后,“载数据中重写Ext.Ajax.request,Ext.data.Connection”将会被隐藏,而这时可能页面还在和服务器通信。所以这种办法并不能根据解决问题。于是想到了加入标志的方法。

    当执行一次Ext.get('load-ing').show();时,标志加一,当执行一次Ext.get('load-ing').hide();时,标志减一。代码如下:

 

;
    })
})

 

 

实现效果:
1、在于服务器进行通信时的提示如下:
重写Ext.Ajax.request,Ext.data.Connection
2、当于服务器通信失败时会提示:
重写Ext.Ajax.request,Ext.data.Connection

相关文章:

  • 2022-02-07
  • 2022-12-23
  • 2021-12-20
  • 2022-12-23
  • 2022-12-23
  • 2021-07-25
  • 2022-12-23
  • 2021-06-24
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-24
  • 2021-09-30
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案