[Ext JS 4] Extjs 它 initComponent 和 constructor差分

initComponent 和 constructor是什么

Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富。

当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的组件实现自制组件了。

除了这种使用状况, 有时候对于一些同样却有使用非常多的配置, 可能像把它独立出来,单独设为一种组件供大家调用, 节省开发时间和提高代码重用度。

initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

Ext.define 实现扩展

在Extjs 中使用Ext.define来实现扩展, initComponent 和 constructor的使用方式相似

	Ext.define('Ext.oscar999.button.MyButton', {
extend : 'Ext.button.Button',
initComponent : function() {
//do something
},
constructor : function() {
//do something
}
});

一般状况上,加上 xtype 的定义, 相似:

aaarticlea/png;base64,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" alt="" />

(在旧的Extjs 版本号中使用 Ext.extend 实现扩展)

那么这两种使用方法到底该怎样使用? 两者的使用又有什么差别呢?

initComponent 和 constructor差别于联系

1. initComponent这种方法是在Ext.Component的构造函数(constructor)中调用的,仅仅有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法

看一下  Ext.AbstractComponent的源代码文件 src/AbstractComponent.js

在  constructor方法中调用了initComponent

aaarticlea/png;base64,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" alt="" />

2.

1)自己定义类中的 initComponent 函数中必须调用 callParent();否则 调用者无法初始化这个对象

2)针对button 这种扩展组件来说,自己定义类中的  constructor ,须要调用callParent( arguments);否则 调用者无法初始化这个对象

this.callParent(arguments);

这里的arguments 是须要的。

(在Extjs 4 之前的版本号中。 可能会看到比較多的XXX.superclass.constructor.call 写法)

sencha 的官网中有一篇针对这两个差别的讨论:

47210-constructor-Vs-initComponent">http://www.sencha.com/forum/showthread.php?47210-constructor-Vs-initComponent

只是语法是基于Extjs 3 来讨论的。 笔者认为作用不是非常大。

就笔者实际的开发经验来看, 基本上使用initComponent 这是可能实现的开发的要求。

上一篇:CodeForces - 645F:Cowslip Collections (组合数&&欧拉函数)


下一篇:JUnit测试框架的使用