核心提示：我們在使用 ExtJs 創建組件時最容易理解的當然是用 new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120})；我們還可以直接用 xtype(比如 TextField 對應的 xtype 是 textfield) 的對象形式來創建組件，比如在面板的 items 屬性中，尤其是多個
- 我們在使用 ExtJs 創建組件時最容易理解的當然是用
new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120})；
我們還可以直接用 xtype(比如 TextField 對應的 xtype 是 textfield) 的對象形式來創建組件，比如在面板的 items 屬性中，尤其是多個組件或需要寫許多的 ExtJs 相關代碼時就更值得推薦。我們來對照如下形式就知道了：
- items[
- new Ext.form.TextField({fieldLabel:'姓名', id:'name', width:120}),
- new Ext.form.TextField({fieldLabel:'密碼', id:'passwd', inputType:'password', width:120}),
- new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})
- ]
- //替換成用 xtype 寫法就如下(似乎只是免去了很多的 new ...)
- items[
- {xtype:'textfield', fieldLabel:'姓名', id:'name', width:120},
- {xtype:'textfield', fieldLabel:'密碼', id:'passwd', inputType:'password', width:120},
- {xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}
- ]
寫 ExtJs 相關代碼多了就會用 xtype 的體會，下面是 ExtJs 中各組件的 xtype 與組件類的對應表。不包括 Ext.ux 命名空間中擴展的組件。其實在 Ext API 文檔中有此列表，在 API 幫助中查找 Component 打該頁面就能看到，即：http://www.extjs.com/deploy/dev/docs/output/Ext.Component.html。
| 基本組件： | ||
| 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 | |
另外：關於 ExtJs 如何依據 xtype 創建對應組件這裏只簡單的說一句，ExtJs 的組件是通過 Ext.ComponentMgr 來管理的，組件類會以 xtype 爲 key 註冊到 ComponentMgr 中，用 xtype 形式時就通過 ComponentMgr 來創建 xtype 對應的組件。ComponentMgr 如何對組件進行管理下面會進一步深入探究。
假如想要獲得 xtype 與組件最完整的列表，有兩種辦法：
1. ExtJs 運行後，遍歷 ComponentMgr 的 types{} 哈稀屬性，這個屬性是私有的，需改源代使之爲公有，存儲結構爲{button:Ext.Button, cycle:Ext.CycleButton}
2. 用 grep 從 ExtJs 源代碼中搜尋出來。在組件的 JS 代碼(如 Button.js) 中會用 Ext.reg('button', Ext.Button) 形式註冊，所以下面我用移植到 Windows 上的 GNU grep 程序從源代碼中扒出所有的 xtype 及對應的組件類來。
