ExtJS組件的xtype屬性列表

　　ExtJS的應用界面是由不少小部件組合而成的，這些小部件被稱做「組件(Component)」，全部組件都是Ext.Component的子類，Ext.Component提供了生命週期管理包括初始化、渲染、大小和尺寸管理、銷燬等功能，這使得全部Ext.Component的子類都自動分享了這些能力。ExtJS提供了各式各樣豐富的組件，每個組件都很容易被擴展建立成自定義組件。

　　每一個組件都有一個代稱叫作xtype，經過該值能夠獲得一個組件的類型或者是定義一個指定類型的組件。

　　大的應用中，因爲使用的方式有些組件可能根本沒有被用到（好比有100個頁面的應用，一個用戶登陸進來只操做了兩個頁面，這時把其餘98個頁面的組件所有初始化是不合理的），例如一個用到TabPanel的應用，TabPanel的每一個tab只當用戶點擊它的時候再渲染便可。這就是引入xtype機制的緣由，有了xtype可讓一個容器的子組件事先定義好，到真正須要的時候再初始化。

　　本xtype屬性表基於ExtJS-4.0.7

　　參照http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.Component

基本組件
xtype	Class	描述
button	Ext.button.Button	按鈕
buttongroup	Ext.container.ButtonGroup	編組按鈕
splitbutton	Ext.button.Split	帶下拉菜單的按鈕
cycle	Ext.button.Cycle	帶下拉選項菜單的按鈕，一個SplitButton的實用子類，用於在多個item之間切換狀態
slider	Ext.slider.Single	滑動條
multislider	Ext.slider.Multi
progressbar	Ext.ProgressBar	進度條
statusbar	Ext.ux.statusbar.StatusBar	狀態條
colorpicker	Ext.picker.Color	調色板
datepicker	Ext.picker.Date	日期選擇面板

 

容器及數據類組件
xtype	Class	描述
viewport	Ext.container.ViewPort	視口，視覺窗口，即瀏覽器的顯示區域
window	Ext.window.Window	窗口
component	Ext.Component	組件
container	Ext.container.Container	容器
panel	Ext.panel.Panel	面板
tabpanel	Ext.tab.Panel	選項面板
treepanel	Ext.tree.Panel	樹型面板
flash	Ext.flash.Component	顯示 Flash 的組件
grid	Ext.grid.Panel	表格
editorgrid	Ext.grid.plugin.Editing	可編輯的表格
propertygrid	Ext.grid.PropertyGrid	屬性表格
editor	Ext.Editor	編輯器
dataview	Ext.view.View	數據顯示視圖
listview	Ext.ListView	列表視圖

 

工具欄組件（Toolbar components）
xtype	Class	描述
toolbar	Ext.toolbar.Toolbar	工具欄
tbfill	Ext.toolbar.Fill	工具欄填充區
tbitem	Ext.toolbar.Item	工具條項目
tbseparator	Ext.toolbar.Separator	工具欄分隔符
tbspacer	Ext.toolbar.Spacer	工具欄空白
tbtext	Ext.toolbar.TextItem	工具欄文本項
pagingtoolbar	Ext.toolbar.Paging	分頁工具條，工具欄中的間隔

 

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

 

表單及表單域組件（Form components）
xtype	Class	描述
form	Ext.form.Panel	表單面板
checkbox	Ext.form.field.Checkbox	複選框
combo	Ext.form.field.ComboBox	下拉框
datefield	Ext.form.field.Date	日期選擇項
timefield	Ext.form.field.Time	時間錄入項
field	Ext.form.field.Base	表單字段
fieldset	Ext.form.FieldSet	表單字段組
hidden	Ext.form.field.Hidden	表單隱藏域
htmleditor	Ext.form.field.HtmlEditor	HTML編輯器
numberfield	Ext.form.field.Number	數字編輯器
label	Ext.form.Label	標籤
radio	Ext.form.field.Radio	單選按鈕
radiogroup	Ext.form.RadioGroup	編組的單選按鈕
textarea	Ext.form.field.TextArea	區域文本框
textfield	Ext.form.field.Text	表單文本框
trigger	Ext.form.field.Trigger	觸發錄入項
checkboxgroup	Ext.form.CheckboxGroup	編組的多選框
displayfield	Ext.form.field.DisplayField	僅顯示，不校驗/不被提交的文本框

 

圖表組件（Chart components）
xtype	Class	描述
chart	Ext.chart.Chart	圖表組件
barchart	Ext.chart.series.Bar	柱狀圖
columnchart	Ext.chart.series.Column
linechart	Ext.chart.series.Line	連線圖
piechart	Ext.chart.series.Pie	扇形圖
cartsianchart	Ext.chart.series.Cartesian

 

數據集Store
xtype	Class	描述
store	Ext.data.Store	數據存儲器
jsonstore	Ext.data.JsonStore	json
xmlstore	Ext.data.XmlStore	xml
arraystore	Ext.data.ArrayStore	array
directstore	Ext.data.DirectStore