Кто-нибудь может сказать мне, как использовать функцию initComponent
в extjs4.1? Пожалуйста, приведите пример
Спасибо
Кто-нибудь может сказать мне, как использовать функцию initComponent
в extjs4.1? Пожалуйста, приведите пример
Спасибо
Этот метод похож на constructor
для компонентов. Он вызывается истинным constructor
и является действительно хорошей точкой подключения для настройки инициализации компонента (как сказано в названии!).
За исключением некоторых очень редких случаев, вы должны переопределить initComponent
вместо constructor
, потому что основная инициализация уже выполнена. В частности, объект конфигурации, переданный конструктору, уже будет объединен с объектом.
Допустим, вы хотите настроить конфигурацию компонента, например, установить его width
. Если вы попытаетесь сделать это в конструкторе, вам придется сначала проверить, был ли передан объект конфигурации или нет (чтобы избежать попытки установить свойство для undefined
), и вы получите переопределение объекта конфигурации что является плохой практикой. Если вы установите параметр в this
, он может быть переопределен объектом конфигурации. Если вы измените значение в объекте конфигурации, вы измените объект, нарушив ожидания от вызывающего кода (т. е. повторное использование объекта конфигурации приведет к неожиданному результату). В initComponent
значение всегда будет this.width
, вам не нужно беспокоиться о конфиге.
Еще один интересный момент заключается в том, что initComponent
— это место, где создаются дочерние компоненты (для контейнера), хранилища, представления, шаблоны и т. д. Таким образом, перед вызовом метода суперкласса initComponent
вы можете воздействовать на них, убедившись, что они еще не использовались или не нужны (например, добавление элементов, создание хранилища и т. д.). С другой стороны, как только вы вызвали суперметод, вам гарантируется, что все эти зависимости были созданы и реализованы. Например, это хорошее место для добавления слушателей к зависимостям.
При этом имейте в виду, что в 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();
}