重写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文件中加入如下代码：

 

Html
<div id="load-ing">
加载数据中
</div>

 

 

其loading-ing的CSS样式如下：

 

CSS
#load-ing{position:absolute;right:5px;top:25px;background:rgb(221, 68, 119) url(../images/loading16.gif) no-repeat 4px 2px ;z-index: 200001;
          height:20px;line-height:20px;width:150px;font-size:12px;padding-left:30px;color:#FFF; }

 

 

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

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

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

二、重写Ext.data.Connection

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

 

override Ext.data.Connection
Ext.override(Ext.data.Connection,{
    request : Ext.data.Connection.prototype.request.createSequence(function(){ 
        Ext.get('load-ing').show();
    }),
    handleResponse : Ext.data.Connection.prototype.handleResponse.createSequence(function(){ 
            Ext.get('load-ing').hide();
    }),
    doFormUpload : Ext.data.Connection.prototype.doFormUpload.createSequence(function(){ 
            Ext.get('load-ing').hide();
    }),
    handleFailure : Ext.data.Connection.prototype.handleFailure.createSequence(function(){ 
        Ext.DomHelper.overwrite(Ext.get('load-ing'),'加载出错,建议 <a onclick="window.location.reload();" href="#"><b>刷新本页</b></a> !')
    this.serail=this.serail-100;
    })
})

 

 

问题：

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

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

 

Ext.data.Connection
Ext.override(Ext.data.Connection,{
    serail : 0,
    request : Ext.data.Connection.prototype.request.createSequence(function(){ 
        this.serail++;
        Ext.get('load-ing').show();
    }),
    handleResponse : Ext.data.Connection.prototype.handleResponse.createSequence(function(){ 
        if(this.serail==1)
            Ext.get('load-ing').hide();
        this.serail--;
    }),
    doFormUpload : Ext.data.Connection.prototype.doFormUpload.createSequence(function(){ 
        if(this.serail==1)
            Ext.get('load-ing').hide();
        this.serail--;
    }),
    handleFailure : Ext.data.Connection.prototype.handleFailure.createSequence(function(){ 
        Ext.DomHelper.overwrite(Ext.get('load-ing'),'加载出错,建议 <a onclick="window.location.reload();" href="#"><b>刷新本页</b></a> !')
    this.serail=this.serail-100;
    })
})

 

 

实现效果：

1、在于服务器进行通信时的提示如下：

2、当于服务器通信失败时会提示：