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

Question

我正在使用ExtJS的新MVC时尚编写所有组件Ext.define().

无论是在内部定义属性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

我想补充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所有实例的s都将引用同一个对象.因此,每次创建新实例时,bbar都会从preveous实例中消失.