Extjs:通过构造函数或initComponent扩展类?

时间:2010-07-03 15:38:05

标签: javascript inheritance extjs prototypal-inheritance

在extjs中,您始终可以通过constructor()扩展extjs类。对于退出Component的课程,您也可以通过initComponent()进行扩展。

我想知道为什么这么多代码通过initComponent扩展,而constructor似乎是通用扩展方法。 initComponent明显优于constructor吗?

3 个答案:

答案 0 :(得分:17)

首先,在更高版本的Ext中添加了通过constructor覆盖的功能,而不是initComponent,因此特定年龄的所有代码都必须使用initComponent。这些天你仍然会覆盖initComponent,如果你想做什么基类initComponent被调用之后(构造函数对于它来说太早),但之前组件是渲染。在许多情况下(如最常见的,设置配置),它实际上并不重要,大多数人做任何最方便的事情。但是,有些情况很重要。

答案 1 :(得分:11)

让我根据ExtJS版本4.0-4.2及更高版本尝试更新的答案。

constructor()是创建方法之前的对象/类initComponent()是show 方法之前的组件。

constructor: function(config) {
  // ctor #1 - insert code here to modify config or run code to inject config
  // probably the cheapest place to make changes - before anything has been built

  this.callParent(arguments);

  // ctor #2 - insert code here if you need to make changes 
  // after everything has been rendered and shown, IIUC
},
initComponent: function() {
  // this function runs between ctor #1 and ctor #2

  // initComponent #1 - the UI component object tree is created,
  // (this object and child objects from config { items: [{...}]})
  // but they have not yet been rendered to DOM or shown.

  this.callParent(arguments);

  // initComponent #2 - I believe this is equivalent to ctor #2, 
  // I would prefer ctor as it is more universal.
}

具有子项或复杂布局的面板您可能需要使用initComponent,因为您需要检查和操作组件(UI对象图)。

但对于单个表单元素(组合框,按钮等),我坚持使用构造函数,我相信它更轻(在任何复杂的对象构造或DOM更改之前)并且更通用。 IOW构造函数可用于简单的UI,模型和数据存储;后两者不能使用initComponent。

所以我只在有理由的时候才使用initComponent。通常,当我编写initComponent函数时,我正在尝试操作子UI对象,我的下一步是将子控件提取到自己的Ext.define()中,移动自定义代码在子控件类中运行,从父面板中删除复杂的init。这个过程我在最近一页中重复了4次。

答案 2 :(得分:2)

以下是Jay Garcia的书“ExtJS in Action”中的一些相关引用:

  

initComponent在Component类的构造函数中执行,但仅在完成Component的一些关键设置任务之后才执行。这些任务包括将配置对象属性缓存和应用到类的实例

之后,根据构造函数将config参数应用于实例:

  

如果需要通过cloneConfig克隆子类的已配置实例,那么通过构造函数进行扩展是最好的选择。

顺便说一句,尽管Jay的书是关于ExtJS 3的,但似乎cloneConfig仍然与ExtJS4相关;见:

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig