文件：ext-2.3.0/source/core/Ext.js
 
概述：Ext.js主要负责创建Ext全局对象，构建其命名空间，定义extend类继承方法，探测浏览器信息和对Javascript原生库进行扩展。
 
分析：
 
一、创建Ext全局对象 // 创建Ext全局对象，大多数JS库为了避免和其他JS库命名冲突，都会把自己创建的类或函数封装到一个全局变量中去， // 这样就相当于创造了自己的命名空间，可以算是一个单例模式。例如，jQuery就是全部都封装到$变量中去。 Ext = {version: '2.3.0'};
 
二、设置全局undefined变量 // 兼容旧浏览器，早期的浏览器实现中，undefined并不是全局变量。就是说，你要判断一个变量是否是没定义， // 你需要这样写if (typeof a == 'undefined')，不可以写成if (a == undefined)。所以，上面的代码就可以理解了。 // 右面的window["undefined"]，因为window对象没有undefined属性，所以其值为undefined， // 把undefined赋值给window的undefined属性上，就相当于把undefined设置成了全局变量， // 这样以后你再判断一个变量是否是未定义的时候，就不需要使用typeof，直接判断就可以了。 window["undefined"] = window["undefined"];
 
三、定义apply方法属性复制函数 // apply方法，把对象c中的属性复制到对象o中，支持默认属性defaults设置。这个方法属于对象属性的一个浅拷贝函数。 Ext.apply = function(o, c, defaults){ if(defaults){ // 如果默认值defaults存在，那么先把defaults上得属性复制给对象o Ext.apply(o, defaults); } if(o && c && typeof c == 'object'){ for(var p in c){ o[p] = c[p]; } } return o; };
 
四、扩展Ext对象 (function(){ // idSeed，用来生成自增长的id值。 var idSeed = 0; // ua，浏览器的用户代理，主要用来识别浏览器的型号、版本、内核和操作系统等。 var ua = navigator.userAgent.toLowerCase(), check = function(r){ return r.test(ua); }, // isStrict，表示当前浏览器是否是标准模式。 // 如果正确的设置了网页的doctype，则compatMode为CSS1Compat，否则为BackCompat isStrict = document.compatMode == "CSS1Compat", // isOpera，表示是否是opera浏览器。 isOpera = check(/opera/), // isChrome，表示是否是谷歌浏览器。 isChrome = check(/chrome/), // isWebKit，表示当前浏览器是否使用WebKit引擎。 // WebKit是浏览器内核，Safari和Chrome使用WebKit引擎。 isWebKit = check(/webkit/), // isSafari，表示是否是苹果浏览器，下面代码是对其版本识别。 isSafari = !isChrome && check(/safari/), isSafari2 = isSafari && check(/applewebkit\/4/), // unique to Safari 2 isSafari3 = isSafari && check(/version\/3/), isSafari4 = isSafari && check(/version\/4/), // isIE，表示是否是IE浏览器，下面代码是对其版本识别。 isIE = !isOpera && check(/msie/), isIE7 = isIE && check(/msie 7/), isIE8 = isIE && check(/msie 8/), isIE6 = isIE && !isIE7 && !isIE8, // isGecko，表示当前浏览器是否使用Gecko引擎。 // Gecko是浏览器内核，Firefox使用Gecko引擎。 isGecko = !isWebKit && check(/gecko/), isGecko2 = isGecko && check(/rv:1\.8/), isGecko3 = isGecko && check(/rv:1\.9/), // isBorderBox，表示浏览器是否是IE的盒模式。 // 众所周知，IE的盒模式和W3C的盒模式不一致。当IE浏览器在怪异模式下，就会导致错误的盒模式。 isBorderBox = isIE && !isStrict, // isWindows，表示是否是windows操作系统。 isWindows = check(/windows|win32/), // isMac，表示是否是苹果操作系统。 isMac = check(/macintosh|mac os x/), // isAir，AIR（Adobe Integrated Runtime），是adobe开发的一个平台吧，不太了解，没用过。 isAir = check(/adobeair/), // isLinux，表示是否是Liunx操作系统。 isLinux = check(/linux/), // isSecure，表示是否是https连接。 isSecure = /^https/i.test(window.location.protocol); // 缓存一下CSS的背景图像，防止图像闪烁，应该是IE6的一个bug。 if(isIE6){ try{ document.execCommand("BackgroundImageCache", false, true); }catch(e){} } // 扩展Ext对象，有一些属性，这个文件中没有使用，现在先不解释其作用，后面遇到了再讲。 Ext.apply(Ext, { // isStrict，表示是否是标准模式。 isStrict : isStrict, // isSecure，表示是否是https连接。 isSecure : isSecure, // isReady，表示Dom文档树是否加载完成 isReady : false, // enableGarbageCollector和enableListenerCollection这两个变量在Element中使用了，解析到Element时再解释其含义。 enableGarbageCollector : true, enableListenerCollection:false, // SSL_SECURE_URL，这个值在构造隐藏的iframe时，用来设置src属性的，只是当是https连接的时候才用。 SSL_SECURE_URL : "javascript:false", // BLANK_IMAGE_URL，1像素透明图片地址 BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif", // emptyFn，空函数 emptyFn : function(){}, // applyIf，把对象c的属性复制到对象o上，只复制o没有的属性 applyIf : function(o, c){ if(o && c){ for(var p in c){ if(typeof o[p] == "undefined"){ o[p] = c[p]; } } } return o; }, // addBehaviors函数可以一次给多个Ext.Element添加不同的事件响应函数 addBehaviors : function(o){ // 判断Dom树是否已经加装成功 if(!Ext.isReady){ // 如果Dom树没有加载好，那么等到加载好了，再执行此函数 Ext.onReady(function(){ Ext.addBehaviors(o); }); return; } // cache，简单缓存一下选择过的CSS Selector。 var cache = {}; // 遍历对象o，b的格式应该是selector@eventName for(var b in o){ // parts[0]=selector,parts[1]=eventName var parts = b.split('@'); if(parts[1]){ // 如果事件名称存在，s为selector var s = parts[0]; // 判断一下cache缓存中是否已经查询过该selector if(!cache[s]){ // 如果没有查询过，那么用select方法查询一下 cache[s] = Ext.select(s); } // 调用Element的on方法来注册事件函数 cache[s].on(parts[1], o[b]); } } // 释放cache变量，防止内存泄露 cache = null; }, // 取得el的id属性。el可以是Ext.Element或者是Dom元素。 // 如果el不存在，那么生成一个自增长的id，并返回这个id。 // 如果el存在，但是没有id属性，那么生成一个自增长的id，并赋值给el的id属性，最后返回id值。 // 如果el存在，并且也有id属性，那么直接返回el的id值。 // prefix表示生成自增长的id的前缀，默认值为ext-gen id : function(el, prefix){ prefix = prefix || "ext-gen"; el = Ext.getDom(el); var id = prefix + (++idSeed); return el ? (el.id ? el.id : (el.id = id)) : id; }, // 类继承函数，基于javascript的prototype，模仿面相对象的继承特性。 // 整个ExtJS框架的继承机制就是这个函数实现的。 extend : function(){ // override函数，用来覆盖prototype上的属性的(私有对象，仅下面的return function内部可以使用) var io = function(o){ for(var m in o){ this[m] = o[m]; } }; // Object的构造函数(私有对象，仅下面的return function内部可以使用) var oc = Object.prototype.constructor; return function(sb, sp, overrides){ // sb表示subclass，sp表示superclass，overrides是默认值为对象型 // 如果sp是对象，表示没有传sb变量进来，所以重新设置一下参数 if(typeof sp == 'object'){ overrides = sp; sp = sb; // 如果overrides中提供了构造函数，那么就用提供的， // 否则用下面这个匿名函数，匿名函数会调用父类的构造函数 sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; } // F是一个临时的类，其prototype指向superclass的prototype， // 同时也把subclass的prototype指向了F对象， // 这样可以避免在类继承的时候，调用superclass的构造函数 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.override = io; // 设置默认值 Ext.override(sb, overrides); // 继承函数，这样写方便，可以直接从别的类继承新类 sb.extend = function(o){Ext.extend(sb, o);}; return sb; }; }(), // 覆盖函数，直接把属性复制到origclass的prototype上 override : function(origclass, overrides){ if(overrides){ var p = origclass.prototype; for(var method in overrides){ p[method] = overrides[method]; } // 下面是处理IE浏览器在枚举对象的属性时， // 原生的方法toString枚举不出来，即使是自定义的toString也不行 if(Ext.isIE && overrides.toString != origclass.toString){ p.toString = overrides.toString; } } }, // 生成命名空间。javascript语言没有命名空间这么一说，所以只好用对象的属性来实现。 namespace : function(){ var a=arguments, o=null, i, j, d, rt; for (i=0; i<a.length; ++i) { d=a[i].split("."); rt = d[0]; eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';'); for (j=1; j<d.length; ++j) { o[d[j]]=o[d[j]] || {}; o=o[d[j]]; } } }, // URL编码函数 urlEncode : function(o){ if(!o){ return ""; } var buf = []; for(var key in o){ var ov = o[key], k = encodeURIComponent(key); var type = typeof ov; if(type == 'undefined'){ buf.push(k, "=&"); }else if(type != "function" && type != "object"){ buf.push(k, "=", encodeURIComponent(ov), "&"); }else if(Ext.isDate(ov)){ var s = Ext.encode(ov).replace(/"/g, ''); buf.push(k, "=", s, "&"); }else if(Ext.isArray(ov)){ if (ov.length) { for(var i = 0, len = ov.length; i < len; i++) { buf.push(k, "=", encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&"); } } else { buf.push(k, "=&"); } } } buf.pop(); return buf.join(""); }, // URL解码函数 urlDecode : function(string, overwrite){ if(!string || !string.length){ return {}; } var obj = {}; var pairs = string.split('&'); var pair, name, value; for(var i = 0, len = pairs.length; i < len; i++){ pair = pairs[i].split('='); name = decodeURIComponent(pair[0]); value = decodeURIComponent(pair[1]); if(overwrite !== true){ if(typeof obj[name] == "undefined"){ obj[name] = value; }else if(typeof obj[name] == "string"){ obj[name] = [obj[name]]; obj[name].push(value); }else{ obj[name].push(value); } }else{ obj[name] = value; } } return obj; }, // each函数，迭代数组时候用的，和jQuery的each方法差不多，不过Ext的each只能迭代数组或者类数组 each : function(array, fn, scope){ if(typeof array.length == "undefined" || typeof array == "string"){ array = [array]; } for(var i = 0, len = array.length; i < len; i++){ if(fn.call(scope || array[i], array[i], i, array) === false){ return i; }; } }, // 组合函数，标识了过期不推荐，这里也就不看了 combine : function(){ var as = arguments, l = as.length, r = []; for(var i = 0; i < l; i++){ var a = as[i]; if(Ext.isArray(a)){ r = r.concat(a); }else if(a.length !== undefined && !a.substr){ r = r.concat(Array.prototype.slice.call(a, 0)); }else{ r.push(a); } } return r; }, // 处理需要转义的字符，在需要转义的字符前面多加一个反斜线 escapeRe : function(s) { return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1"); }, // 回调函数，可以指定this值和参数，还可以延迟执行 callback : function(cb, scope, args, delay){ if(typeof cb == "function"){ if(delay){ cb.defer(delay, scope, args || []); }else{ cb.apply(scope, args || []); } } }, // 取得html元素，el可以是id，也可以是Ext的Element对象 getDom : function(el){ if(!el || !document){ return null; } return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el); }, // 取得document的Element对象 getDoc : function(){ return Ext.get(document); }, // 取得文档对象。 // document.body = document.getElementsByTagName('body')[0]; // document.documentElement = document.getElementsByTagName('html')[0]; getBody : function(){ return Ext.get(document.body || document.documentElement); }, // 取得组件对象 getCmp : function(id){ return Ext.ComponentMgr.get(id); }, // 这个用来取得数字，可以设置默认值 num : function(v, defaultValue){ v = Number(v == null || typeof v == 'boolean'? NaN : v); return isNaN(v)? defaultValue : v; }, // 销毁函数，销毁的对象可以是Element或者是Component destroy : function(){ for(var i = 0, a = arguments, len = a.length; i < len; i++) { var as = a[i]; if(as){ if(typeof as.destroy == 'function'){ as.destroy(); } else if(as.dom){ as.removeAllListeners(); as.remove(); } } } }, // 清除Dom节点n removeNode : isIE ? function(){ var d; return function(n){ if(n && n.tagName != 'BODY'){ d = d || document.createElement('div'); d.appendChild(n); d.innerHTML = ''; } } }() : function(n){ if(n && n.parentNode && n.tagName != 'BODY'){ n.parentNode.removeChild(n); } }, // javascript是一个弱类型的语音，所以下面这个type函数可以正确返回测试变量的类型 type : function(o){ // 其实undefined和null也可以算两种类型，这里把他们俩全归类到false了 if(o === undefined || o === null){ return false; } if(o.htmlElement){ return 'element'; } var t = typeof o; if(t == 'object' && o.nodeName) { switch(o.nodeType) { case 1: return 'element'; case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace'; } } if(t == 'object' || t == 'function') { switch(o.constructor) { case Array: return 'array'; case RegExp: return 'regexp'; case Date: return 'date'; } if(typeof o.length == 'number' && typeof o.item == 'function') { return 'nodelist'; } } return t; }, // 判断v是否为空或者未定义，allowBlank表示是否允许空字符串，默认值是false。 // 当allowBlank设置为true时，isEmpty('')返回false isEmpty : function(v, allowBlank){ return v === null || v === undefined || (!allowBlank ? v === '' : false); }, // 判断v是否为空，为空的话可以设置默认值，不为空的话返回v值 value : function(v, defaultValue, allowBlank){ return Ext.isEmpty(v, allowBlank) ? defaultValue : v; }, // 判断v是否是数组对象 isArray : function(v){ return v && typeof v.length == 'number' && typeof v.splice == 'function'; }, // 判断v是否是日期对象 isDate : function(v){ return v && typeof v.getFullYear == 'function'; }, // isOpera，表示是否是opera浏览器。 isOpera : isOpera, // isWebKit，表示当前浏览器是否使用WebKit引擎。 isWebKit: isWebKit, // isChrome，表示是否是谷歌浏览器。 isChrome : isChrome, // isSafari，表示是否是苹果浏览器，下面代码是对其版本识别。 isSafari : isSafari, isSafari4 : isSafari4, isSafari3 : isSafari3, isSafari2 : isSafari2, // isIE，表示是否是IE浏览器，下面代码是对其版本识别。 isIE : isIE, isIE6 : isIE6, isIE7 : isIE7, isIE8 : isIE8, // isGecko，表示当前浏览器是否使用Gecko引擎。 isGecko : isGecko, isGecko2 : isGecko2, isGecko3 : isGecko3, // isBorderBox，表示浏览器是否是IE的盒模式。 isBorderBox : isBorderBox, // isLinux，表示是否是Liunx操作系统。 isLinux : isLinux, // isWindows，表示是否是windows操作系统。 isWindows : isWindows, // isMac，表示是否是苹果操作系统。 isMac : isMac, // isAir，AIR（Adobe Integrated Runtime） isAir : isAir, // useShims，表示是IE 6浏览器或者是苹果系统上的Firefox浏览器，并且gecko内核版本小于3。 // 具体哪里使用到了，还不知道，读到后面代码发现了，再解释。 useShims : ((isIE && !(isIE7 || isIE8)) || (isMac && isGecko && !isGecko3)) }); // namespace函数的简写方式 Ext.ns = Ext.namespace; })();  
五、创建Ext所用的命名空间 Ext.ns("Ext", "Ext.util", "Ext.grid", "Ext.dd", "Ext.tree", "Ext.data", "Ext.form", "Ext.menu", "Ext.state", "Ext.lib", "Ext.layout", "Ext.app", "Ext.ux");
 
六、扩展原生Function Ext.apply(Function.prototype, { // 创建回调函数，这个有点太简单了，并且this指向了window，不可以自定义。功能不是很强 createCallback : function(/*args...*/){ var args = arguments; var method = this; return function() { return method.apply(window, args); }; }, // 创建委托（注：Delegate在C#里是叫委托的，其实就是c语音里的函数指针，js中叫匿名函数） // createDelegate比createCallback高级了一点可以设置this指针，同时也可以设置传入的参数 createDelegate : function(obj, args, appendArgs){ var method = this; return function() { var callArgs = args || arguments; if(appendArgs === true){ callArgs = Array.prototype.slice.call(arguments, 0); callArgs = callArgs.concat(args); }else if(typeof appendArgs == "number"){ callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first var applyArgs = [appendArgs, 0].concat(args); // create method call params Array.prototype.splice.apply(callArgs, applyArgs); // splice them in } return method.apply(obj || window, callArgs); }; }, // defer是createDelegate的延迟版，可以延迟执行 defer : function(millis, obj, args, appendArgs){ var fn = this.createDelegate(obj, args, appendArgs); if(millis){ return setTimeout(fn, millis); } fn(); return 0; }, // 这个函数可以在你执行完原函数以后，执行一下自定义的函数。 createSequence : function(fcn, scope){ if(typeof fcn != "function"){ return this; } var method = this; return function() { var retval = method.apply(this || window, arguments); fcn.apply(scope || this || window, arguments); return retval; }; }, // 这个就是完全的函数代理了，和Spring的AOP是一个概念。 createInterceptor : function(fcn, scope){ if(typeof fcn != "function"){ return this; } var method = this; return function() { fcn.target = this; fcn.method = method; if(fcn.apply(scope || this || window, arguments) === false){ return; } return method.apply(this || window, arguments); }; } });  
七、扩展原生String Ext.applyIf(String, { // 转义单引号和反斜杠 escape : function(string) { return string.replace(/('|\\)/g, "\\$1"); }, // 这个函数是对数组进行空格补位 leftPad : function (val, size, ch) { var result = new String(val); if(!ch) { ch = " "; } while (result.length < size) { result = ch + result; } return result.toString(); }, // 这个是格式化字符串，很多语言都有的功能 format : function(format){ var args = Array.prototype.slice.call(arguments, 1); return format.replace(/\{(\d+)\}/g, function(m, i){ return args[i]; }); } }); // 切换值函数 String.prototype.toggle = function(value, other){ return this == value ? other : value; }; // 去空格函数 String.prototype.trim = function(){ var re = /^\s+|\s+$/g; return function(){ return this.replace(re, ""); }; }();  
八、扩展原生Number Ext.applyIf(Number.prototype, { // 对当前数值取一个范围 constrain : function(min, max){ return Math.min(Math.max(this, min), max); } });  
九、扩展原生Array Ext.applyIf(Array.prototype, { indexOf : function(o){ for (var i = 0, len = this.length; i < len; i++){ if(this[i] == o) return i; } return -1; }, remove : function(o){ var index = this.indexOf(o); if(index != -1){ this.splice(index, 1); } return this; } });  
十、扩展原生Date // 返回一个时间差 Date.prototype.getElapsed = function(date) { return Math.abs((date || new Date()).getTime()-this.getTime()); };