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);
代码解释:
1.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);
代码解释:
1.initComponent 函数
组件初始化时执行的函数。不过,这和 new 的时候所执行的 Contructor 有所不同。实际上,从 Component 的 Contructor 到 initComponent 的执行,有一个过程。一些有影响的参数,须在 initComponnt 中设定。
- 有关 Layout 的设置,必须在 initComponent 中实行。
- collapsible 须通过对象属性来设定。如:
items:[{
xtype: 'mycomponent',
collapsible: true
}]
2.Ext.reg
调用方法: Ext.reg(xtype字符串, 对象) 。在任意组件中、加入以上 MyComponent 的时候、用 xtype 的方法指定,就能实现迟延渲染。
3.initComponent 内部的 this,是以上 MyComponent 的接口。
4.new MyComponent(config) 生成实例之后、initComponent 内部的 this 通过 apply 追加了属性。
5.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:
http://extjs.com/learn/Manual:Component:Extending_Ext_Components(Chinese)
Author: Patrick Donelan
译者:unifly
分享到:
相关推荐
EXTJS提供了丰富的预定义组件,如Panel、Grid、Button等,开发者可以根据需求继承和扩展这些组件,创建自定义组件。组件之间可以通过嵌套形成层次结构,这种结构被称为组件层次结构。在EXTJS中,有一种特殊的组件...
ExtJS Grid是一个强大的数据展示组件,它在Web应用程序中用于显示和操作大量数据。Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,是ExtJS库中的核心组件之一。"Extjs Grid 扩展实例"是一个演示如何增强Grid...
ExtJs是一款广泛应用于Web前端开发的JavaScript库,它提供了丰富的组件和功能,使得开发者能够构建交互性强、用户体验优秀的Web应用程序。在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件...
在ExtJs框架中,日期组件(DateField)是用于用户输入日期的常见控件。然而,标准的ExtJs DateField并未内置...通过深入理解ExtJs的组件体系和MVC模式,我们可以灵活地扩展和定制任何控件,以满足不同业务场景的需求。
1. **创建自定义组件**:首先,我们需要创建一个新的EXTJS组件,继承自EXTJS的Date Picker类。这样可以利用原生组件的大部分功能,并在此基础上添加或修改特定功能。 2. **隐藏不必要的部分**:由于目标是只选择...
这些标签指明了我们正在处理的是ExtJS 4版本,涉及到了Combo和Grid两个核心组件,以及对它们进行扩展的方法。 在提供的压缩包文件中,有三个文件: 1. **GridComboBox.js**:这个文件很可能是实现combogrid扩展的...
总结起来,"extjs多选 下拉框扩展"是为了满足ExtJS应用中多选功能的需求,通过对原生ComboBox组件进行扩展和定制,实现了带有复选框的多选下拉框。这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、...
在IT行业中,面向对象编程(Object-Oriented Programming,简称OOP)是一种广泛采用的编程范式,它通过封装、继承和多态等概念来构建软件系统。在Web开发领域,ExtJS是一个强大的JavaScript库,用于创建丰富的用户...
在"无废话ExtJS系列教程十八[继承:Extend]"中,我们主要关注的是ExtJS中的类继承机制,这是一个核心特性,它允许开发者创建可复用和可扩展的组件结构。在JavaScript中,继承是通过原型链实现的,而在ExtJS中,它被...
- GridPanel支持分组,以及与分组功能结合的组件扩展。 ### 知识点详细解读 Extjs教程涵盖了从基础概念到具体组件应用的全方位内容。它强调了JavaScript面向对象编程(OOP)在Extjs框架中的应用,并通过实例演示了...
在给定的场景下,"extjs6 datetimefield 扩展时间控件 分时秒控件"描述了一个针对EXTJS6的`datetimefield`组件的增强,目的是增加对小时、分钟和秒钟的单独选择功能。 EXTJS6是Sencha公司推出的一个强大的...
Extjs自定义组件—下拉树,不仅提升了用户体验,也展现了Extjs框架的强大扩展能力。通过本文的详细介绍,开发者可以掌握其实现细节,为自己的项目增添一个实用且美观的组件。无论是初学者还是经验丰富的开发者,都...
**Ext.extend() 与组件扩展** `Ext.extend()` 是 ExtJS 提供的面向对象继承机制,允许你创建新的类或者扩展已有的类。在 Ext2.x 及更早版本中,它是扩展内置类的主要方式。即使在 Ext2.x 之后,理解 `Ext.extend()`...
DateField作为视图的一部分,我们可以通过继承EXTJS的内置类并覆盖或扩展其默认功能来创建我们的自定义组件。 1. **创建扩展类**: 首先,我们需要创建一个新的类,继承自EXTJS的`Ext.form.field.DateField`。在...
在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于需要展示分层数据结构的应用场景中。 #### 二、核心...
在源码中,你可以看到EXTJS的组件类体系,它采用了面向对象的编程思想,通过继承和混合(Mixins)机制实现组件的功能复用。例如,Panel组件可以看作是Container(容器)和Component(基本组件)的组合,具备了容器的...
- 扩展通常通过继承原组件并重写或添加方法实现,例如,为DateTimeField添加时间范围限制或者自定义弹出日历的样式。 - `index.html`文件通常作为示例或测试页面,展示如何使用这些扩展的控件,开发者可以通过打开...
在JavaScript的世界里,ExtJS是一个强大的富客户端...总结,"Ext继承和扩展"是ExtJS开发中的核心技巧,它们帮助我们构建出高效、可维护的组件结构。理解和掌握这两个概念,对于提升ExtJS项目的质量和开发效率至关重要。
开发者可以通过继承和混入(mixin)机制来创建自定义组件,实现代码重用,降低开发复杂度。 7. 图表组件 ExtJS 4.0包含了强大的图表组件,支持多种图表类型,如线图、柱状图、饼图等,便于数据可视化。 8. 功能...