如何將配置屬性賦予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' 
    }], 
}); 

我可以將財產轉移到視圖模型和訪問，但我的問題是，我們不能指定類級屬性，其子組件？

Answer 1

好吧，不是那樣你不能。問題在於你正在定義類的原型 - 這意味着你不能做任何特定的實例。

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

一般來說，小心被添加對象的類級屬性，因爲他們將在原型屬性和類的所有實例之間共享。