extjs4.1中initComponent函数有什么用? [英] What is the use of initComponent function in extjs4.1?

问题描述

谁能告诉我 initComponent 函数在 extjs4.1 中的用途是什么?请举例

Can anybody tell me what the use of the initComponent function is in extjs4.1? Please provide an example

谢谢

推荐答案

这个方法类似于组件的constructor.它由真正的构造函数调用，是一个非常好的自定义组件初始化的钩子点(正如名字所说！).

This method is akin to a constructor for components. It is called by the true constructor, and is a really good hook point to customize the initialization of the component (as said in the name!).

除了在极少数情况下，您应该覆盖 initComponent 而不是 constructor，因为更基本的初始化已经发生.最值得注意的是，传递给构造函数的配置对象将已经合并到对象中.

Except in some very rare occasions, you should override initComponent instead of the constructor because the more basic initialization will already have taken place. Most notably, the config object passed to the constructor will have already been merged into the object.

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

Let's say you want to customize the configuration of a component, like setting its width. If you try to do that in the constructor, you'll have to check first whether we've been passed a config object or not (to avoid trying to set a property on undefined), and you'll have the override the config object which is bad practice. If you set the option in this, that may get overridden by the config object. If you change the value in config object, you modify the object, breaking expectations from the calling code (i.e. reusing the config object will have unexpected result). In initComponent, the value will always be this.width, you don't have to worry about the config.

另一个有趣的点是 initComponent 是创建子组件(用于容器)、存储、视图、模板等的地方.因此，在调用超类 initComponent 方法之前，您可以对它们进行操作以确保它们尚未被使用或需要(例如添加项目、创建商店等).另一方面，一旦调用了 super 方法，就可以保证所有这些依赖项都已创建并实例化.例如，这是向依赖项添加侦听器的好地方.

Another interesting point is that initComponent is the place where child components (for container), stores, view, templates, etc., are created. So, before calling the superclass initComponent method, you can act on these being sure they've not already been used or needed (e.g. adding items, creating the store, etc.). On the other hand, once you've called the super method, you are guaranteed that all this dependencies have been created and instantiated. So that's the good place to add listeners to dependencies, for example.

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

That being said, keep in mind that no rendering is taking place in initComponent. Child components are created and configured, but their DOM elements have not been created. To affect the rendering, you'll have to use rendering related events or look for the afterRender or onRender methods...

这是一个插图摘要:

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

这篇关于extjs4.1中initComponent函数有什么用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！