【ExtJS】關於constructor、initComponent、beforeRender

標籤：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: 10044             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