Ext学习笔记
1：ext.decode与ext.encode
Ext.decode方法是把字符串转换成对象，ext.encode方法是把对象转换成字符串。
例如：json字符串
2.ext.apply的用法：
Ext中apply及applyIf方法的应用
apply及applyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中，相当于属性拷贝。
不同的是apply将会覆盖目标对象中的属性，而applyIf只拷贝目标对象中没有而源对象中有的属性。
apply方法的签名为“apply( Object obj, Object config, Object defaults ) :Object”，
该方法包含三个参数，第一个参数是要拷贝的目标对象，第二个参数是拷贝的源对象，第三个参数是可选的，表示给目标对象提供一个默认值。可以简单的理解成把第三个参数（如果有的话）及第二个参数中的属性拷贝给第一个参数对象。看下面的代码：
varb1={ p1:"p1 value", p2:"p2 value",f1:function(){alert(this.p2)}};
varb2=new Object();
b2.p2="b2value";
Ext.apply(b2,b1);b2.f1();
在上面的代码中，Ext.apply(b2,b1)这一语句把b1的属性拷贝到了b2对象中，因此调用b2的f1方法可以弹出"p2 value"的提示信息。尽管b2对象已经包含了p2属性值，但拷贝后该属性值会被覆盖。可以在调用apply方法时，在第三个参数中指定拷贝属性的默认值，比如下面的代码：
Ext.apply(b2,b1,{p3:"p3value"});
alert(b2.p3);
这样会使得b2中包含一个p3的属性，值为"p3 value"。
applyIf方法的功能跟apply一样，只是不会拷贝那些在目标对象及源对象都存在的属性。比如把前面演示apply方法的代码改成applyIf，
如下：
Ext.applyIf(b2,b1);b2.f1();
由于b2中已经存在了p2属性，因此，b2.f1()方法中引用this.p2的时候，得到的是"b2 value"，而不是在b1中定义的"p2value"。
3.fireEvent方法
fireEvent方法，顾名思义就是触发某个事件发生的意思
详细出处参考：http://www.jb51.net/article/34202.htm
4.on和un
On方法是注册事件
例如：button1.on('click', buttonOnclick1);
Un方法是移出事件
例如：button1.un('click', buttonOnclick2)
5.eval方法
使用eval把文本数据转换为json对象. Ext.util.JSON.decode(mydata),效果相同
6.extend方法
Ext.extend方法是用来实现类的继承。
extend(Object subclass,Object superclass,[Object overrides] : Object )
第一个参数：子类
第二个参数：父类
第三个参数：要覆盖的属性。
7.call方法
调用一个对象的一个方法，以另一个对象替换当前对象
obj1.method1.call(obj2,argument1,argument2)
如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入．
例如一：
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); //注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
例子二：
function Class1()
{
this.name = "class1";
this.showNam = function()
{
alert(this.name);
}
}
function Class2()
{
this.name = "class2";
}
var c1 = new Class1();
varc2 = new Class2();
c1.showNam.call(c2);
注意，call 的意思是把 c1 的方法放到c2上执行，原来c2是没有showNam() 方法，现在是把c1 的showNam()方法放到 c2 上来执行，所以this.name 应该是 class2，执行的结果就是：alert（"class2"）;
例子三：
<script>
var func=new function(){this.a="func"}
var myfunc=function(x){
var a="myfunc";
alert(this.a);
alert(x);
}
myfunc.call(func,"var");
</script>
可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
更多详细内容请查看：http://www.111cn.net/wy/js-ajax/39874.htm
8. createDelegate方法
1. Ext.onReady(function(){
2. Ext.QuickTips.init()
3. var myclass=new Object();
4. //myclass并没有alert方法,我们也不打算为它写一个alert方法
5. //我们希望它和window.alert有一样的行为,所以我们委托window来做
6. myclass.alert=window.alert.createDelegate(window);
7. //我们还希望他有个更漂亮的show方法和Ext.MessageBox的show功能一样
8. //所以我们又得委托给Ext.MessageBox来做这事了
9. myclass.show=Ext.MessageBox.show.createDelegate(Ext.MessageBox);
10.//我们的myclass也有alert和show方法了
11.myclass.alert('alert1');
12.myclass.show({title:'title',msg:'message'});
13.});
createDelegate ( [Object obj ] , [Array args ] , [Boolean/NumberappendArgs ] ) : Function
返回一个函数， 这个函数调用原函数，原函数中的this指向obj ，关于这个函数的参数由 appendArgs 指定 ：
如function2=function1.createDelegate(obj,args,appendArgs);
function2 call function1 ,function1 中的 this == obj
1. appendArgs ===false
那么 调用function2时传的参数被忽略，args数组参数作为function1的参数运行。
2. appendArgs === true
那么 调用function2时传的参数放在args数组前面合成一个新的数组，作为function1的参数运行。
3.typeof appendArgs =='Number'
假设 调用 function2时传的参数 为 array1 (注意要 slice 为 真正的 Array)
那么将 args 数组插入到 array1 的指定 appendArgs位置 （利用 splice( appendArgs,0 )）
然后再把最终数组 作为function1的参数运行。
示例使用代码：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>createDelegate测试</title>
- <script type="text/javascript" src="javascript/ext-base.js"></script>
- <script type="text/javascript" src="javascript/ext-core.js"></script>
- <script type="text/javascript">
- //<![CDATA[
- Ext.onReady(function() {
- function action_ba(info) {
- alert(this.dom.innerHTML);
- alert(info);
- }
- function action_bb(e,this_,o,info) {
- alert(this.dom.innerHTML);
- alert(e.type+' '+info);
- }
- function action_bc(info,e) {
- alert(this.dom.innerHTML);
- alert(info +' '+e.type);
- }
- Ext.get('action_a').on('click',action_ba.createDelegate(Ext.get('action_a'),['自定义参数覆盖event系列参数']));
- Ext.get('action_b').on('click',action_bb.createDelegate(Ext.get('action_b'),['自定义参数在最后'],true));
- Ext.get('action_c').on('click',action_bc.createDelegate(Ext.get('action_c'),['自定义参数在第一位'],0));
- });
- </script>
- </head>
- <body>
- <button id='action_a'> 测试覆盖参数</button>
- <button id='action_b'> 测试添加参数</button>
- <button id='action_c'> 测试插入参数</button>
- </body>
- </html>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" lang="en"xml:lang="en">
<head>
<title>createDelegate测试</title>
<scripttype="text/javascript"src="javascript/ext-base.js"></script>
<scripttype="text/javascript"src="javascript/ext-core.js"></script>
<scripttype="text/javascript">
//<![CDATA[
Ext.onReady(function() {
function action_ba(info) {
alert(this.dom.innerHTML);
alert(info);
}
function action_bb(e,this_,o,info) {
alert(this.dom.innerHTML);
alert(e.type+' '+info);
}
function action_bc(info,e) {
alert(this.dom.innerHTML);
alert(info +' '+e.type);
}
Ext.get('action_a').on('click',action_ba.createDelegate(Ext.get('action_a'),['自定义参数覆盖event系列参数']));
Ext.get('action_b').on('click',action_bb.createDelegate(Ext.get('action_b'),['自定义参数在最后'],true));
Ext.get('action_c').on('click',action_bc.createDelegate(Ext.get('action_c'),['自定义参数在第一位'],0));
});
//]]>
</script>
</head>
<body>
<button id='action_a'> 测试覆盖参数</button>
<button id='action_b'> 测试添加参数</button>
<button id='action_c'> 测试插入参数</button>
</body>
</html>
附录：Extjs 实现代码
- Function.prototype.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);
- };
- }
9.ext.fly方法和ext.get方法
9.1：ext.fly()
采用flyweight模式使所有fly出来的元素共享内存，可以提高程序执行速度，减少内存占用。Flyweight是减少内存的使用量的一种模式，间接的可能会提高性能。
但： Flyweight未必会减少实例的创建次数。反而可能会增加实例的创建次数。
Ext.fly 属轻量级，返回一个Element对象 ,只是对该dom元素执行一次很简单的操作
9.2:ext.get()
Ext.get重量级，返回一个Element对象
get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象，Ext.Element类是Ext对DOM的封装，可以为每一个DOM创建一个对应的Element对象，
可以通过Element 对象上的方法来实现对DOM指定的操作，比如:用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。
get方法其实是 Ext.Element.get的简写形式。
9.3:fly和get方法的区别
相同：1. 可以相互取代，实现的功能基本一样，都是获取元素的静态方法
不同: 1. get会缓存元素，如果下次获取的元素相同的话，就直接从缓存中取得，以便重用，而fly则不会缓存元素
在以后使用中，一定要合理的利用Ext.get和Ext.fly，避免滥用Ext.get这个“重量级”的方法。
Ext.get和Ext.fly返回的都是一个Element对象，但是Ext.get返回的是一个独立的Element，拥有自己独立的操作接口封装，可以将其返回值保存到变量中，以便以后调用操作等，这样为重用带来了方便。但是它的一个很大缺点就是内存消耗问题，假如调用 Ext.get(id)1000次，则会在内存中创建1000个独立Element，其内存占用可想而知。但是很多时候我们可能仅仅只是对该dom元素执行一次很简单的操作，如隐藏(hide)，这样如果每次都创建一个独立Element放在内存中，实在是对内存的巨大浪费，因此当我们在只需要执行一次操作或者一个很简单的操作时，采用Ext.get就显得很不合理。Ext.fly正是为了解决这个问题而出现，它通过使每次创建的Element共享内存中的一套操作接口来达到节省内存的效果。
9.4：Ext.getDom() ，Ext.getBody()，Ext.getDoc() ，Ext.getCmp()
《1》Ext.getCmp()
getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法其实是Ext.ComponentMgr.get方法的简写形式
如：var h=new Ext.Panel({
id:"p1",
title:"",
});
Ext.getCmp("p1").setTitle("QQ");
《2》Ext.getBody()
实质就是把document.body对象封装成ExtJS元素对象返回,把面板h直接渲染到文档的body元素中
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
《3》Ext.getDom()
得到文档中的DOM节点，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等
《4》Ext.getDoc()
把document对象封装成ExtJS的Element对象
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
