Что такое функция initComponent в extjs4.1?

Ответ 1

Этот метод аналогичен компоненту constructor. Он вызывается истинным constructor и является действительно хорошей точкой отсчета для настройки инициализации компонента (как указано в имени!).

За исключением некоторых очень редких случаев, вы должны переопределить initComponent вместо constructor, потому что более базовая инициализация уже произошла. В частности, объект конфигурации, переданный конструктору, уже будет объединен с объектом.

Предположим, вы хотите настроить конфигурацию компонента, например, установить его width. Если вы попытаетесь сделать это в конструкторе, сначала вам нужно будет проверить, был ли нами передан объект конфигурации или нет (чтобы не пытаться установить свойство на undefined), и вы будете переопределять конфигурационный объект, который является плохой практикой. Если вы установите параметр в this, это может быть переопределено объектом конфигурации. Если вы измените значение в объекте конфигурации, вы измените объект, превзойдя ожидания от вызывающего кода (т.е. Повторное использование объекта конфигурации приведет к неожиданному результату). В initComponent значение всегда будет this.width, вам не нужно беспокоиться о конфиге.

Еще один интересный момент: initComponent - это место, где создаются дочерние компоненты (для контейнера), магазины, просмотр, шаблоны и т.д. Таким образом, перед вызовом метода superclass 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 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 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();
}