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，{{1} }），坐在我的me里面。或者在设置一切之前应该修改/覆盖的东西，这样用户就不会通过覆盖一些重要的变量来破坏我的组件。

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

修改

关于丑陋的initComponent，我在我的应用中广泛使用了变量this，它看起来比me更清晰。它也有助于我减少更少的范围。

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都会从preveous实例中消失。

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

有关Ext.define（）中initComponent（）的最佳实践

3 个答案: