重写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触发,所以,重写这四个函数就可以实现在请求服务过程中进行相关操作。

在这里,大家可以先看一下以下几个functionhttp://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'),'加载出错,建议 刷新本页 !')

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'),'加载出错,建议 刷新本页 !')

this.serail=this.serail-100;

})

})

实现效果:

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

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

绿色通道:好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/