【ExtJS】关于constructor、initComponent、beforeRender

浏览数：37 / 时间：2015年06月09日

　　ExtJS提供的组件非常丰富，不过当原生的组件无法满足要求时，就需要扩展原生自定义组件了。

　　initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

　　在Extjs 中使用Ext.define来实现扩展， initComponent 和 constructor的使用方式类似:

1 Ext.define(‘My.panel.Panel‘, {  
2     extend : ‘Ext.panel.Panel‘,  
3     initComponent : function() {  
4         //do something  
5     },  
6     constructor : function() {  
7         //do something  
8     }  
9 });

　　一般状况上，加上 xtype 的定义，类似:

 1 Ext.define(‘My.panel.Panel‘, {  
 2     extend : ‘Ext.panel.Panel‘,
 3     xtype: ‘myPanel‘,
 4     initComponent : function() {  
 5         //do something  
 6     },  
 7     constructor : function() {  
 8         //do something  
 9     }  
10 });

　　initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的，只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法。

　　自定义类中的 initComponent　函数中必须调用 callParent();否则调用者无法初始化这个对象。

　　针对button 这样的扩展组件来说，自定义类中的 constructor ，需要调用callParent( arguments);否则调用者无法初始化这个对象。

　　在下面的例子中：

 1 Ext.define(‘My.form.Panel‘,{
 2     extend: ‘Ext.panel.Panel‘,
 3     xtype: ‘form-panel‘,
 4     
 5     title: ‘form-panel‘,
 6     width: 400,
 7     height: 300,
 8     
 9     defaultType: ‘textfield‘,
10     
11     items: [{
12         allowBlank: false,
13         fieldLabel: ‘Name:‘,
14         name: ‘name‘,
15         emptyText: ‘Name ID‘
16     },{
17         allowBlank: false,
18         fieldLabel: ‘Password:‘,
19         name: ‘password‘,
20         emptyText: ‘password‘,
21         inputType: ‘password‘
22     },{
23         xtype: ‘checkbox‘,
24         fieldLabel: ‘Sex‘,
25     }],
26     buttons: [{
27         text: ‘OK‘
28     },{
29         text: ‘Cancel‘
30     }],
31     
32     constructor: function(){
33         this.renderTo = Ext.getBody();
34         this.callParent(arguments);
35         Ext.Msg.alert(‘constructor‘,‘Constructor!‘);
36     },
37     
38     initComponent: function(){
39         Ext.Msg.alert(‘InitComponent‘,‘InitComponent!‘);
40         var me = this;
41         me.defaults = {
42             anchor: ‘100%‘,
43             labelWidth: 100
44             
45         };
46         me.callParent();
47     
48     },
49     
50     beforeRender: function(){
51         Ext.Msg.alert(‘beforRender‘,‘beforerender!‘);
52         this.callParent();
53     }
54 })
55 
56 Ext.onReady(function(){
57     Ext.create(‘My.form.Panel‘).show();
58 
59 })

　　对容器的renderTo一般写在constructor中，如果写在initComponent中，则配置对象为容器内的几个组件。

　　而对于容器内的几个组件的默认配置，则一般写在initComponent内。

　　通过分别在constructor、initComponent、beforeRender中加入输出语句实验发现，三者的调动顺序为constructor --> beforeRender --> initComponent。

　　通过对ExtJS的生命周期的了解，在初始化阶段，首先调用了构造器constructor,一般从 Component 继承下来的类并不需要提供（通常没有提供）一个独立的构造器。然后是各种事件的创建以供各组件的调用，随后是在 ComponentMgr 中注册组件实例，从而可以通过 Ext.getCmp 被获得实例引用，然后调用initComponent 方法，这是一个最重要的初始化步骤，它是做为一个模板方法，子类可以按需要重写这个方法。最后呈现阶段，如果有配置 renderTo 或 applyTo，组件会马上被呈现输出，否则，它会被延迟输出，直
到组件被显式调用显示，或被它的容器所调用输出。而beforeRender是在组件渲染 rendered之前触发，一般扩展的新组件与元素的初始化配置，就写在beforeRender内。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【ExtJS】关于constructor、initComponent、beforeRender