extjs - extjs4.1中的initComponent函数有什么用？

谁能告诉我extjs4.1中initComponent函数的用途是什么？请提供一个例子

谢谢

最佳答案

此方法类似于组件的constructor。它由真正的constructor调用，并且是自定义组件初始化的一个很好的 Hook 点(如名称中所述!)。

除非在极少数情况下，否则您应该重写initComponent而不是constructor，因为已经进行了更基本的初始化。最值得注意的是，传递给构造函数的config对象将已经合并到该对象中。

假设您要自定义组件的配置，例如设置其width。如果尝试在构造函数中执行此操作，则必须首先检查是否已将配置对象传递给我们(以避免尝试在undefined上设置属性)，并且将覆盖配置对象。这是不好的做法。如果您在this中设置该选项，则它可能会被config对象覆盖。如果您更改config对象中的值，则会修改该对象，从而超出调用代码的期望(即，重新使用config对象将产生意外结果)。在initComponent中，该值始终为this.width，您不必担心配置。

另一个有趣的地方是initComponent是创建子组件(用于容器)，商店， View ，模板等的地方。因此，在调用父类(super class)initComponent方法之前，您可以对它们进行操作，以确保它们尚未被使用或需要(例如，添加商品，创建商店等)。另一方面，一旦调用了super方法，就可以确保已创建并实例化了所有这些依赖项。因此，例如，这是将监听器添加到依赖项的好地方。

话虽如此，请记住initComponent中没有进行渲染。子组件已创建和配置，但尚未创建其DOM元素。为了影响渲染，您必须使用与渲染相关的事件或寻找afterRender或onRender方法...

这是一个图解说明的摘要:

constructor: function(config) {

    // --- Accessing a config option is very complicated ---

    // unsafe: this may be changed by the passed config
    if (this.enableSomeFeature) { ... }

    // instead, you would have to do:
    var featureEnabled;
    if (config) { // not sure we've been passed a config object
        if (Ext.isDefined(config.featureEnabled)) {
            featureEnabled = config.featureEnabled;
        } else {
            featureEnabled = this.enableSomeFeature;
        }
    } else {
        featureEnabled = this.enableSomeFeature;
    }
    // now we know, but that wasn't smooth
    if (featureEnabled) {
        ...
    }


    // --- Even worse: trying to change the value of the option ---

    // unsafe: we may not have a config object
    config.enableSomeFeature = false;

    // unsafe: we are modifying the original config object
    (config = config || {}).enableSomeFeature = false;

    // cloning the config object is safe, but that's ineficient
    // and inelegant
    config = Ext.apply({enableSomeFeature: false}, config);


    // --- Super method ---

    this.callParent(arguments); // don't forget the arguments here!

    // --------------------

    // here initComponent will have been called
}

,initComponent: function() {

    // --- Accessing config options is easy ---

    // reading
    if (this.enableSomeFeature) { ... }

    // or writing: we now we change it in the right place, and
    // we know it has not been used yet
    this.deferRender = true;


    // --- Completing or changing dependant objects is safe ---
    // items, stores, templates, etc.

    // Safe:
    // 1. you can be sure that the store has not already been used
    // 2. you can be sure that the config object will be instantiated
    //    in the super method
    this.store = {
        type: 'json'
        ...
    };


    // --- However that's too early to use dependant objects ---

    // Unsafe: you've no certitude that the template object has
    // already been created
    this.tpl.compile();


    // --- Super method ---

    this.callParent();

    // --------------------


    // Safe: the store has been instantiated here
    this.getStore().on({
        ...
    });


    // will crash, the element has not been created yet
    this.el.getWidth();
}

关于extjs - extjs4.1中的initComponent函数有什么用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16933161/