ExtJs实践（1）——Ext.extend的用法

Ext.extend作为在Ext.base.js文件中作为继承扩展的方法进行使用。

它的基础代码为：

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是作为超类来使用，它是页面层面上的缓存。

它的应用：

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());