ExtJS關於組件Component生命周期


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 上的事件代理

    組件可以獨立於元素,自己擁有事件代理,如果存在則移除它們。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM