ExtJS新發現04_xtype的含義以及對應類

 
定義
xtype就是一個代表類(Class)的標識名字。

譬如,你有這個類,名字是Ext.ux.MyGrid。正常情況下你需要用這個名字來實例化這個類(創建類的對象)。

除瞭類名外,你還可以這樣登記類的xtype:

Ext.reg('mygrid', Ext.ux.MyGrid);
其中xtype是mygrid 而類名的一般形式是Ext.ux.MyGrid。上面的語句登記瞭新的xtype,換種說法說,xtype mygrid 與類 Ext.ux.MyGrid是連在一起的。

 
到底有什麼好處?
試想一下,你手頭上的是一個大型的項目,為瞭響應用戶的操作,程序裡面包含者大量的對象(windows、forms、grids)。用戶點擊圖標或按鈕,就會新建一個窗體,窗體裡面又有grid,最終在屏幕上渲染出來。

嗯,我們回到Ext2.x之前的編碼,那時候我們實例化所有對象是頁面第一次加載後就進行的(程序代碼第一次的運行)。在客戶端內存中,Ext.ux.MyGrid類的對象已經存在,等待用戶的點擊。同樣是這個grid,假設你上百個的實例,…是多麼浪費寶貴的資源啊!很多grid其實用戶未必會點擊讓它出現。

 
延時實例化
如果你使用xtype,那麼在代碼中的僅僅是一個用於配置的對象,像:

{xtype:'mygrid", border:false, width:600, height:400, …}
消耗沒有實例對象來得大。

嗯,用戶點擊按鈕或圖標會怎麼樣呢?Ext會辨認出它是一個準備要渲染的grid但不立刻實例化,Ext在ComponentMgr的幫忙下明白這麼一回事:“如果我要實例化xtypemygrid的對象,我就知道要創建的實際是類Ext.ux.MyGrid的對象”。即如下列代碼:

 

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}
等價於:

return new Ext.ux.MyGrid(config);
然後實例化grid,進行渲染和顯示。謹記:需要的時候才實例化。

 

ExtJs xtype一覽

基本組件:
xtype Class 描述
button Ext.Button 按鈕
splitbutton Ext.SplitButton 帶下拉菜單的按鈕
cycle Ext.CycleButton 帶下拉選項菜單的按鈕
buttongroup Ext.ButtonGroup 編組按鈕(Since 3.0)
slider Ext.Slider 滑動條
progress Ext.ProgressBar 進度條
statusbar Ext.StatusBar 狀態條,2.2加進來,3.0 又去瞭
colorpalette Ext.ColorPalette 調色板
datepicker Ext.DatePicker 日期選擇面板

容器及數據類組件
xtype Class 描述
window Ext.Window 窗口
viewport Ext.ViewPort 視口,即瀏覽器的視口,能隨之伸縮
box Ext.BoxComponent 盒子組件,相當於一個 <p>
component Ext.Component 組件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanel Ext.TabPanel 選項面板
treepanel Ext.tree.TreePanel 樹型面板
flash Ext.FlashComponent 顯示 Flash 的組件(Since 3.0)
grid Ext.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel 可編輯的表格
propertygrid Ext.grid.PropertyGrid 屬性表格
editor Ext.Editor 編輯器
dataview Ext.DataView 數據顯示視圖
listview Ext.ListView 列表視圖

工具欄組件:
xtype Class 描述
paging Ext.PagingToolbar 分頁工具條
toolbar Ext.Toolbar 工具欄
tbbutton Ext.Toolbar.Button 工具欄按鈕
tbfill Ext.Toolbar.Fill 工具欄填充區
tbitem Ext.Toolbar.Item 工具條項目
tbseparator Ext.Toolbar.Separator 工具欄分隔符
tbspacer Ext.Toolbar.Spacer 工具欄空白
tbsplit Ext.Toolbar.SplitButton 工具欄分隔按鈕
tbtext Ext.Toolbar.TextItem 工具欄文本項

菜單組件:
xtype Class 描述
menu Ext.menu.Menu 菜單
colormenu Ext.menu.ColorMenu 顏色選擇菜單
datemenu Ext.menu.DateMenu 日期選擇菜單
menubaseitem BaseItem 
menucheckitem Ext.menu.CheckItem 選項菜單項
menuitem Ext.menu.Item 
menuseparator Ext.menu.Separator 菜單分隔線
menutextitem Ext.menu.TextItem 文本菜單項

表單及表單域組件:
xtype Class 描述
form Ext.FormPanel/Ext.form.FormPanel 表單面板
checkbox Ext.form.Checkbox 多選框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期選擇項
timefield Ext.form.TimeField 時間錄入項
field Ext.form.Field 表單字段
fieldset Ext.form.FieldSet 表單字段組
hidden Ext.form.Hidden 表單隱藏域
htmleditor Ext.form.HtmlEditor HTML 編輯器
label Ext.form.Label 標簽
numberfield Ext.form.NumberField 數字編輯器
radio Ext.form.Radio 單選按鈕
textarea Ext.form.TextArea 多行文本框
textfield Ext.form.TextField 表單文本框
trigger Ext.form.TriggerField 觸發錄入項
checkboxgroup Ext.form.CheckboxGroup 編組的多選框(Since 2.2)
displayfield Ext.form.DisplayField 僅顯示,不校驗/不被提交的文本框
radiogroup Ext.form.RadioGroup 編組的單選按鈕(Since 2.2)

圖表組件:
xtype Class 描述
chart Ext.chart.Chart 圖表組件
barchart Ext.chart.BarChart 柱狀圖
cartsianchart Ext.chart.CartesianChart 
columnchart Ext.chart.ColumnChart 
linechart Ext.chart.LineChart 連線圖
piechart Ext.chart.PieChart 扇形圖

數據集 Store:
xtype Class 描述
arraystore Ext.data.ArrayStore 
directstore Ext.data.DirectStore 
groupingstore Ext.data.GroupingStore 
jsonstore Ext.data.JsonStore 
simplestore Ext.data.SimpleStore 
store Ext.data.Store 
xmlstore Ext.data.XmlStore

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *