如何在Extjs 6中给视图项配置属性

How to give config property to a view Item in Extjs 6?

本文关键字：视图 配置 属性 Extjs      更新时间：2023-09-26

在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并访问它，但我的问题是，我们不能将类级属性分配给它的子组件吗?

好吧，并不是说你不能。问题是你在类原型中定义项目——这意味着你不能对那里的实例做任何特定的事情。

这就是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);
  }
});

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

相关文章：