【ExtJS】关于constructor、initComponent、beforeRender

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

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

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

 Ext.define('My.panel.Panel', {
     extend : 'Ext.panel.Panel',
     initComponent : function() {
         //do something
     },
     constructor : function() {
         //do something
     }
 });  

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

 Ext.define('My.panel.Panel', {
     extend : 'Ext.panel.Panel',
     xtype: 'myPanel',
     initComponent : function() {
         //do something
     },
     constructor : function() {
         //do something
     }
 });  

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

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

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

　　在下面的例子中：

 Ext.define('My.form.Panel',{
     extend: 'Ext.panel.Panel',
     xtype: 'form-panel',

     title: 'form-panel',
     width: 400,
     height: 300,

     defaultType: 'textfield',

     items: [{
         allowBlank: false,
         fieldLabel: 'Name:',
         name: 'name',
         emptyText: 'Name ID'
     },{
         allowBlank: false,
         fieldLabel: 'Password:',
         name: 'password',
         emptyText: 'password',
         inputType: 'password'
     },{
         xtype: 'checkbox',
         fieldLabel: 'Sex',
     }],
     buttons: [{
         text: 'OK'
     },{
         text: 'Cancel'
     }],

     constructor: function(){
         this.renderTo = Ext.getBody();
         this.callParent(arguments);
         Ext.Msg.alert('constructor','Constructor!');
     },

     initComponent: function(){
         Ext.Msg.alert('InitComponent','InitComponent!');
         var me = this;
         me.defaults = {
             anchor: '100%',
             labelWidth: 100

         };
         me.callParent();

     },

     beforeRender: function(){
         Ext.Msg.alert('beforRender','beforerender!');
         this.callParent();
     }
 })

 Ext.onReady(function(){
     Ext.create('My.form.Panel').show();

 })

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

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

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

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