有人能告诉我在extjs4.1中,
谢谢。
initComponent
函数的作用是什么?请提供一个例子。谢谢。
initComponent
函数的作用是什么?请提供一个例子。这个方法类似于组件的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();
}