extjs組件生命周期大體分為3個階段:初始化、渲染、銷毀。
第一階段:初始化
初始化工作開始於組件的誕生,所有必須的配置設定、事件注冊、預渲染處理等都在此時進行。
1、應用組件的配置:
當初始化一個組件的實例時,傳遞的組件配置對象包含了希望讓組件擁有的所有功能,這些都是在Ext.Component基類的前幾行代碼完成的。
2、注冊事件:
諸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有繼承於Ext.Component的組件都會默認擁有的基本事件,它們將會在執行某些行為之前或之后被觸發。
3、ComponentMgr注冊組件實例:
在這里,每一個組件的實例都會生成一個字符串作為其ID值,供Ext.Cmp()方法來獲得該實例的引用。在實例的配置中,可以通過配置id值給其傳遞ID值,不過如果設置了同樣的ID值,Ext.Cmp()方法找到的實例引用將會是最后一個設置了該ID的組件。也就是說,最后設置的ID值將會覆蓋前面的所有相同ID值。
4、調用initComponent()方法:
關於initComponent()方法,在直接或間接繼承了Ext.Component基類的組件中,該方法會在Component的構造函數constructor中被調用。
這里來看看其回調順序:
Ext.Window ==> Ext.Panel ==> Ext.Container ==> Ext.BoxComponent ==> Ext.Component
在自定義組件時,一般都會覆蓋父類的initComponent()方法,並且在最后用this.callParent()來回調父類函數,則在實例化組件的過程中,container的initComponent方法里的this已經變成了該實例對象本身。如果不這么做,譬如直接將itsms寫入配置中,則在內部調用container的initComponent方法時,this所指的對象將不是目標實例化的對象。配置內的items的內容將殘留在new的對象上,從而導致在連續實例化同一個自定義組件時,除了第一個實例,后面的實例都將失敗的結果。
於是在自定義組件的時候,最好將配置項寫入initComponent方法中,並在配置項最后使用this.callParent()來回調其父類函數。有許多工作都會在initComponent方法里完成。例如注冊自定義的事件、設定data stores、創建子控件等。initComponent可以看做constructor的補充,因此經常用於擴展組件的入口點。
5、加載插件和組件渲染:
如果在constructor的參數中傳遞了plugin對象,plugin的init方法將會被調用,同時會將父對象作為參數傳遞進init方法里。如果組件中配置了renderTo或者applyTo,則組件將馬上被渲染,否則,它會被延遲渲染,直到組件被顯式調用顯示,或被它的容器所調用。
第二階段:組件呈現
1、觸發beforerender事件:
這是在組件被render渲染前被調用的。用以提供處理函數或者阻止組件的繼續渲染。
2、設置容器:
如果沒有父容器被指定,默認它的父對象被指定為它的容器。
3、調用onReader方法:
這是為子類執行呈現工作的一個非常重要的方法,這是一個模板方法,在子類中可以根據需來重寫它的實現邏輯。直接被創建的類的 onRender 首先被調用,然后它可以通過superclass.onRender 來調用基類的 onRender 方法。這個方法很容易被重新實現,如果需要你可以在繼承關系的任意類中重寫這個方法。
4、不隱藏組件
默認,大多數組件都會通過設置像 x-hidden 這個樣式來使它隱藏。當 autoShow 設置為true 時,這個隱藏功能的樣式會被移除。
5、應用自定義樣式
所有的 Component 子類都支持指定 cls 配置屬性,通過它可以為 Component 所呈現的HTML 元素指定 CSS 樣式。通過添加組件的 cls 屬性,使用標准的樣式規則,是一個自定義可視組件顯示效果的非常完美的方法。
6、render 方法被觸發
簡單的通知組件已經被成功的呈現了。
7、調用 afterRender
這是另一個模板方法,子類根據邏輯需要可以重新實現或覆蓋該方法。所有的子類可以通過調 superclass.afterRender.來調用父類的方法。
8、組件隱藏或不可用
根據配置選項的值來設置。
9、狀態事件被初始化
可以狀態化的組件會定義一些事件來指定狀態的初始化和保存。如果提供,這些事件會被添加。
第三階段:銷毀
1、觸發 beforedestroy
這是一個可取消的事件,如果需要,可能通過提供事件代理來阻止組件被銷毀。
2、調用 beforeDestroy 方法
又一個模板方法,在子類中可以重新實現和調用父類的方法。
3、移除事件監聽者(代理)
如果組件已被呈現,則移除它底層的 HTML 元素的事件監聽列表,然后將元素從 DOM中移除。
4、onDestroy 被調用
這個還是一個模板方法,在子類可以重新實現。這里需要注意的是,容器類提供了一個默認的 onDestroy 實現,它會循環銷毀它的成員組。
5、組件實例從 ComponentMgr 中反注冊
不可以再通過 Ext.getCmp 獲取到對象實例。
6、destroy 事件被觸發
這只是一個簡單的提醒,表示組件銷毀成功。
7、移除 Component 上的事件代理
組件可以獨立於元素,自己擁有事件代理,如果存在則移除它們。