[轉]ExtJs:xtype的含義

原文地址:http://www.cnblogs.com/timy/archive/2010/08/13/1799111.html

根據我在EXT論壇上的觀察，xtype用起來的時候疑惑會比較多。甚至有些人根本忽略xtype，或者不清楚它是什麼。因此我決定闡述一下這個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的幫忙下明白這麼一回事：「若是我要實例化xtype mygrid的對象，我就知道要建立的實際是類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	盒子組件，至關於一個 <div>
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