扩展Ext中的组件
引言
起初,Ext.extend()干的不错,它使你能够建立强大的面向对象的JavaScript类层次结构。你可以用它构建你自己的类和派生类,当然也可以扩展Ext的内建类。如果不熟悉Ext.extend(),你应该先读一下Manual:Intro:Inheritance。
Jozef Sakalos写的Tutorial:Extending_Ext_Class详细介绍了怎样在Ext1.X下实现继承。因为自建的构造函数在Ext2.X下仍能够工作,而且毫无疑问你将会遇到2.X之前构造方式的代码,所以本文还是很值得一读的。
Ext.Component
大多数Ext窗口小部件(如Form elements, Panels, Toolbars, ..)继承自Ext.Component(那些没有继承的将在Ext3中实现继承)。
预配置类
最简单的扩展Ext.Component的方式(或者任何继承自它的类)就是延续Ext1.X中利用Ext.extend()的做法。然而还有个差别,就是你不需要定义自己的构造函数(构造函数将由initComponent()来处理,文章后面将会讲到)。如果你所需的是定义一些自己的缺省类来重用(指的是这里和ExtJS社区作为预配置类),所有你所需要做的就是:
1.
//定义组件Ext.some.component的预配置类MyComponent
2.
MyComponent = Ext.extend(Ext.some.component, {
3.
myDefault1:
'..'
,
4.
myDefault2:
'..'
5.
});
6.
7.
//注册成xtype以便延迟加载
8.
Ext.reg(
'mycomponentxtype'
, MyComponent);
在以上示例中,Ext.extend()中的第二个参数对象包含的自定义参数可覆盖Ext.some.component中已经支持的缺省参数。
以上示例看上去较简单,但能够让你从程序中重构除去相当数量重复的代码,并生成可重用的对象。举个例子,你可以用预配置选项创建一个Ext.some.component的实例,代码如下:
var myComponent = new MyComponent();
或者通过你注册过的Component XType延迟加载,下面示例作为Panel的组件项:
1.
{..
2.
items: [ {xtype:
'mycomponentxtype'
} ]
3.
..}
扩展Ext.Component
好的,虽然预配置类很有用,但是目前为止我们还没有添加任何其他的功能给继承类。我们需要覆盖一些方法来实现。这是Ext2.X精彩的地方。
Ext.Component源自1.x,但是在2.x中,它得到了扩展和加强,使它成为了整个架构中最基础的类。现在组件提供统一的组件创建、渲染、事件处理、状态维护、销毁模型,而且Ext中的每个组件,凡是需要这些特性的现在都扩展自Component。Ext_2_Overview#Component_Model。
你应该好好的学习下上面的 Ext_2_Overview,文章详细描述了组件的方方面面。当你一行行的跟踪Ext.Component中的源代码(在ExtJS的src目录下的widgets子目录下的Component.js中),你会明白the Component Life Cycle, Ext_2_Overview#Rendering和Ext_2_Overview#Destruction中的步骤描述所解释的实现,将对你了解Ext如何运行很有启发。
现在,既然本文是关于扩展Ext.Component的,主要关注的方法应是initComponent(),在the Component Life Cycle(组件生命周期)中扮演了首要角色,在你掌握了initComponent() 后,你可以继续研究其他重要的方法,如onRender(),使你能够扩展Ext_2_Overview#Rendering,onDestroy() 用来扩展Ext_2_Overview#Destruction,在这方面,我会指出一些由Ext社区成员写的非常好的文档。
Jozef Sakalos写的Tutorial:Writing_a_Big_Application_in_Ext是个非常不错的教程,它教你使用新的组件继承模型,并解释了为什么组件继承模型无疑是构建优良程序的好的基础。
还有由 Jozef Sakalos写的Tutorial:Extending_Ext2_Class,也提供了实际的例子来讲解(mjlecomte的帖子提供了该例子的建议版本)。
一个可重用模板
下面的模板(基于Jozef Sakalos在mjlecomte's帖子中的回复)可作为扩展Ext.Component的起点。
01.
MyComponent = Ext.extend(Ext.some.component, {
02.
//缺省构造参数,可被自定义设置覆盖
03.
propA: 1,
04.
05.
initComponent:
function
(){
06.
//在组件初始化期间调用的代码
07.
08.
//因为配置对象应用到了“this”,所以属性可以在这里被覆盖,或者添加新的属性
09.
//(如items,tools,buttons)
10.
Ext.apply(
this
, {
11.
propA: 3
12.
});
13.
14.
//调用父类代码之前
15.
16.
//调用父类构造函数(必须)
17.
MyComponent.superclass.initComponent.apply(
this
, arguments);
18.
19.
//调用父类代码之后
20.
//如:设置事件处理和渲染组件
21.
},
22.
23.
//覆盖其他父类方法
24.
onRender:
function
(){
25.
26.
//调用父类代码之前
27.
28.
//调用父类相应方法(必须)
29.
MyScope.superclass.onRender.apply(
this
, arguments);
30.
31.
//调用父类代码之后
32.
33.
}
34.
});
35.
36.
//注册成xtype以便能够延迟加载
37.
Ext.reg(
'mycomponentxtype'
, MyComponent);
上面是一个启发例子,如果你用以下任意例子创建以上代码的实例 :
1.
var
myComponent =
new
MyComponent({
2.
propA: 2
3.
});
4.
//或者延迟加载:
5.
{..
6.
items: {xtype:
'mycomponentxtype'
, propA: 2}
7.
..}
属性propA将被设置3次,按顺序分别是1,2,3 。通过跟踪代码(和注释) ,你会发现初始值为1(构造缺省),然后通过用户配置对象设置为2,最后在initComponent方法中被覆盖设置成3.希望这个例子能让你稍微明白代码执行的顺序(而不是按照你读代码的顺序!)。
因为组件是其他组件的基础,所以下面代码是获取基础组件快捷方法。
var topCmp = (function(o){while(o.ownerCt){o=o.ownerCt} return o;})(this);
结束语
本文主要关注于initComponent()方法及其在the Component Life Cycle中的角色。一旦你掌握了它,就该研究Ext_2_Overview#Component_Model列出的Ext组件模型的其他方面(如管理渲染、状态管理、插件等)。非常感谢Jozef Sakalos,他发表了很好的关于扩展组件方面的帖子和教程,当然还要感谢Jack和Ext团队给我们提供了如此棒的框架,迫不及待想看看Ext3给我们带来了什么!
from: [url]http://extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)[/url]
Author: Patrick Donelan
译者:unifly