日期:2014-05-16  浏览次数:20472 次

ExtJs源码分析与学习—ExtJs核心代码扩展

????? 前面三篇文章参考作者snandy总结了Ext中核心代码Ext.js,今天对Ext.js的扩展Ext-more.js进行分析。这里首先感谢snandy ,这位作者文章写的不错,对Ext的理解也很深入,学习了。

?

???? 该类中主要是对Ext核心方法进行了扩展

?

Ext.ns("Ext.grid", "Ext.list", "Ext.dd", "Ext.tree", "Ext.form", "Ext.menu",
       "Ext.state", "Ext.layout", "Ext.app", "Ext.ux", "Ext.chart", "Ext.direct");

这段代码为Ext提供的组件创建了命名空间,这些组件后续会分析

?

?

Ext.apply(Ext, function(){
    var E = Ext,
        idSeed = 0,
        scrollWidth = null;
   return {
    emptyFn : function(){},
    ...
    ...
   };
}());
?

?调用了Ext的apply方法对Ext方法进行了扩展,该处创建了匿名函数,并执行了改匿名函数,该匿名函数返回值为函数,关于这种写法的实现,请参照以下代码的分析。

?

var anonymityFn = function(){
	return {
		demoFn : function(){alert('返回为对象中的方法demoFn');}
	};
};

anonymityFn.demo2Fn = function(){alert('demo2Fn为anonymityFn静态方法');};
alert(typeof anonymityFn);//function
alert(typeof anonymityFn());//object
anonymityFn.demo2Fn();//demo2Fn为anonymityFn静态方法
anonymityFn.demoFn();//anonymityFn.demoFn is not a function
anonymityFn().demoFn();//返回为对象中的方法demoFn
?

分析上面最后两行执行语句,由于anonymityFn本身为函数,而该函数中没有定义方法demoFn,故会报找不到该函数的错误,而anonymityFn()调用了函数,返回的是对象,且该对象中定义了方法demoFn,故会输出结果

?

?

emptyFn : function(){},

?定义空函数

?

BLANK_IMAGE_URL : Ext.isIE6 || Ext.isIE7 || Ext.isAir ?
                            'http:/' + '/www.extjs.com/s.gif' :
                            'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

?在应用服务中应该设置为本地图片,该参数的作用为:ExtJS中在创建组件的时候,组件中需要替换图标的地方,初始化时都是拿这个s.gif替代的,如果用户指定icon属性,它会将s.gif替换为icon的地址,说白了,s.gif就是一个占位的功能,参见源码总结牛人ting570732 ExtJS3.2源码每天一小时]ExtJS中BLANK_IMAGE_URL的由来(十三)

?

以下只列出了Ext核心代码扩展的方法 ,详细实现可查看源代码

?

1、	getDoc()  返回当前HTML document 对象 Ext.Element类型,见代码 Ext.Element.get(document);
2、	num(v, defaultValue)      验证v是否为数值,不是返回defaultValue
3、	value (v, defaultValue, allowBlank)  判断v是否为空,空则返回defaultValue
4、	escapeRe : function(s)  避免传递的字符串参数被正则表达式读取
5、	sequence : function(o, name, fn, scope)   把o[name]转换为一组合函数,详见createSequence
6、	addBehaviors : function(o) 页面被初始化完毕后,在元素上绑定事件监听。事件名在'@'符号后
7、	getScrollBarWidth: function(force) 该方法比较实用,精确的计算了滚动条的宽度,类似也可以计算滚动条的高度。计算浏览器滚动体实际的物理宽度。该值根据OS的不同有所变化,例如主题、字体大小的影响。
8、	copyTo : function(dest, source, names) 复制源对象身上指定的属性到目标对象。
9、	destroy : function()尝试去移除每个传入的对象,包括DOM,事件侦听者,并呼叫他们的destroy方法(如果存在)。该方法主要接纳{@link Ext.Element}与{@link Ext.Component}类型的参数。但理论上任何继承自Ext.util.Observable的子类都可以做为参数传入(支持传入多参)。
10、	destroyMembers : function(o, arg1, arg2, etc) 删除对象的指定属性(支持传入多参,同时删除多个属性)。
11、	clean : function(arr) 复制传入的数组,并删除没有意义的元素,比如 0 null undefined 等
12、	unique : function(arr) 复制传入的数组,并且过滤掉有重复的值
13、	flatten : function(arr)  递归合并一维数组,元素是数组的形式递归调用并合并插入到当前位置
14、	min : function(arr, comp) 返回数组中的最小值
15、	max : function(arr, comp) 返回数组中的最大值
16、	mean : function(arr) 计算数组平均值
17、	sum : function(arr) 数组求和
18、	partition : function(arr, truth) 把数组或NodeList分成两部分,按照不同的取值,比如数组中的奇偶,不同的class等
19、	invoke : function(arr, methodName) 对数组中的每个元素调用指定的一个方法
20、	pluck : function(arr, prop) 取出数组元素指定属性prop对应的值
21、	getCmp : function(id) Ext.ComponentMgr.get 的简写
22、	type : function(o) 返回参数类型的详细信息。如果送入的对象是null或undefined那么返回false, 或是其他类型(见源代码)

以下为 Function增加的方法

23、	createSequence : function(fcn, scope)
创建一个组合函数,调用次序为:原函数 + 参数中的函数。该函数返回了原函数执行的结果(也就是返回了原函数的返回值)。在参数中传递的函数fcn,它的参数也是原函数的参数。


String增加的方法
24、	escape : function(string) 把输入的 ' 与 \ 字符转义。
leftPad : function (val, size, ch) 在字符串左边填充指定字符。这对于统一字符或日期标准格式非常有用。
25、	String.prototype.toggle = function(value, other){
    return this == value ? other : value;
};

比较并交换字符串的值。参数中的第一个值与当前字符串对象比较,如果相等则返回传入的第一个参数,否则返回第二个参数。

26、	String.prototype.trim = function(){
    var re = /^\s+|\s+$/