访问 Ext 组件配置

Question

我在 Ext.form.Panel 的 Ext JS 中有一个非常简单的扩展：

Ext.define('path.to.SomeClass', {  
    extend : 'Ext.form.panel',  
    xtype : 'some-class'  

    config : {  
        hasDog : true  
    },

    constructor : function (config) {
        if (this.config.hasDog) {  
            // do something dog related
        } else {
            // do something not dog related
        }
    }
});

然后我有一个 "container" 这个自定义组件：

Ext.define('path.to.OtherClass', {  
    extend : 'Ext.window.Window',  

    // ....

    items : [{
        xtype : 'some-class',
        hasDog : false
    }]
});

但是，出于某种我不知道的原因，SomeClass 中的 if...else 评估始终采用 hasDog 的默认配置。我在 OtherClass 的 items 配置中没有正确配置 some-class 吗？

为了添加更多上下文，OtherClass 是通过一些使用代码调用的：

var window = Ext.create('path.to.OtherClass');  
window.show();

据我所知，以上是非常标准的东西 - 至少在思想上是这样。

Answer 1

您总是获得默认配置的原因是因为您正在访问 this.config，这是您的配置声明，而不是构造函数参数中的实际配置。所以要么使用 config 要么 - 一旦你调用了父 class 构造函数 - this.

constructor : function (config) {
    // before parent class constructor or this.initConfig was called:
    console.log(config.hasDog);

    // call parent class constructor
    this.callParent(arguments);

    // after parent class constructor or this.initConfig was called:
    console.log(this.hasDog);
}

也看看 documentation:

Note: You need to make sure Ext.Base.initConfig is called from your constructor if you are defining your own class or singleton, unless you are extending a Component. Otherwise the generated getter and setter methods will not be initialized.

在您的情况下，由于您扩展了一个组件，因此调用父构造函数应该就足够了（如上例所示）。

访问 Ext 组件配置

Accessing Ext Component Config

javascript

extjs