ExtJs学习笔记（1）——Ext.extend的用法

它的基础代码为：

代码 extend : function(){ 
    // inline overrides 
    var io = function(o){ 
        for(var m in o){ 
            this[m] = o[m]; 
        } 
    }; 
    var oc = Object.prototype.constructor;
    return function(sb, sp, overrides){ 
        if(typeof sp == 'object'){ 
            overrides = sp; 
            sp = sb; 
            sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; 
        } 
        var F = function(){}, 
            sbp, 
            spp = sp.prototype;
        F.prototype = spp; 
        sbp = sb.prototype = new F(); 
        sbp.constructor=sb; 
        sb.superclass=spp; 
        if(spp.constructor == oc){ 
            spp.constructor=sp; 
        } 
        sb.override = function(o){ 
            Ext.override(sb, o); 
        }; 
        sbp.superclass = sbp.supr = (function(){ 
            return spp; 
        }); 
        sbp.override = io; 
        Ext.override(sb, overrides); 
        sb.extend = function(o){return Ext.extend(sb, o);}; 
        return sb; 
    }; 
}(),
override : function(origclass, overrides){ 
    if(overrides){ 
        var p = origclass.prototype; 
        Ext.apply(p, overrides); 
        if(Ext.isIE && overrides.hasOwnProperty('toString')){ 
            p.toString = overrides.toString; 
        } 
    } 
}

其中overrides的参数，作为一个JSON对象，最终将调用Ext.apply(p, overrides);apply主要用于为p扩展overrides属性。

在子类使用时需要使用SubClass.superclass.constructor.call(this,…);的方式，以便它的基类可以将构造函数赋值给子类。

我们来看一个例子，ext-all-debug.js中的Ext.state.CookieProvider，它是作为Cookie的提供类来使用的：

代码 Ext.state.CookieProvider = Ext.extend(Ext.state.Provider, { 
    constructor : function(config){ 
        Ext.state.CookieProvider.superclass.constructor.call(this); 
        this.path = "/"; 
        this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); 
        this.domain = null; 
        this.secure = false; 
        Ext.apply(this, config); 
        this.state = this.readCookies(); 
    }, 
    set : function(name, value){ 
        if(typeof value == "undefined" || value === null){ 
            this.clear(name); 
            return; 
        } 
        this.setCookie(name, value); 
        Ext.state.CookieProvider.superclass.set.call(this, name, value); 
    },
    clear : function(name){ 
        this.clearCookie(name); 
        Ext.state.CookieProvider.superclass.clear.call(this, name); 
    },
    readCookies : function(){ 
        var cookies = {}, 
            c = document.cookie + ";", 
            re = /\s?(.*?)=(.*?);/g, 
            matches, 
            name, 
            value; 
        while((matches = re.exec(c)) != null){ 
            name = matches[1]; 
            value = matches[2]; 
            if(name && name.substring(0,3) == "ys-"){ 
                cookies[name.substr(3)] = this.decodeValue(value); 
            } 
        } 
        return cookies; 
    },
    setCookie : function(name, value){ 
        document.cookie = "ys-"+ name + "=" + this.encodeValue(value) + 
           ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) + 
           ((this.path == null) ? "" : ("; path=" + this.path)) + 
           ((this.domain == null) ? "" : ("; domain=" + this.domain)) + 
           ((this.secure == true) ? "; secure" : ""); 
    },
    clearCookie : function(name){ 
        document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" + 
           ((this.path == null) ? "" : ("; path=" + this.path)) + 
           ((this.domain == null) ? "" : ("; domain=" + this.domain)) + 
           ((this.secure == true) ? "; secure" : ""); 
    } 
});

Ext.state.Provider是作为超类来使用，它是页面层面上的缓存。

它的应用：