如何将配置 属性 提供给 Extjs 6 中的视图项？

Question

在 Extjs 6 中，如何通过绑定或直接分配将配置 属性 直接分配给视图？

Ext.define('App.view.main.Main', {
extend: 'Ext.Container',

config: {
    btnLabel: 'MyButton'
},

someOtherProperty:'xyz',

items: [{
    xtype:'button',

    //text:this.someOtherProperty,
    //text:this.btnLabel,
    //text:this.getBtnLabel(),

    //here accessing this throws error, while loading this refers to windows object and not the class... 
    width:'150px'
    }],
});

我可以将 属性 移动到 ViewModel 并访问它，但我的问题是，我们不能将 class 级别 属性 分配给它的子组件吗？

Answer 1

好吧，不是那样你做不到。问题是您在 class 原型中定义项目 - 这意味着您不能对那里的实例执行任何特定操作。

这就是 initComponent 的用途。我通常在那里定义我的 items 属性，明确用于此目的：

Ext.define('App.view.main.Main', {
  extend: 'Ext.Container',
  config: {
    btnLabel: 'MyButton'
  },
  someOtherProperty:'xyz',

  initComponent: function() {
    // The config properties have already been transferred to the instance
    // during the class construction, prior to initComponent being called.
    // That means we can now call this.getBtnLabel()
    this.items = [
      { xtype: 'button',
        text: this.getBtnLabel(),
        width:'150px'
    }]

    // Call the parent function as well. NB: After this, items won't be
    // a simple array anymore - it gets changed into a collection of
    // components.
    this.callParent(arguments);
  }
});

一般来说，在 class 级属性中添加对象时要小心，因为它们将是原型上的属性，并在 class 的所有实例之间共享。