在extjs4.1中使用initComponent函数是什么？ [英] What is the use of initComponent function in extjs4.1?
问题描述
initComponent 函数在extjs4.1中的用途是什么？请提供一个例子 谢谢
此方法类似于组件的构造函数它由真正的构造函数调用，并且是一个非常好的钩点，用于自定义组件的初始化（如名称中所述）。
除了在某些非常罕见的情况下，您应该覆盖 initComponent 而不是构造函数因为更基本的初始化将已经发生。最值得注意的是，传递给构造函数的config对象将已经被合并到对象中。
假设您要自定义组件的配置， code>宽度。如果您尝试在构造函数中执行此操作，则必须首先检查我们是否已经传递了一个配置对象（以避免尝试在 undefined ），你将覆盖这个不好的做法的配置对象。如果您在 中设置选项，则可能会被配置对象覆盖。如果更改配置对象中的值，则修改对象，从调用代码中消除期望（即重用配置对象将产生意外的结果）。在 initComponent 中，值将始终为 this.width ，您不必担心配置。另一个有趣的一点是， initComponent 是子组件（用于容器），存储，视图，模板，等等，被创建。因此，在调用超类 initComponent 方法之前，您可以对这些进行操作，确保它们尚未被使用或需要（例如添加项目，创建商店等） 。另一方面，一旦你调用了超级方法，就可以保证所有这些依赖关系被创建和实例化。所以这就是添加监听器到依赖关系的好地方，例如。
记住，不要在 initComponent中发生渲染。子组件已创建和配置，但其DOM元素尚未创建。为了影响渲染，您必须使用渲染相关的事件，或者查找afterRender 或 onRender 方法之间的。
这是一个说明性的摘要：
构造函数：function（config ）{
// ---访问配置选项非常复杂---
// unsafe：这可能会被传递的配置更改
if （this.enableSomeFeature）{...}
//相反，你必须这样做：
var featureEnabled;
if（config）{//不确定我们已经传递了一个配置对象
if（Ext.isDefined（config.featureEnabled））{
featureEnabled = config.featureEnabled;
} else {
featureEnabled = this.enableSomeFeature;
}
} else {
featureEnabled = this.enableSomeFeature;
}
//现在我们知道，但是不顺利
if（featureEnabled）{
...
}
// ---更糟糕的是：尝试更改选项的值---
// unsafe：我们可能没有配置对象
config.enableSomeFeature =假;
// unsafe：我们正在修改原来的配置对象
（config = config || {}）enableSomeFeature = false;
//克隆配置对象是安全的，但这是无效的
//和无效
config = Ext.apply（{enableSomeFeature：false}，config）;
// ---超级方法---
this.callParent（arguments）; //不要忘了这里的论据！
// --------------------
//这里initComponent将被称为
}
，initComponent：function（）{
// ---访问配置选项很容易---
//读取
if（this.enableSomeFeature）{...}
//或写：我们现在我们在正确的地方更改它，
//我们知道它还没有被使用但
this.deferRender = true;
// ---完成或更改依赖对象是安全的 -
//项目，商店，模板等
/ / Safe：
// 1.你可以确定商店还没有被使用
// 2.你可以确定配置对象将被实例化为
//超级方法
this.store = {
type：'json'
...
};
// ---但是使用依赖对象还为时过早 -
//不安全：您没有证明模板对象具有
//已经创建
this.tpl.compile（）;
// ---超级方法---
this.callParent（）;
// --------------------
//安全：商店已经在这里实例化
this.getStore（）。on（{
...
}）;
//将崩溃，元素尚未创建
this.el.getWidth（）;
}
Can anybody tell me what the use of the initComponent function is in extjs4.1? Please provide an example
Thanks
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!).
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.
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.
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.
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...
Here's an illustrated summary:
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屋！
