ExtJS学习笔记

ext js官网下载地址：

http://www.sencha.com/

ext js 2.0.2的csdn下载地址 ：

http://download.csdn.net/detail/u010154120/7545491

官网文件夹说明：

adapter文件夹：该文件夹包含了extjs和其实框架如jquery、yui、prototype的桥接器，用于Extjs和这些框架的友好整合。 

build文件夹：包含了所有js文件的紧凑压缩版，方便网络传输，提高下载速度。  

docs文件夹：Extjs的帮助文档，遗憾的是要先布署在服务器上才能访问。网上有人制作了无需布署的版本。  

examples文件夹：自带的示例全部在该文件夹中，一定记得去看看。  

resources文件夹：包含了Extjs所需要的样式表文件和图片资源。  

source文件夹：源代码文件夹，没有经过压缩的版本。  ext-base.js：基础类库。  ext-core.js：核心类库。  ext-all.js：类库完整版。  ext-all-debug.js：带格式的未压缩的类库完整版，带调试功能。  ext-core-debug.js：带格式的未压缩的核心类库。  CHANGES.html：开发及升级日志。  license.txt：协议，比较复杂，但用惯了盗版的我们来说完全不予理会。

ie和firefox字体问题：
Extjs在很多情况下使用11px字体，11px大小是一种边缘字体，不同的浏览器对11px的渲染各不相同，IE的渲染和12px相似，而在Firefox中，则和10px相似，导致字体在FF中过小的问题。当然，英文看不出来，中文则相当别扭。
解决：找到ext-all.css文件，把里面的11px全部替换成12px

图片问题：
为了配合皮肤，需要一张1*1大小的空白图片，变态的是，这张图片不是从
本地获取的，而是访问了http://extjs.com/s.gif，也就是说，访问了网络上的图片，如果没有连网，就会出现图片无法显示的情况。解决的方案是，在js文件中添加如下语句：Ext.BLANK_IMAGE_URL = "../extjs/resources/images/default/s.gif"; BLANK_IMAGE_URL是Extjs中定义的一个常量，我们重新赋了新值。但是，由于环境不同，您的路径可能会有些许变化。

必须文件：
顺序不能颠倒
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="../extjs/ext-base.js"></script>  
<script type="text/javascript" src="../extjs/ext-all.js"></script>

官网文件夹说明：

adapter文件夹：该文件夹包含了extjs和其实框架如jquery、yui、prototype的桥接器，用于Extjs和这些框架的友好整合。 

build文件夹：包含了所有js文件的紧凑压缩版，方便网络传输，提高下载速度。  

docs文件夹：Extjs的帮助文档，遗憾的是要先布署在服务器上才能访问。网上有人制作了无需布署的版本。  

examples文件夹：自带的示例全部在该文件夹中，一定记得去看看。  

resources文件夹：包含了Extjs所需要的样式表文件和图片资源。  

source文件夹：源代码文件夹，没有经过压缩的版本。  ext-base.js：基础类库。  ext-core.js：核心类库。  ext-all.js：类库完整版。  ext-all-debug.js：带格式的未压缩的类库完整版，带调试功能。  ext-core-debug.js：带格式的未压缩的核心类库。  CHANGES.html：开发及升级日志。  license.txt：协议，比较复杂，但用惯了盗版的我们来说完全不予理会。

ie和firefox字体问题：
Extjs在很多情况下使用11px字体，11px大小是一种边缘字体，不同的浏览器对11px的渲染各不相同，IE的渲染和12px相似，而在Firefox中，则和10px相似，导致字体在FF中过小的问题。当然，英文看不出来，中文则相当别扭。
解决：找到ext-all.css文件，把里面的11px全部替换成12px

图片问题：
为了配合皮肤，需要一张1*1大小的空白图片，变态的是，这张图片不是从
本地获取的，而是访问了http://extjs.com/s.gif，也就是说，访问了网络上的图片，如果没有连网，就会出现图片无法显示的情况。解决的方案是，在js文件中添加如下语句：Ext.BLANK_IMAGE_URL = "../extjs/resources/images/default/s.gif"; BLANK_IMAGE_URL是Extjs中定义的一个常量，我们重新赋了新值。但是，由于环境不同，您的路径可能会有些许变化。

必须文件：
顺序不能颠倒
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="../extjs/ext-base.js"></script>  
<script type="text/javascript" src="../extjs/ext-all.js"></script>

基础功能解析：

Ext对象声明源码：
  Ext = {
version : "2.0.2"
};


Ext.appply():  类似于jQuery的extend浅层复制功能
最多将两个对象D，B复制到C对象中，如果B不为空，则递归调用Ext.apply。最终将D和B对象复制到C对象中

源码：
Ext.apply = function(C, D, B) {
if (B) {
Ext.apply(C, B)
}
if (C && D && typeof D == "object") {
for ( var A in D) {
C[A] = D[A]
}
}
return C
};
模拟测试：
<script type="text/javascript"> 
  Ext = {
version : "2.0.2"
};


  Ext.apply = function(C, D, B) {
if (B) {
Ext.apply(C, B);
}
if (C && D && typeof D == "object") {
for ( var A in D) {
C[A] = D[A];
}
}
return C;
};
  
  (function (){
  Ext.apply(Ext,{a:function(){alert("a");}},{b:function (){alert("b");}});
  Ext.a();
  })();
  </script>


以下是源码通过Ext.apply为Ext增加的功能：


Ext.applyIf:
Ext.apply(Ext,{applyIf : function(o, c) {
if (o && c) {
for ( var p in c) {
if (typeof o[p] == "undefined") {
o[p] = c[p]
}
}
}
return o
}});
该功能是对apply的一个改进，将c复制到o对象中，如果o对象包含c要复制过来的对象，则不复制。
区别：apply：扩展对象能够覆盖原对象，applyIf不可以覆盖原对象。

Ext.emptyFn: 用于返回一个空函数，便于在程序中创建空函数。Ext.emptyFn返回function(){}

源码：

emptyFn : function() {}

Ext.addBehaviors：为页面中一个或多个元素添加事件 

源码：

addBehaviors : function(o) {
if (!Ext.isReady) {
Ext.onReady(function() {
Ext.addBehaviors(o)
});
return
}
var cache = {};
for ( var b in o) {
var parts = b.split("@");
if (parts[1]) {
var s = parts[0];
if (!cache[s]) {
cache[s] = Ext.select(s)
}
cache[s].on(parts[1], o[b])
}
}
cache = null
}

测试：

元素使用css规则查找，其中元素与事件用@隔开

 Ext.addBehaviors({
   //为id为foo的元素下的所有a元素添加click事件
   '#foo a@click' : function(e, t){
       // do something
   },
   // 为多个选择器添加相同的事件(mouseover)。在@之前使用逗号分开
   '#foo a, #bar span.some-class@mouseover' : function(){
       // do something
   }
});

Ext.id:返回一个唯一的id值。
如果只需要获取一个唯一的id值，则直接调用Ext.id()；
如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el)，el为元素Id、Dom对象或Ext的Element对象。
如果需要指定特定的前缀，则需要传入第二个参数，如Ext.id(el,”myPrix-”)，默认前缀为ext-gen，如默认返回id可能为ext-gen4，指定了前缀后可能返回myPrix-4。

源码：

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
}

Ext.extend：实现对象之间的继承

参考：http://blog.csdn.net/u010154120/article/details/34859957

Ext.override:重写对象中的方法

源码：

override : function(origclass, overrides) {

if (overrides) {
var p = origclass.prototype;
for ( var method in overrides) {
p[method] = overrides[method]
}
}
}

Ext.namespace：

创建命名空间：
如Ext.namespace("com.ext","com.jquery","com.prototype")
然后可以创建如com.ext.PersonClass=function(){…}的接口

源码：

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]]
}
}
}

首先通过arguments得到namespace方法的参数，然后用点号分割成数组，依次把空对象递归赋值进去，上面就是系统内建的命名空间

从代码可以看出,如果我们传入的字符串参数是以"."分割的,那么将会创建多个对象,比如:

Ext.namespace('com.ext');

则会创建2个对象,相当于执行了下面的代码:

com=  {};
com.ext =  {};

这样,我们在自定义类的时候就能这样使用:

com.ext.ManageCorp = function()  {
  
};

如果还想定义一个同名的类,那么可以就使用不同的namespace来区分,这样2个类就不会冲突了:

Ext.namespace('com.ext2');
com.ext2.ManageCorp = function()  {
 
}

创建包对象的位置在eval（）函数中

注：命名空间的简易调用：Ext.ns()，在Ext Api中未给出此用法。

Ext.urlEncode( Object o ) : String将一个json对象转换称url参数串，支持通过数组为一个参数设定多个值。
如将{a:1,b:2,c:[1,3,5,7]}转换为a=1&b=2&c=1&c=3&c=5&c=7

Ext.urlDecode( String string, [Boolean overwrite] ) : Object将url参数串转换为json对象，overwrite如果为true，则后面的同名参数值覆盖前面的同名参数值（默认为false即不覆盖而以数组形式返回）。
如 Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
返回的对象内容为{a:1,b:2,c:[1,3,5,7]}
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7",true)
返回{a:1,b:2,c:7}

Ext.each：遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。
如果某项fn执行结果返回false（必须是false，undefined无效），遍历退出，后面的array项将不被遍历。
遍历过程中每次为fn传入参数分别为[当前数组项]，[当前索引]和[数组array]三个参数。
Scope用于设定fn函数中的this指针。

源码：

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
}
}
}

 
测试：

Ext.each([1,3,5,7],function(v,i,a){
      alert("index: "+i+" value: "+v+" array.length："+a.length)
});
将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4  
index:2 value:5 array.length：4  
index:3 value:7 array.length：4 Ext.each([1,3,5,7],function(v,i,a){
    alert("index: "+i+" value: "+v+" array.length："+a.length);
    return v!=5;  //到第三项后遍历退出
});

将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4  
index:2 value:5 array.length：4 

Ext.combine(arg1,arg2..argn) : Array    //该方法在Ext2不推荐再使用
用于实现对数组的合并，如果是字符串则作为只有一项的数组合并。
如 var a1=[1,3,5],b1=["a","b","c"];var c1="xxyznbde";
Ext.combine(a1,b1,c1) 返回[1,3,5,a,b,c,xxyznbde]

Ext. escapeRe( String str ) : String
将属于正则里的特殊字符进行转义。
如 Ext.escapeRe("(ab)$\sa342{}[dd]")将返回\(ab\)\$sa342\{\}\[dd\]。

Ext.callback(cb, scope, args, delay) :void  //该方法为Ext的内部方法
调用一个函数或延迟调用一个函数。
Cb:调用的函数。
scope:cb中this指针。
args：传如cb的参数，以数组形式表示。
delay：延迟多少毫秒执行cb。
如 Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);将于1秒钟后弹出8，即3+5的结果。

Ext.getDom( Mixed el ) : HTMLElement根据传入的id/dom节点/Ext的Elemenet对象，返回其dom对象。
如alert(Ext.getDom("a").innerHTML);或
alert(Ext.getDom(document.getElementById("a")).innerHTML);
将返回id为a的元素的innerHTML内容。

Ext.getDoc()/Ext.getBody() : Ext.Element分别返回页面的document对象和body对象，返回值为Ext的Element对象，而非Dom对象。

Ext.getCmp( String id ) : Ext.Component根据传入的html元素id返回该元素的组件类型，返回值为Ext的Component对象。
必须保证该id对象的元素是Ext的一个内部组件（通过Ext创建的组件），否则什么都不返回。

Ext.num( Mixed value, Number defaultValue ) : Number
验证value是否是一个数字，如果是则直接返回否则返回defaultValue。
如 alert(Ext.num(5,7))返回5，alert(Ext.num("5",7)) 返回7

18、Ext.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void销毁创建的Element或组件(Component)，即销毁其所有的事件监听，dom节点，并调用对象本身的destory方法（如果存在的话），传入的参数类型为Ext.Element或Ext. Component，可以一次性传入多个对象进行销毁。
如 Ext.destory(menu,el,Button);会销毁menu,el,Button三个对象。

Ext.removeNode(htmlElement el): void  //Ext内部方法
删除指定的dom节点。传入参数为dom对象。
如 Ext.removeNode(document.getElementById("ab"));

Ext.type( Mixed object ) : String返回传入的对象的类型。
包括如下类型：
string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
如 Ext.type("ab")返回string
Ext.type(20)返回number
Ext.type([3,5,6])返回array
Ext.type(/reg/)返回regexp
Ext.type(document.body)返回element。

Ext.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean检查一个值是否为null/undefined或是否是空，如果是则返回true。
如果传入allowBlank为true，则只检查是否为null或undefined。
如： Ext.isEmpty("a")返回false，
Ext.isEmpty("")返回true，
Ext.isEmpty("",true)返回false，
Ext.isEmpty(null)返回true。

Ext.value(String v,String defaultValue[,[Boolean allowBlank]):String  //Ext内部方法
检查v是否是为null/undefined或空，如果是则返回defaultValue，否则返回v。如果allowBlank参数为true，则允许v为空（即当v为空时不返回defaultValue而返回空）。