Javascript Extjs：通过构造函数或 initComponent 扩展类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3171946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs: extend class via constructor or initComponent?
提问by Exception e
In extjs you can always extend an extjs class via the constructor(). For classes derinving from Componentyou can also extend via initComponent().
在 extjs 中，您始终可以通过constructor(). 对于源自Component您的类，也可以通过initComponent().
I am wondering why so many code extend via initComponent, whereas constructorseems to be the universal extension method. Does initComponentoffer clear advantage over constructor?
我想知道为什么这么多代码扩展 via initComponent，而constructor似乎是通用扩展方法。是否initComponent提供明显的优势constructor？
采纳答案by Brian Moeskau
First off, the ability to override via constructorwas added in a later version of Ext than initComponent, so all code of a certain age would have to use initComponent. These days, you would still override initComponent if you want to do anything afterthe base class initComponent is called (constructor would be too early for this), but beforethe component is rendered. In many cases (like the most common, setting up configs), it does not practically matter either way and most people do whatever is most convenient. However, there are some cases where it matters.
首先，覆盖 via 的能力constructor是在更高版本的 Ext than 中添加的initComponent，因此某个时代的所有代码都必须使用 initComponent。现在，如果您想在调用基类 initComponent之后（构造函数为时过早）但在呈现组件之前执行任何操作，您仍然会覆盖 initComponent 。在许多情况下（如最常见的设置配置），无论哪种方式实际上都无关紧要，大多数人会做最方便的事情。但是，在某些情况下它很重要。
回答by yzorg
Let me try an updated answer in terms of ExtJS versions 4.0-4.2 and beyond.
让我尝试使用 ExtJS 4.0-4.2 及更高版本的更新答案。
The constructor()is the object/class before createmethod. And initComponent()is the component before showmethod.
的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.
}
Panels with children or complex layout you'll probably need to use initComponent, because you'll need to inspect and manipulate the components (the UI object graph).
带有子项或复杂布局的面板您可能需要使用 initComponent，因为您需要检查和操作组件（UI 对象图）。
But for individual form elements (combobox, button, etc.) then I stick with constructor, which I believe is lighter (before any complex object construction or DOM changes) and is more universal. IOW constructors can be used for simple UI, models, and data stores; the latter two can't use initComponent.
但是对于单个表单元素（组合框、按钮等），我坚持使用构造函数，我认为它更轻巧（在任何复杂的对象构造或 DOM 更改之前）并且更通用。IOW 构造函数可用于简单的 UI、模型和数据存储；后两者不能使用initComponent。
So I only use initComponent when there's a reason to do so. Often when I write an initComponent function I'm trying to manipulate child UI objects, and my next step is to extract that child control into its own Ext.define(), the move the custom code to run in the child control class, which removes the complex init from the parent panel. This process I've repeated 4 times in my latest page.
所以我只在有理由的时候才使用 initComponent。通常，当我编写一个 initComponent 函数时，我试图操作子 UI 对象，而我的下一步是将该子控件提取到它自己的 Ext.define() 中，将自定义代码移动到在子控件类中运行，这从父面板中删除复杂的初始化。这个过程我在我的最新页面中重复了 4 次。
回答by Dexygen
Here are some relevant quotes from Jay Garcia's book ExtJS in Action:
以下是 Jay Garcia 的 ExtJS in Action 一书中的一些相关引述：
initComponent is executed inside the Component class's constructor, but only after a few crucial setup tasks for the Component have taken place. These tasks include the caching and application of the configuration object properties to the instance of the class
initComponent 在 Component 类的构造函数中执行，但只有在为 Component 执行了一些关键的设置任务之后才会执行。这些任务包括配置对象属性的缓存和应用到类的实例
And later, and in light of constructor being where config parameters get applied to the instance:
后来，鉴于构造函数是配置参数应用于实例的地方：
if configured instances of the subclass will ever need to be cloned via the cloneConfig ....then extending via the constructor is the best choice.
如果子类的配置实例需要通过 cloneConfig 克隆....那么通过构造函数扩展是最好的选择。
By the way, despite Jay's book being about ExtJS 3 it appears that cloneConfig is still relevant in ExtJS4; see:
顺便说一句，尽管 Jay 的书是关于 ExtJS 3 的，但似乎 cloneConfig 在 ExtJS4 中仍然相关；看：
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig
and
和
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig
