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

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

 

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

 

Js代码   

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

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

 

 

Js代码   

1. Ext.apply(Ext, function(){  
2.     var E = Ext,  
3.         idSeed = 0,  
4.         scrollWidth = null;  
5.    return {  
6.     emptyFn : function(){},  
7.     ...  
8.     ...  
9.    };  
10. }());  

 

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

 

Js代码   

1. var anonymityFn = function(){  
2.     return {  
3.         demoFn : function(){alert('返回为对象中的方法demoFn');}  
4.     };  
5. };  
6.   
7. anonymityFn.demo2Fn = function(){alert('demo2Fn为anonymityFn静态方法');};  
8. alert(typeof anonymityFn);//function  
9. alert(typeof anonymityFn());//object  
10. anonymityFn.demo2Fn();//demo2Fn为anonymityFn静态方法  
11. anonymityFn.demoFn();//anonymityFn.demoFn is not a function  
12. anonymityFn().demoFn();//返回为对象中的方法demoFn  

 

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

 

 

Js代码   

1. emptyFn : function(){},  

 定义空函数

 

Js代码   

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

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

 

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

 

Js代码   

1. 1、  getDoc()  返回当前HTML document 对象 Ext.Element类型，见代码 Ext.Element.get(document);  
2. 2、  num(v, defaultValue)      验证v是否为数值，不是返回defaultValue  
3. 3、  value (v, defaultValue, allowBlank)  判断v是否为空，空则返回defaultValue  
4. 4、  escapeRe : function(s)  避免传递的字符串参数被正则表达式读取  
5. 5、  sequence : function(o, name, fn, scope)   把o[name]转换为一组合函数，详见createSequence  
6. 6、  addBehaviors : function(o) 页面被初始化完毕后，在元素上绑定事件监听。事件名在'@'符号后  
7. 7、  getScrollBarWidth: function(force) 该方法比较实用，精确的计算了滚动条的宽度，类似也可以计算滚动条的高度。计算浏览器滚动体实际的物理宽度。该值根据OS的不同有所变化，例如主题、字体大小的影响。  
8. 8、  copyTo : function(dest, source, names) 复制源对象身上指定的属性到目标对象。  
9. 9、  destroy : function()尝试去移除每个传入的对象，包括DOM，事件侦听者，并呼叫他们的destroy方法（如果存在）。该方法主要接纳{@link Ext.Element}与{@link Ext.Component}类型的参数。但理论上任何继承自Ext.util.Observable的子类都可以做为参数传入（支持传入多参）。  
10. 10、 destroyMembers : function(o, arg1, arg2, etc) 删除对象的指定属性（支持传入多参，同时删除多个属性）。  
11. 11、 clean : function(arr) 复制传入的数组，并删除没有意义的元素，比如 0 null undefined 等  
12. 12、 unique : function(arr) 复制传入的数组，并且过滤掉有重复的值  
13. 13、 flatten : function(arr)  递归合并一维数组，元素是数组的形式递归调用并合并插入到当前位置  
14. 14、 min : function(arr, comp) 返回数组中的最小值  
15. 15、 max : function(arr, comp) 返回数组中的最大值  
16. 16、 mean : function(arr) 计算数组平均值  
17. 17、 sum : function(arr) 数组求和  
18. 18、 partition : function(arr, truth) 把数组或NodeList分成两部分，按照不同的取值，比如数组中的奇偶，不同的class等  
19. 19、 invoke : function(arr, methodName) 对数组中的每个元素调用指定的一个方法  
20. 20、 pluck : function(arr, prop) 取出数组元素指定属性prop对应的值  
21. 21、 getCmp : function(id) Ext.ComponentMgr.get 的简写  
22. 22、 type : function(o) 返回参数类型的详细信息。如果送入的对象是null或undefined那么返回false， 或是其他类型（见源代码）  
23.   
24. 以下为 Function增加的方法  
25.   
26. 23、 createSequence : function(fcn, scope)  
27. 创建一个组合函数，调用次序为：原函数 + 参数中的函数。该函数返回了原函数执行的结果（也就是返回了原函数的返回值）。在参数中传递的函数fcn，它的参数也是原函数的参数。  
28.   
29.   
30. String增加的方法  
31. 24、 escape : function(string) 把输入的 ' 与 \ 字符转义。  
32. leftPad : function (val, size, ch) 在字符串左边填充指定字符。这对于统一字符或日期标准格式非常有用。  
33. 25、 String.prototype.toggle = function(value, other){  
34.     return this == value ? other : value;  
35. };  
36.   
37. 比较并交换字符串的值。参数中的第一个值与当前字符串对象比较，如果相等则返回传入的第一个参数，否则返回第二个参数。  
38.   
39. 26、 String.prototype.trim = function(){  
40.     var re = /^\s+|\s+$/g;  
41.     return function(){ return this.replace(re, ""); };  
42. }();  
43. 裁剪字符串两旁的空白符，保留中间空白符  
44.   
45. 27、 Date.prototype.getElapsed = function(date) {  
46.     return Math.abs((date || new Date()).getTime()-this.getTime());  
47. };  
48.   
49. 返回date对象创建时间与现在时间的时间差，单位为毫秒。  
50.   
51. Number.prototype  
52. 28、 constrain : function(min, max){  
53.         return Math.min(Math.max(this, min), max);  
54. }  
55. 如果数值在min和max之间，则返回该数值，如果不在该范围内，则返回靠近min或max的值