javascript - 访问外部组件配置

Question

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

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

然后我就有了这个自定义组件的“容器”:

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，要么 - 一旦调用了父类构造函数 - 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.

在您的情况下，由于您扩展了组件，调用父构造函数就足够了(如上面的示例所示)。