标签：style blog color io 使用 ar strong for div
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
标签：style blog color io 使用 ar strong for div
原文地址：http://www.cnblogs.com/linxiong945/p/3981962.html
