EXTJS组件化(一)----建立你的思想

EXT JavaScript Firefox Hibernate Ajax 

首先感谢朱治生朋友转载了我的帖子,由于种种不可抗的原因导致Dojochina资料遗失,损失惨重.
前言
组件化编程:是将各种小部件组装成一个对象,并提供相应的事件和函数,供别人方便的调用.
本文基于EXTJS 3.0.0,在其他版本中(特别是EXTJS2.0)会有所不同请注意!!
正文
    EXTJS的效率一直都被关注着,效率问题也是所有web开发者面临的最大的难题.面对着EXTJS3.0超过600KB的体积,被无数人指责,唾弃.我觉得这些人根本就没有从问题的本质出发去看待这个工具.

    我一直把EXTJS作为一个工具来看待,哪个工具好,我就用哪个.如果根据系统情况Jquery或者Prototype能有更好的表现,我是很乐意 去使用这些AJAX框架的.一个工具的推出,必然有它的优点和缺点,只是要看你怎么取舍.EXTJS的效率慢,我承认,确实不如其他的一些AJAX框架. 但是这个慢,是建立在其丰富的UI组件,统一的界面风格上的(当然,看多了也腻).就好比Hibernate,你能说Hibernate不好吗?但是,Hibernate的效率肯定不如JDBC直连.

    或许很多人会说,我就是不用EXTJS,我看见它就不喜欢.说这种话的人实在太不负责任,自己没有时间去学,或者直接就是害怕去学它,也不愿意别人 去学..我在此强烈谴责这些说话不负责任的人.这类人应该从思想素质上去提高.这是人性的问题,已经超出技术范围了,这种人发展到最后也就是孔子的那句话(改编):”老而不新(死),视为贼也”.

    关于EXTJS的效率提升.现在很多人在学习EXTJS,每个人的写法各不相同,我只是将我自己的一些经验说一下.

   首先是面向对象的思想建立,EXTJS虽然是基于Javascript的,但是在对象上,写法确实跟Javascript不太一样.EXTJS让Javascript的面向对象更接近强类型后台语言的写法,现在写EXTJS的有很多人没有按照正确的EXTJS式的面向对象的思想去写,例如一个简单的对象:

Java代码  

1. Ext.ns(“Ext.ux.Panel”);  
2.   
3. Ext.ux.Panel=function(){  
4.   
5.     return new Ext.Panel();  
6.   
7. }  

这样写是没有错误的,EXTJS底层很多也是这样写的例如基类Observable

Java代码  

1. EXTUTIL.Observable.prototype = function(){  
2.     var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){  
3.         return s.toLowerCase();  
4.     };  
5.   
6.     return {  
7.         //省略若干代码  
8.     }  

    这就是Javascript最常用的写法,但是在 开发过程中我们能这样去写EXTJS对象吗?
在大多数情况下这显然是不可行的,当整个项目采用Extjs编写之后,这样的代码会让接手的人有一种无从下手的感觉(这个人可能就是两三个月后的你自己).
    我们应该怎么样去写一个对象让代码看起来更简洁清晰呢?还是查看EXTJS的源码,UI组件Window最能说明问题:

Java代码  

1. Ext.Window = Ext.extend(Ext.Panel, {  
2.     //省略若干属性  
3.     baseCls : 'x-window',  
4.     //.......省略若干属性  
5.     initComponent : function(){  
6.         Ext.Window.superclass.initComponent.call(this);  
7.         //省略若干函数体  
8.     }  
9.     //.......省略若干函数  

    Window是继承自Panel的,并为Panel添加了拖拽等功能,到这里,一切就真相大白了,Panel继承自BoxComponent,理论上来讲,我们自己的组件完全可以基于Panel来做,我们可以暂且将Panel作为我们所有组件的容器,我们所写的各种组件都可以被包在这个Panel里面去.
    我们首先构建出自定义组件(这里以登陆为例)的轮廓:

Java代码  

1. Ext.namespace("Lesson1.FirstPanel");  
2. /** 
3.  * @author andy_ghg 
4.  * @version 2009年9月24日23:22:09 
5.  * @description 第一个派生类 
6.  * @class Lesson1.FirstPanel 
7.  * @extends Ext.Panel 
8.  */  
9. Lesson1.FirstPanel=Ext.extend(Ext.Panel,{  
10.     frame:true,  
11.     //初始化函数  
12.     initComponent:function(){  
13.         //继承父类的initComponent函数  
14.         Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);  
15.     }  
16. });  
17.   
18. //*测试  
19. Ext.onReady(function(){  
20.     var panel=new Lesson1.FirstPanel({  
21.         title:"标题",  
22.         height:300,  
23.         width:400,  
24.         renderTo:Ext.getBody()  
25.     });  
26. });  
27. //*/  

运行之后就是一个很普通的Panel,不要着急,我们还要往里面添加东西,登陆需要一个表单,我们继续写下去为这个组件添加一个表单:

Java代码  

1. Lesson1.FirstPanel=Ext.extend(Ext.Panel,{  
2.     frame:true,  
3.     //初始化函数  
4.     initComponent:function(){  
5.         //继承父类的initComponent函数  
6.         Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);  
7.         //为该组件添加了一个FormPanel  
8.         this.formPanel=new Ext.FormPanel({  
9.             defaults:{anchor:"95%",allowBlank:false},  
10.             labelWidth:55,  
11.             defaultType:"textfield",  
12.             items:[{  
13.                 fieldLabel:"用户名",  
14.                 name:"username"  
15.             },{  
16.                 fieldLabel:"密码",  
17.                 inputType:"password",  
18.                 name:"password"  
19.             }]  
20.         });  
21.                 //将表单列入到panel的items里去  
22.         this.add(this.formPanel);  
23.     }  
24. });  

然后我们可以将这个Panel包含在一个Window里面去,让他更像一个登陆窗口:

Java代码  

1. //*测试  
2. Ext.onReady(function(){  
3.     var panel=new Lesson1.FirstPanel({  
4.         height:100,  
5.         width:300,  
6.         layout:"fit"  
7.     });  
8.     new Ext.Window({  
9.         title:"登陆",  
10.         items:[panel],  
11.         buttons:[{  
12.             text:"确定"  
13.         },{  
14.             text:"取消"  
15.         }]  
16.     }).show();  
17. });  
18. //*/  

OK,到此为止,我们已经将这个登陆组件的大框架已经搭建好了,我们现在开始为我们的登录组件添加一个公开的函数让外部去调用:

Java代码  

1. Ext.namespace("Lesson1.FirstPanel");  
2. /** 
3.  * @author andy_ghg 
4.  * @version 2009年9月24日23:22:09 
5.  * @description 第一个派生类 
6.  * @class Lesson1.FirstPanel 
7.  * @extends Ext.Panel 
8.  */  
9. Lesson1.FirstPanel=Ext.extend(Ext.Panel,{  
10.     frame:true,  
11.     //初始化函数  
12.     initComponent:function(){  
13.         //继承父类的initComponent函数  
14.         Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);  
15.         //为该组件添加了一个FormPanel  
16.         this.formPanel=new Ext.FormPanel({  
17.             defaults:{anchor:"95%",allowBlank:false},  
18.             labelWidth:55,  
19.             defaultType:"textfield",  
20.             items:[{  
21.                 fieldLabel:"用户名",  
22.                 name:"username"  
23.             },{  
24.                 fieldLabel:"密码",  
25.                 inputType:"password",  
26.                 name:"password"  
27.             }]  
28.         });  
29.         this.add(this.formPanel);  
30.     },  
31. //      提交表单的函数  
32.     submitForm:function(){  
33.         alert(this.formPanel);  
34. //      this.formPanel.getForm().submit({  
35. //          url:"",  
36. //          success:function(){},  
37. //          failure:function(){}  
38. //      })  
39.     }  
40. });  
41.   
42. //*测试  
43. Ext.onReady(function(){  
44.     var panel=new Lesson1.FirstPanel({  
45.         height:100,  
46.         width:300,  
47.         layout:"fit"  
48.     });  
49.     new Ext.Window({  
50.         title:"登陆",  
51.         items:[panel],  
52.         buttons:[{  
53.             text:"确定",  
54.             handler:function(){  
55.                 panel.submitForm();  
56.             }  
57.         },{  
58.             text:"取消"  
59.         }]  
60.     }).show();  
61. });  
62. //*/  

    至此,我不会再继续写下去了,我也不会提供源码,你可以充分发挥你的想象力去改造它,去感受一下这种写法的好处与优点,以及他即将会引发什么样的困惑.思考之后你才能有更深刻的了解.(你可以直接继承Window而不是继承Panel来做这个登录组件)
    (未完待续)