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+$/g;
    return function(){ return this.replace(re, ""); };
}();
裁剪字符串两旁的空白符，保留中间空白符

27、 Date.prototype.getElapsed = function(date) {
    return Math.abs((date || new Date()).getTime()-this.getTime());
};

返回date对象创建时间与现在时间的时间差，单位为毫秒。

Number.prototype
28、 constrain : function(min, max){
        return Math.min(Math.max(this, min), max);
}
如果数值在min和max之间，则返回该数值，如果不在该范围内，则返回靠近min或max的值