简析 Ext.LoadMask

girdpanel 时如果指定了 loadmask 那么在 load 数据时会自动出现一个层遮盖，很酷,但看  gridpanel 的源码 ，丝毫找不到关于 loadmask 运动的一丝痕迹 ，而仅仅只有一段

 

this.loadMask = new Ext.LoadMask(this.bwrap,
Ext.apply({store:store}, this.initialConfig.loadMask));

 

bwrap 在父类 panel 中定义 ，正是遮盖层所在的位置

Class Ext.LoadMask

A simple utility class for generically masking elements while loading data. If the store config option is specified, the masking will be automatically synchronized with the store's loading process

则负责起了与 store 的协作 ，store 只需把它交给 loadmask  ，而自己不用显式调用 loadmask 的 show hide

于是在 loadmask 中便处理了 store的各种事件

 

this.store.on('beforeload', this.onBeforeLoad, this);
this.store.on('load', this.onLoad, this);
this.store.on('loadexception', this.onLoad, this);

 

从而  与 store  解耦 ， store 的 load 函数 分析：

 

load: function(options) {
    options = options || {};
    //通知 loadmask 显示
    if (this.fireEvent("beforeload", this, options) !== false) {
        this.storeOptions(options);
        var p = Ext.apply(options.params || {},
        this.baseParams);
        if (this.sortInfo && this.remoteSort) {
            var pn = this.paramNames;
            p[pn["sort"]] = this.sortInfo.field;
            p[pn["dir"]] = this.sortInfo.direction;
        }
        //这个函数里 应该 结束后
        //fireEvent load 通知 loadmask 隐藏
        this.proxy.load(p, this.reader, this.loadRecords, this, options);
        return true;
    } else {
        return false;
    }
}

 

则正是调用了 loadmask ，由于基于 事件 ，当然我们也可以自由的添加 handler 到 beforeload .

评论

1 楼 scnu_lts 2011-07-19  

load: function(options) { 
    options = options || {}; 
    //通知 loadmask 显示 
    if (this.fireEvent("beforeload", this, options) !== false) { 
        this.storeOptions(options); 
        var p = Ext.apply(options.params || {}, 
        this.baseParams); 
        if (this.sortInfo && this.remoteSort) { 
            var pn = this.paramNames; 
            p[pn["sort"]] = this.sortInfo.field; 
            p[pn["dir"]] = this.sortInfo.direction; 
        } 
        //这个函数里 应该 结束后 
        //fireEvent load 通知 loadmask 隐藏 
        this.proxy.load(p, this.reader, this.loadRecords, this, options); 
        return true; 
    } else { 
        return false; 
    } 
} 

这个代码是store的加载代码 放在这里有点有点奇怪 真的起作用是 Ext.loadMask里的这锻
    onBeforeLoad : function(){
        if(!this.disabled){
            this.el.mask(this.msg, this.msgCls);
        }
    },