如果想让html页面中任意元素自动局部刷新,而不是整个页面刷新,可以用Ext提供的Ext.UpdateManager来完成其功能,该类还可以实现在线人数统计等功能。下面先看例子
//html内容 <div id="refreshContent"></div> //js内容 var el = Ext.get('refreshContent'); //取得id属性值为'refreshContent'的元素引用 var updater = el.getUpdateManager(); //创建元素的UpdateManager实例 updater.disableCaching = true; //关闭内容cache,否则会取cache中的内容,而不会刷新 updater.showLoadIndicator = true;//加载的时候显示加载信息 updater.on('beforeupdate', function(el) { el.fadeOut(); //淡出 }); updater.on('update', function(el, response) { el.fadeIn(); //淡入 var resData = Ext.util.JSON.decode(response.responseText); var content = resData.content; el.dom.innerHTML = '<b><em>' + content + '</em></b>'; }); //每隔5秒刷新一次,从后台取出新的数值,并以json格式返回 updater.startAutoRefresh(5, 'demo1.json', null, null, true); //json内容 { content: '要加载的测试内容' }
上面的代码运行效果为:每隔15秒,刷新id为refreshContent 的div元素中的值。 这种方式实现了局部淡入淡出的刷新效果,不会导致页面的抖动,因此提供了更好的用户体验。
该类提供了以下四种方式来改变元素的内容
var updater = Ext.get('refreshContent').getUpdateManager(); updater.update({……});//最基本的更新element的值 updater.formUpdate(formname,url);// 执行表单的异步请求 updater.startAutoRefresh(second,url);// 设置该元素自动刷新。 Element.load({……});//实际上调用了第一种的情况
下面看其源代码
Ext.UpdateManager = Ext.Updater = Ext.extend(Ext.util.Observable, function() { var BEFOREUPDATE = "beforeupdate", UPDATE = "update", FAILURE = "failure"; … return { constructor: function(el, forceNew){ var me = this; el = Ext.get(el); if(!forceNew && el.updateManager){ return el.updateManager; } me.el = el; me.defaultUrl = null; me.addEvents( BEFOREUPDATE, UPDATE, FAILURE ); Ext.apply(me, Ext.Updater.defaults); me.transaction = null; me.refreshDelegate = me.refresh.createDelegate(me); me.updateDelegate = me.update.createDelegate(me); me.formUpdateDelegate = (me.formUpdate || function(){}).createDelegate(me); me.renderer = me.renderer || me.getDefaultRenderer(); Ext.Updater.superclass.constructor.call(me); }, … }; }());
Ext.UpdateManager的别名为Ext.Updater,该类继承了Ext.util.Observable。从代码的实现看,Ext.UpdateManager类中的方法被定义在闭包函数中,通过自执行该函数,返回return中的方法,这样Ext.UpdateManager就拥有了return中定义的属性和方法。在构造器中如果forceNew 设为false并且el中已实例了updateManager,则直接返回
if(!forceNew && el.updateManager){ return el.updateManager; }
否则实例化该updateManager
下面看其主要属性和方法
公共属性
- defaultUrl : String 保存updater上一次更新时使用的url。
- disableCaching : Boolean是否关闭内容cache,默认不关闭,会取cache中的内容,而不会刷新
- el : Ext.Element updater使用的element。
- formUpdateDelegate : Function 执行表单的异步请求代理
- indicatorText : String指示器文本(正在加载的时候),默认值为:Ext.Updater.defaults.indicatorText。
- loadScripts : Boolean输出的时候是不是加载脚本,默认值为:Ext.Updater.defaults.loadScripts。
- refreshDelegate : Function 用于refresh()内的委托,scope使用this。
- renderer : Object Updater的内容渲染器(默认值为:Ext.Updater.BasicRenderer)
- showLoadIndicator : Boolean 是否在加载过程中显示指示器文本,默认值为:Ext.Updater.defaults.showLoadIndicator。
- sslBlankUrl : String空页面url,用于SSL文件上传。默认值为:Ext.Updater.defaults.sslBlankUrl。
- timeout : Number请求超时。单位是秒。默认值为:Ext.Updater.defaults.timeout。
- transaction : Object 当前事务对象,如果没有当前事务则为null。
- updateDelegate : Function 用于更新(update())的委托。
公共方法:
- update(url, params, callback, discardUrl ) 发送一个异步请求,然后根据响应的response更新元素内容。如不指定使用GET,否则POST。
注意:由于异步请求的一般是远程主机,所以元素不会在此函数返回时更新。要处理返回的数据,请使用回调或事件。请求的options,包含以下选项中的任一项或多项
url : 请求的url或是能够返回url的函数(默认为最后使用的url)
method : 默认为get,可设为post
params : (可选的) 提交的参数,为可url编码的字符串"¶m1=1¶m2=2",也可以是对象的形式{param1: 1, param2: 2}
scripts : loadScripts的简写
callback : (可选的) callback 事务完成后执行的回调(带参数oElement, bSuccess)
el : 被更新的Element
success : True表示成功,false表示失败。
respone : 进行更新时返回的那个XMLHttpRequest对象
options : 参数
scope : 上下文
discardUrl : (可选的) 默认情况下,完成更新后,最后一次使用的url会保存到defaultUrl属性,该参数为true的话,就不会保存。
timeout : 超时时间
text : indicatorText的简写
nocache : disableCaching的简写
例子
um.update({ url: "your-url.php", params: {param1: "foo", param2: "bar"}, // or a URL encoded string callback: yourFunction, scope: yourObject, //(optional scope) discardUrl: true, nocache: true, text: "Loading...", timeout: 60, scripts: false // Save time by avoiding RegExp execution. });
-
Ext.Updater.updateElement ( Mixed el, String url, [String/Object params], [Object options] ) : void
不赞成. 一个静态方法. 反对用此函数取代el.load({url:'foo.php', ...})
用法:Ext.Updater.updateElement("my-div", "stuff.php"); - abort() : void取消当前正在执行的事务。
- formUpdate( String/HTMLElement form, [String url], [Boolean reset], [Function callback] ) : void
执行一个异步form post。用返回的响应数据更新element。如果form有一个属性:enctype="multipart/form-data",它表示这是上传文件,将使用this.sslBlankUrl来阻止IE安全警告。
参数:
form : String/HTMLElement form的id或者是element。
url : String 用于form.action。即提交的网址。
reset : Boolean是否在更新完后重置表单。
callback : Function 当事务完毕后执和,它有如下参数:
el : Ext.Element 正在执行更新的元素
success : Boolean是否更新成功。
response : XMLHttpRequest响应结果。 - getEl() : Ext.Element获得要更新的元素。
- getRenderer() : void取得当前内容渲染器。到Ext.Updater.BasicRenderer.render看更多的细节。
- isAutoRefreshing() : void 是否是定时更新。
- isUpdating() : Boolean是否处于正在更新中。
- refresh( [Function callback] ) : void 用上一次更新的地址(defaultUrl)再次更新一下。如果没有就马上返回。
- setDefaultUrl( String/Function defaultUrl ) : void 设置defaultUrl。
- setRenderer( Object renderer ) : void设置内容渲染器。
- showLoading() : void把元素换成“加载中”的状态,可重写该方法执行自定义的动作。
- startAutoRefresh( Number interval, [String/Object/Function url], [String/Object params], [Function callback], [Boolean refreshNow] ) : void 把这个元素设置为自动更新。通过使用stopAutoRefresh来停止自动更新。
- stopAutoRefresh() : void 停止自动更新。
公共事件:
- beforeupdate : ( Ext.Element el, String/Object/Function url, String/Object params )在更新之前触发。
- failure : ( Ext.Element el, Object oResponseObject )更新失败时触发。
- update : ( Ext.Element el, Object oResponseObject ) 更新成功时触发。
以上为该类的主要属性、方法和事件,ext组件中LoadMask.js用到了Ext.UpdateManager来实现遮罩提示信息的效果。