Ext元件渲染render的全

2021-07-22 10:05:42 字數 1920 閱讀 9125

模板模式是設計模式中很重要的乙個知識點,在物件導向設計中有著舉足輕重的地位。

在ext中更是發揮的淋漓盡致,為什麼這麼說呢?ext中的元件有著很深的繼承關係,很多方法都有著重複,而且不僅

是**上的重複,更多的是流程上的重複

比方說,ext.panel吧,將乙個panel顯示在瀏覽器中,其過程叫做render(渲染)。有這麼幾道工序:

第一、觸發」beforerender」事件

第二、得到這個panel的父節點(針對dom來說),即容器,也就是供panel入住的那個容器

第三、設定rendered=true

第四、呼叫onrender方法,這步是最重要的,也就是如何將元件顯示在瀏覽器上,涉及到很多流程,一會詳解

第五、設定這個panel的css

第六、觸發」render」事件,指的是當render完成後,觸發的事件

第七、呼叫aferrender,這步和第四步一樣,是很重要的流程之一

第八、看看要不要將這個panel隱藏或者失效,如果使用者設定了hidden或者disable

第九、設定這個panel的位置,也就是dolayout,布局

再來,ext.panel的子類,ext.tabpanel,也有這麼幾道工序:

第一、觸發」beforerender」事件

第二、得到這個panel的父節點(針對dom來說),即容器,也就是供panel入住的那個容器

第三、設定rendered=true

第四、呼叫onrender方法,這步是最重要的,也就是如何將元件顯示在瀏覽器上,涉及到很多流程,一會詳解

第五、設定這個panel的css

第六、觸發」render」事件,指的是當render完成後,觸發的事件

第七、呼叫aferrender,這步和第四步一樣,是很重要的流程之一

第八、看看要不要將這個panel隱藏或者失效,如果使用者設定了hidden或者disable

第九、設定這個panel的位置,也就是dolayout,布局

第十、設定activetab,也就是啟用哪個tab面板

僅僅多了第十個步驟。

其他例子不舉了,都是僅僅在最後幾個步驟上不同而已,大家要說了,這個那是什麼模板模式,不就是最簡單的繼承嗎?

錯了,繼承指的是屬性和方法的繼承,但現在是乙個流程,乙個系列的工序」繼承」,這就是模板模式了。

我們來看,應用了模板模式後的工序

ext.tabpanel只有2道工序了

第一、完成panel渲染的工序

第二、設定activetab,也就是啟用哪個tab面板

ext.panel一道工序

第一、完成ext.container的渲染工序

ext.container有2道工序

第一、完成boxcomponent的渲染工序

第二、設定這個panel的位置,也就是dolayout,布局

ext.boxcomponent一道工序

第一、完成ext.component的渲染工序

ext.component八道工序

第一、觸發」beforerender」事件

第二、得到這個panel的父節點(針對dom來說),即容器,也就是供panel入住的那個容器

第三、設定rendered=true

第四、呼叫onrender方法,這步是最重要的,也就是如何將元件顯示在瀏覽器上,涉及到很多流程,一會詳解

第五、設定這個panel的css

第六、觸發」render」事件,指的是當render完成後,觸發的事件

第七、呼叫aferrender,這步和第四步一樣,是很重要的流程之一

第八、看看要不要將這個panel隱藏或者失效,如果使用者設定了hidden或者disable

下面把流程圖展示出來(配合上onrender和afterrender)

我們來看下圖

仔細的朋友去看container的時候會發現沒有onrender方法, 

Ext元件渲染render的全過程詳述

模板模式是設計模式中很重要的乙個知識點,我在模式總結 模板方法這篇文章中已有總結,在物件導向設計中有著舉足輕重的地位。在ext中更是發揮的淋漓盡致,為什麼這麼說呢?ext中的元件有著很深的繼承關係,很多方法都有著重複,而且不僅 是 上的重複,更多的是流程上的重複 比方說,ext.panel吧,將乙個...

render函式的渲染

1.官網 2.render使用 render h 1.使用方法1 render h 相當於v bind style,接受乙個字串 物件或字串和物件組成的陣列 attrs domprops props on click val nativeon directives 自定義指令 slot 具名插槽 k...

render渲染的理解彙總

我們碼農把 一維的指令或資料 xml html ui結構 轉為二維或三維等方便人可見的東西的這一過程 也常被稱之為 render 其實 渲染 繪製 畫畫 這三個詞是乙個意思.對應的英文是render,draw,paint.但 渲染 的逼格要高於 繪製 繪製 的逼格要高於 畫畫 我是比較傾向把渲染這個...