[size=medium]ExtJs:xtype的含義
根據我在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，進行渲染和顯示。謹記：[color=red]需要的時候才實例化。[/color]
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
如果要使輸入域爲密碼類型可以使用
inputType: 'password'
如：
{xtype:'textfield',inputType: 'password',fieldLabel: '密碼',name: 'PASSWORD',allowBlank:false,anchor:'95%'}
[/size]
根據我在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，進行渲染和顯示。謹記：[color=red]需要的時候才實例化。[/color]
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
如果要使輸入域爲密碼類型可以使用
inputType: 'password'
如：
{xtype:'textfield',inputType: 'password',fieldLabel: '密碼',name: 'PASSWORD',allowBlank:false,anchor:'95%'}
[/size]
