ExtJs源码分析与学习—Ext.UpdateManager

     如果想让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编码的字符串"&param1=1&param2=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来实现遮罩提示信息的效果。