ExtJs xtype

xtype可做爲Ext控件的簡寫，都會對應一個Ext控件。固然這裏你也能夠自定義這個xtype，經過自定義的Ext控件來綁定，主要由Ext.reg方法去註冊xtype。

咱們在使用 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 與 組件 的一一對應關係

基本組件：
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