有关Ext.define（）中的initComponent（）的最佳做法

Question

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

无论是在initComponent()内部定义属性还是通过像property: 42,那样简单地设置属性，我都有些挣扎。

是否存在被广泛接受的最佳做法？

我只是在必要时才使用initComponent()（例如，当我想要动态的东西或设置一个范围时），这样会使函数更短并为我省去一些麻烦的this.，而总是使用它有好处，我永远不必仅将以前的属性移到initComponent()，因为我想使其更具动态性。

不幸的是，Sencha的文档并没有提供太多信息，可用的示例似乎可以根据需要进行。

Answer 1

定义幅度的变量，例如x，y，width，height

等待被覆盖或可自定义的变量，例如title，saveBtnTxt，url，fields，iconCls
• 某些常量，将带有特殊的前缀，因此不会轻易被覆盖

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

当然，这将作为我的指导。 2美分

编辑

关于丑陋的this，我在应用程序中广泛使用了变量me，它看起来比this干净得多。减少更改范围也使我受益。

Answer 2

non-primitive配置。 （按原语，我的意思是字符串，布尔值和数字）。数组和对象进入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 s将引用相同的对象。因此，每次创建新实例时，bbar都会从先前的实例中消失。

Answer 3

您可以如下使用它。

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();
    }