在Ext.define()中关于initComponent()的最佳实践

Question

我正在使用Ext.define()以ExtJS的新MVC模式编写所有组件。

我有些困惑，是在initComponent()中定义属性还是像property: 42,这样简单设置它们。

是否有广泛接受的最佳实践？

我在使用initComponent()时只在必要时使用（即当我想要一些动态内容或设置范围时），这可以使函数更短并避免一些丑陋的 this.。我也在考虑总是使用它，这有一个好处，即我永远不必将旧属性移动到initComponent()中，只是因为我想让它更加动态。

不幸的是，Sencha的文档对此没有多少说明，可用的示例似乎都随心所欲地做。

- hynek

Answer 1

个人实践中，我会在属性区域声明变量：

• 定义大小的变量，如x、y、width、height
• 等待被覆盖或可定制的变量，如title、saveBtnTxt、url、fields、iconCls
• 一些常量，将有特殊前缀，以便不易被覆盖。

然后我会在我的initComponent中声明items、listeners、this.on、Ext.apply(me, {..}) 或任何需要对象范围（this，me）的内容。或者在设置所有重要变量之前应该修改/覆盖的内容，以便用户不会通过覆盖某些重要变量来破坏我的组件。

当然，这将作为我的指导方针。仅供参考。

编辑

关于那个丑陋的this，我在我的应用程序中广泛使用变量me，它看起来比this干净得多。这也让我不需要经常更改作用域。

- Lionel Chan

---

好的，那就是我的目前方法。当某些属性神奇地变成动态时，它变得很繁琐，这就是为什么我在问。我还不知道 me ... 我对 ExtJS 还很新。 - hynek

没有什么魔法。只需检查它们的源代码，你会看到很多“me”在飞来飞去。“me”实际上只是指向对象“this”的引用。 - Lionel Chan

神奇的地方在于我自己的代码，当我改变想法并使一个属性变为动态时。由于我刚开始时缺乏可靠的ExtJS 4教程，我的应用程序有些混乱（即3.2样式），因此我不得不重写很多内容，以使它MVC风格化。这导致我需要在initComponent()中频繁地调用属性，这有点繁琐。那么除了更短之外，me和this之间有什么区别吗？ - hynek

更短，是的，你可能不需要经常改变作用域，因为你可以在代码中始终使用“me”。顺便说一下，这只是我的意见，因为他们没有提供教程，所以从他们的代码中学习。这对我帮助很大 :) - Lionel Chan

Answer 2

我想在Lionel的回答中补充一点，更好的做法是在initComponent中声明任何非基本类型的配置项。（所谓基本类型指字符串、布尔和数字）。数组和对象应该放在initComponent中。
因此定义应该如下：

Ext.define('My.NewClass', {
  extend: 'OldClass',
  // here all primitive configs:
  cls: 'x-my-cls',
  collapsible: true,
  region: 'west',
  // and so on ...

  initComponent: function() {
    // here you declare non-primitive configs:
    this.tbar = [/* blah-blah */];
    this.columns = [/* blah-blah */];
    this.viewConfig = {/* blah-blah */};
    // and so on ...

    this.callParent(arguments);
  }

  // other stuff
}

你应该把所有非原始配置项放在initComponent中，这是因为否则所有实例的配置都会引用相同的对象。例如，如果你定义NewClass如下所示：

Ext.define('My.NewClass', {
  extend: 'OldClass',
  bbar: Ext.create('Ext.toolbar.Toolbar', {
  // ...

bbar的所有实例将指向同一个对象。因此，每次创建新实例时，bbar都会从先前实例中消失。

- Molecular Man

---

虽然我同意你的观点，但我认为这个答案可能会有些误导。我的理解是，如果使用xtype（即对象配置）而不是创建实例，则不会共享它。因此，在至少ExtJS 4中，将对象和数组作为配置属性（与使用InitComponent相比）应该没有问题。当然，如果您需要访问此类或您的类可能被其他类覆盖或需要合并配置，则应使用InitComponent。更多信息请参见：http://skirtlesden.com/articles/config-objects-on-the-prototype - Izhaki

如果你把它放在“config {}”块中会怎样？ - Dave

可能是一个愚蠢的问题，但我想知道在ExtJS中什么是非原始类型？我知道它包括数组对象等等...但就概念而言，在使用ExtJS 5创建应用程序时，我总是很困惑如何区分。如果我不使用initComponent()会影响性能吗？顺便说一下，我是ExtJS的新手。谢谢。 - Aman Gupta

Answer 3

  Ext.define('My.Group', {
// extend: 'Ext.form.FieldSet',
xtype : 'fieldset',
config : {
    title : 'Group' + i.toString(),
    id : '_group-' + i.toString()

},
constructor : function(config) {
    this.initConfig(config);

    return this;
},    
collapsible: true,
autoScroll:true,
.....
});

你可以按照以下方式使用它。

handler : function() {                      
        i = i + 1;
        var group = new My.Group({
            title : 'Group' + i.toString(),
            id : '_group-' + i.toString()
        });
        // console.log(this);
        // console.log(group);
        Ext.getCmp('panelid').insert(i, group);
        Ext.getCmp('panelid').doLayout();
    }

- Kunal

---

我没有完全理解你的回答，但是这个评论与此无关：我喜欢交通信号灯。 - Mchl

是的..我想他在征求意见 :) - Lionel Chan

抱歉，您的答案甚至没有包含 initComponent()。 :) 但是交通信号灯很棒。 - hynek

你说的 traffic lights 是什么意思？ - Kunal

如果您想了解有关交通信号灯的问题，请考虑创建一个新的问题。 - Dave