EXT中xtype的含義分析
更新時間:2010年01月07日 21:04:22 作者:
根據(jù)我在論壇上的觀察,xtype用起來的時候疑惑會比較多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我決定闡述一下這個xtype的概念。
序言
根據(jù)我在論壇上的觀察,xtype用起來的時候疑惑會比較多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我決定闡述一下這個xtype的概念。
定義
xtype就是一個代表類(Class)的標識名字。
譬如,你有這個類,名字是Ext.ux.MyGrid。正常情況下你需要用這個名字來實例化這個類(創(chuàng)建類的對象)。
除了類名外,你還可以這樣登記類的xtype:
Ext.reg('mygrid', Ext.ux.MyGrid);
其中xtype 是 mygrid 而類名的一般形式是Ext.ux.MyGrid。上面的語句登記了新的xtype,換種說法說,xtype mygrid 與類 Ext.ux.MyGrid是連在一起的。
到底有什么好處?
試想一下,你手頭上的是一個大型的項目,為了響應用戶的操作,程序里面包含者大量的對象(windows、forms、grids)。用戶點擊圖標或按鈕,就會新建一個窗體,窗體里面又有grid,最終在屏幕上渲染出來。
嗯,我們回到Ext2.x之前的編碼,那時候我們實例化所有對象是頁面第一次加載后就進行的(程序代碼第一次的運行)。在客戶端內(nèi)存中,Ext.ux.MyGrid類的對象已經(jīng)存在,等待用戶的點擊。 同樣是這個grid,假設你上百個的實例,...是多么浪費寶貴的資源?。『芏鄃rid其實用戶未必會點擊讓它出現(xiàn)。
延時實例化
如果你使用xtype,那么在內(nèi)存中的僅僅是一個配置項對象,像:
{xtype:'mygrid", border:false, width:600, height:400, ...}
消耗沒有復雜的實例對象來得大。
嗯,用戶點擊按鈕或圖標會怎么樣呢?Ext會辨認出它是一個準備要渲染的grid但不立刻實例化,Ext在ComponentMgr的幫忙下明白這么一回事:“如果我要實例化xtype mygrid的對象,我就知道要創(chuàng)建的實際是類Ext.ux.MyGrid的對象”。即如下列代碼:
create : function(config, defaultType){
return new types[config.xtype || defaultType](config);
}
等價于:
Java代碼
return new Ext.ux.MyGrid(config);
然后實例化grid,進行渲染和顯示。謹記:需要的時候才實例化。
根據(jù)我在論壇上的觀察,xtype用起來的時候疑惑會比較多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我決定闡述一下這個xtype的概念。
定義
xtype就是一個代表類(Class)的標識名字。
譬如,你有這個類,名字是Ext.ux.MyGrid。正常情況下你需要用這個名字來實例化這個類(創(chuàng)建類的對象)。
除了類名外,你還可以這樣登記類的xtype:
Ext.reg('mygrid', Ext.ux.MyGrid);
其中xtype 是 mygrid 而類名的一般形式是Ext.ux.MyGrid。上面的語句登記了新的xtype,換種說法說,xtype mygrid 與類 Ext.ux.MyGrid是連在一起的。
到底有什么好處?
試想一下,你手頭上的是一個大型的項目,為了響應用戶的操作,程序里面包含者大量的對象(windows、forms、grids)。用戶點擊圖標或按鈕,就會新建一個窗體,窗體里面又有grid,最終在屏幕上渲染出來。
嗯,我們回到Ext2.x之前的編碼,那時候我們實例化所有對象是頁面第一次加載后就進行的(程序代碼第一次的運行)。在客戶端內(nèi)存中,Ext.ux.MyGrid類的對象已經(jīng)存在,等待用戶的點擊。 同樣是這個grid,假設你上百個的實例,...是多么浪費寶貴的資源?。『芏鄃rid其實用戶未必會點擊讓它出現(xiàn)。
延時實例化
如果你使用xtype,那么在內(nèi)存中的僅僅是一個配置項對象,像:
復制代碼 代碼如下:
{xtype:'mygrid", border:false, width:600, height:400, ...}
消耗沒有復雜的實例對象來得大。
嗯,用戶點擊按鈕或圖標會怎么樣呢?Ext會辨認出它是一個準備要渲染的grid但不立刻實例化,Ext在ComponentMgr的幫忙下明白這么一回事:“如果我要實例化xtype mygrid的對象,我就知道要創(chuàng)建的實際是類Ext.ux.MyGrid的對象”。即如下列代碼:
復制代碼 代碼如下:
create : function(config, defaultType){
return new types[config.xtype || defaultType](config);
}
等價于:
Java代碼
復制代碼 代碼如下:
return new Ext.ux.MyGrid(config);
然后實例化grid,進行渲染和顯示。謹記:需要的時候才實例化。
相關文章
Extjs Ext.MessageBox.confirm 確認對話框詳解
顯示一個確認對話框,用來代替JavaScript標準的confirm()方法,具有兩個按鈕“是”和“否”如果為其提供一個回調(diào)函數(shù),則該函數(shù)將在單擊按鈕后被調(diào)用(包括右上角的推出按鈕),所單擊按鈕的id將被作為唯一的參數(shù)傳遞到回調(diào)函數(shù)中。2010-04-04
Extjs TriggerField在彈出窗口顯示不出問題的解決方法
解決Extjs TriggerField在彈出窗口顯示不出問題2010-01-01
Extjs NumberField后面加單位實現(xiàn)思路
本文為大家介紹下在NumberField后面加單位,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-07-07
ExtJs GridPanel簡單的增刪改實現(xiàn)代碼
ExtJs GridPanel中實現(xiàn)增刪改效果的代碼,需要的朋友可以參考下。2010-08-08
ext combox 下拉框不出現(xiàn)自動提示,自動選中的解決方法
ext combox 如果想實現(xiàn)類似于 baidu 搜索時的提示功能。必須禁止其分頁功能才可以。2010-02-02

