Extjs：通过构造函数或 initComponent 扩展类？

发布于 2024-09-08 06:15:34 字数 292 浏览 3 评论 0原文

在 extjs 中，您始终可以通过 constructor() 扩展 extjs 类。对于从 Component 派生的类，您还可以通过 initComponent() 进行扩展。

我想知道为什么这么多代码通过 initComponent 扩展，而 constructor 似乎是通用扩展方法。 initComponent 是否比 constructor 具有明显的优势？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

家住魔仙堡 2024-09-15 06:15:34

首先，在比 initComponent 更高的 Ext 版本中添加了通过 constructor 进行重写的功能，因此特定年龄的所有代码都必须使用 initComponent。如今，如果您想在调用基类 initComponent 之后执行任何操作（构造函数对此来说为时过早），您仍然需要重写 initComponent，但是在组件之前呈现。在许多情况下（例如最常见的设置配置），这两种方式实际上并不重要，大多数人都会做最方便的事情。然而，在某些情况下它很重要。

回复收藏 0 原文

凹づ凸ル 2024-09-15 06:15:34

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

constructor() 是对象/类before create 方法。而initComponent()是组件before 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。这个过程我在最新的页面中重复了四次。

Let me try an updated answer in terms of ExtJS versions 4.0-4.2 and beyond.

The constructor() is the object/class before create method. And initComponent() is the component before show method.

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).

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.

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.

回复收藏 0 原文