【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',
     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内。