文件：ext-2.3.0/source/core/Ext.js
概述：Ext.js主要负责创建Ext全局对象，构建其命名空间，定义extend类继承方法，探测浏览器信息和对Javascript原生库进行扩展。
分析：
一、创建Ext全局对象
Js代码
// 创建Ext全局对象，大多数JS库为了避免和其他JS库命名冲突，都会把自己创建的类或函数封装到一个全局变量中去，
// 这样就相当于创造了自己的命名空间，可以算是一个单例模式。例如，jQuery就是全部都封装到$变量中去。
Ext = {version: '2.3.0'};
二、设置全局undefined变量
Js代码
// 兼容旧浏览器，早期的浏览器实现中，undefined并不是全局变量。就是说，你要判断一个变量是否是没定义，
// 你需要这样写if (typeof a == 'undefined')，不可以写成if (a == undefined)。所以，上面的代码就可以理解了。
// 右面的window["undefined"]，因为window对象没有undefined属性，所以其值为undefined，
// 把undefined赋值给window的undefined属性上，就相当于把undefined设置成了全局变量，
// 这样以后你再判断一个变量是否是未定义的时候，就不需要使用typeof，直接判断就可以了。
window["undefined"] = window["undefined"];
三、定义apply方法属性复制函数
Js代码
// 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对象
Js代码
(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所用的命名空间
Js代码
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
Js代码
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
Js代码
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
Js代码
Ext.applyIf(Number.prototype, {
// 对当前数值取一个范围
constrain : function(min, max){
return Math.min(Math.max(this, min), max);
}
});
九、扩展原生Array
Js代码
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
Js代码
// 返回一个时间差
Date.prototype.getElapsed = function(date) {
return Math.abs((date || new Date()).getTime()-this.getTime());
};
相关推荐
ext.js 源代码解析第二章，主要是关于登录方面的一个解析。
ext-all.js\ext-all-debug.js\adapter\examples\pkgs\resources\src
Ext+JS源码分析与开发实例宝典.pdf，清晰完整版。彭仁夔 编著，2010.1 。该书共6个part，全部下载才能RAR解压。...配套DVD中包窗大量源码和案例文件 （另请下载 Ext+JS源码分析与开发实例宝典_光盘源码.part1, part2）
Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发实例宝典光盘源码Ext JS源码分析与开发...
[深入浅出Ext.JS].徐会生等 配套源代码
EXT 源码的分析，关于ext.js这个文件的
Ext.JS.4.First.Look(第1版)].Code 源代码
ext JS 源码和学习资料,包含ext-3.2.0,ext3.3.1,ext4等多个版本源码，包含多个版本中文API和实用学习pdf
深入浅出Ext.JS.徐会生随书源代码,你懂的..
Ext+JS源码分析与开发实例宝典.pdf，清晰完整版。彭仁夔 编著，2010.1 。该书共6个part，全部下载才能RAR解压。...配套DVD中包窗大量源码和案例文件 （另请下载 Ext+JS源码分析与开发实例宝典_光盘源码.part1, part2）
Ext_JS源码分析与实例宝典 Ext_JS源码分析与实例宝典Ext_JS源码分析与实例宝典Ext_JS源码分析与实例宝典Ext_JS源码分析与实例宝典Ext_JS源码分析与实例宝典
extjs 可编辑的表格树，每个单元格自定义编辑组件，可以自适应列宽，只有源码与例子，运行实例要修改路径，不然图片不能显示，注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo ： codeme9@gmail....
Ext+JS源码分析与开发实例宝典.pdf，清晰完整版。彭仁夔 编著，2010.1 。该书共6个part，全部下载才能RAR解压。...配套DVD中包窗大量源码和案例文件 （另请下载 Ext+JS源码分析与开发实例宝典_光盘源码.part1, part2）
深入浅出ext js书中的源代码， 深入浅出ext js书中的源代码， 深入浅出ext js书中的源代码, 深入浅出ext js书中的源代码
Ext3.0 JS源码分析与开发实例宝典
Ext JS高级程序设计,第5章 在.NET中使用Ext.Direct示例源代码
NULL 博文链接：https://maoyi606.iteye.com/blog/1782825
NULL 博文链接：https://lingf.iteye.com/blog/1821225
Ext+JS源码分析与开发实例宝典.pdf，清晰完整版。彭仁夔 编著，2010.1 。该书共6个part，全部下载才能RAR解压。...配套DVD中包窗大量源码和案例文件 （另请下载 Ext+JS源码分析与开发实例宝典_光盘源码.part1, part2）