ExtJS 组件的扩展和继承

ExtJS 的组件很丰富，可有时候还是满足不了需求，需要扩展 ExtJS 的组件实现自制组件。

扩展组件的时候，最好给其设置单独的 xtype， 这样就能比较容易的和其他组件集成。

虽说扩展 ExtJS 的组件只不过是用 Ext.extend() 来实现，多少还是有些窍门。

例： 扩展 Ext.Panel，得到名为 MyComponent 的组件。 xtype 设置为 mycomponent。
MyComponent = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
_name: 'MyComponent' // 非必须，调试时用 console.log 等可显示对象名。
});
this.items = [{
// 如有固定的 items，须在此设定
}];
MyComponent.superclass.initComponent.call(this);
}
});

// 注册 xtype， 此后、只需指定属性 xtype: 'mycomponent' 即可实现组件的延迟渲染。

Ext.reg('mycomponent', MyComponent);

代码解释：

１．initComponent 函数
组件初始化时执行的函数。不过，这和 new 的时候所执行的 Contructor 有所不同。实际上，从 Component 的 Contructor 到 initComponent 的执行，有一个过程。一些有影响的参数，须在 initComponnt 中设定。
- 有关 Layout 的设置，必须在 initComponent 中实行。
- collapsible 须通过对象属性来设定。如：

items:[{
xtype: 'mycomponent',
collapsible: true
}]

ExtJS 组件的扩展和继承
Tuesday, 24. August 2010, 02:24

extjs

ExtJS 的组件很丰富，可有时候还是满足不了需求，需要扩展 ExtJS 的组件实现自制组件。

扩展组件的时候，最好给其设置单独的 xtype， 这样就能比较容易的和其他组件集成。

虽说扩展 ExtJS 的组件只不过是用 Ext.extend() 来实现，多少还是有些窍门。

例： 扩展 Ext.Panel，得到名为 MyComponent 的组件。 xtype 设置为 mycomponent。

MyComponent = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
_name: 'MyComponent' // 非必须，调试时用 console.log 等可显示对象名。
});
this.items = [{
// 如有固定的 items，须在此设定
}];
MyComponent.superclass.initComponent.call(this);
}
});

// 注册 xtype， 此后、只需指定属性 xtype: 'mycomponent' 即可实现组件的延迟渲染。

Ext.reg('mycomponent', MyComponent);

代码解释：

１．initComponent 函数
组件初始化时执行的函数。不过，这和 new 的时候所执行的 Contructor 有所不同。实际上，从 Component 的 Contructor 到 initComponent 的执行，有一个过程。一些有影响的参数，须在 initComponnt 中设定。
- 有关 Layout 的设置，必须在 initComponent 中实行。
- collapsible 须通过对象属性来设定。如：

items:[{
xtype: 'mycomponent',
collapsible: true
}]

２．Ext.reg
调用方法： Ext.reg(xtype字符串， 对象) 。在任意组件中、加入以上 MyComponent 的时候、用 xtype 的方法指定，就能实现迟延渲染。

３．initComponent 内部的 this，是以上 MyComponent 的接口。

４．new MyComponent(config) 生成实例之后、initComponent 内部的 this 通过 apply 追加了属性。

５．Ext.apply(object1,object2)
这是把 object2 合并到 object1。通过这个函数，object2 所持有的属性和方法，全被追加到object1。 同名属性将会被 object2 的属性所覆盖


起初，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社区作为预配置类），所有你所需要做的就是：


view sourceprint?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的组件项：


view sourceprint?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的起点。


view sourceprint?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);
上面是一个启发例子，如果你用以下任意例子创建以上代码的实例 ：


view sourceprint?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