EXT元件的使用和延遲載入

2021-09-01 16:30:10 字數 1115 閱讀 7638

元件可以直接通過new 關鍵子來建立,比如控制項乙個視窗,使用new ext.window(),

建立乙個**則使用new ext.gridpanel()。當然,除了一些普通的元件以外,一般都會在構

造函式中通過傳遞構造引數來建立元件。

元件的建構函式中一般都可以包含乙個物件,這個物件包含建立元件所需要的配置屬性

及值,元件根據建構函式中的引數屬性值來初始化元件。比如下面的例子:

var obj=;

var panel=new ext.panel(obj);

panel.render("hello");

可以省掉變數obj,直接寫成如下的形式:

var panel=new ext.panel();

panel.render("hello");

render 方法後面的引數表示頁面上的div 元素id,也可以直接在引數中通過renderto 參

數來省略手動呼叫render 方法,只需要在建構函式的引數中新增乙個renderto 屬性即可,

如下:

new ext.panel();

對於容器中的子元素元件,都支援延遲載入的方式建立控制項,此時可以直接通過在需要

父元件的建構函式中,通過給屬性items 傳遞陣列方式實現構造。如下面的**:

var panel=new ext.tabpanel(,,]});panel.render("hello");

這些**定義了tabpanel 這個容器控制項中的子元素,裡包括三個面板。上面的**與下面的**等價:

var panel=new ext.tabpanel(),new

ext.panel(),new ext.panel()]});panel.render("hello");

前者不但省略掉了new ext.panel 這個建構函式,最重要前者只有在初始化tabpanel 的

時候,才會建立子面板,而第二種方式則在程式一開始就會建立子面板。也就是說,前者實

現的延遲載入。

資料延遲載入元件

引 目前流行的頁面延遲載入以及渲染元件,參考 kissy 所寫,練習一下yui3模組編寫。原理 2.對於螢幕外延遲渲染的html存放在隱藏 visibility hidden 的textarea中,並且該textarea佔據本該渲染的位置,監控窗體滾動,當textarea進入可見區域,將該texta...

開發vue延遲載入元件

vue的單頁面應用訪問速度一般情況下已經很快了,不過對於比較複雜的頁面首次開啟的時候會很慢,慢的原因呢主要涉及如下兩個方面 1 dom元素較多,首次開啟時需要進行太多的渲染和判斷,而這些渲染和判斷大多數往往都不是首次開啟頁面時需要消耗的。2 多數首次不顯示的的dom元素,或者子元件載入時會呼叫aja...

延遲載入和預載入

在網頁剛開始開啟的時候,並沒有載入這些,滾動條移動到一定的位置才載入這些,這就是延遲載入的乙個例子。延遲載入的好處 使用延遲載入節約大量的流量資源。實現預載入的方法 1 將的實際的路徑位置放在xsrc中 2 得到距離視窗頂端的距離 3 獲取螢幕可視區域的最低點的位置 達到的時候實現1 在網頁開啟某一...