xtype可作為Ext控件的簡寫，都會對應一個Ext控件。當然這里你也可以自定義這個xtype，通過自定義的Ext控件來綁定，主要由Ext.reg方法去注冊xtype。Ext.all.js里面包含的xtype包含：

xtype??????????? Class
-------------??? ------------------
box????????????? {@link Ext.BoxComponent}
button?????????? {@link Ext.Button}
buttongroup????? {@link Ext.ButtonGroup}
colorpalette???? {@link Ext.ColorPalette}
component??????? {@link Ext.Component}
container??????? {@link Ext.Container}
cycle??????????? {@link Ext.CycleButton}
dataview???????? {@link Ext.DataView}
datepicker?????? {@link Ext.DatePicker}
editor?????????? {@link Ext.Editor}
editorgrid?????? {@link Ext.grid.EditorGridPanel}
flash??????????? {@link Ext.FlashComponent}
grid???????????? {@link Ext.grid.GridPanel}
listview???????? {@link Ext.ListView}
multislider????? {@link Ext.slider.MultiSlider}
panel??????????? {@link Ext.Panel}
progress???????? {@link Ext.ProgressBar}
propertygrid???? {@link Ext.grid.PropertyGrid}
slider?????????? {@link Ext.slider.SingleSlider}
spacer?????????? {@link Ext.Spacer}
splitbutton????? {@link Ext.SplitButton}
tabpanel???????? {@link Ext.TabPanel}
treepanel??????? {@link Ext.tree.TreePanel}
viewport???????? {@link Ext.ViewPort}
window?????????? {@link Ext.Window}

Toolbar components
---------------------------------------
paging?????????? {@link Ext.PagingToolbar}
toolbar????????? {@link Ext.Toolbar}
tbbutton???????? {@link Ext.Toolbar.Button}??????? (deprecated; use button)
tbfill?????????? {@link Ext.Toolbar.Fill}
tbitem?????????? {@link Ext.Toolbar.Item}
tbseparator????? {@link Ext.Toolbar.Separator}
tbspacer???????? {@link Ext.Toolbar.Spacer}
tbsplit????????? {@link Ext.Toolbar.SplitButton}?? (deprecated; use splitbutton)
tbtext?????????? {@link Ext.Toolbar.TextItem}

Menu components
---------------------------------------
menu???????????? {@link Ext.menu.Menu}
colormenu??????? {@link Ext.menu.ColorMenu}
datemenu???????? {@link Ext.menu.DateMenu}
menubaseitem???? {@link Ext.menu.BaseItem}
menucheckitem??? {@link Ext.menu.CheckItem}
menuitem???????? {@link Ext.menu.Item}
menuseparator??? {@link Ext.menu.Separator}
menutextitem???? {@link Ext.menu.TextItem}

Form components
---------------------------------------
form???????????? {@link Ext.form.FormPanel}
checkbox???????? {@link Ext.form.Checkbox}
checkboxgroup??? {@link Ext.form.CheckboxGroup}
combo??????????? {@link Ext.form.ComboBox}
compositefield?? {@link Ext.form.CompositeField}
datefield??????? {@link Ext.form.DateField}
displayfield???? {@link Ext.form.DisplayField}
field??????????? {@link Ext.form.Field}
fieldset???????? {@link Ext.form.FieldSet}
hidden?????????? {@link Ext.form.Hidden}
htmleditor?????? {@link Ext.form.HtmlEditor}
label??????????? {@link Ext.form.Label}
numberfield????? {@link Ext.form.NumberField}
radio??????????? {@link Ext.form.Radio}
radiogroup?????? {@link Ext.form.RadioGroup}
textarea???????? {@link Ext.form.TextArea}
textfield??????? {@link Ext.form.TextField}
timefield??????? {@link Ext.form.TimeField}
trigger????????? {@link Ext.form.TriggerField}

Chart components
---------------------------------------
chart??????????? {@link Ext.chart.Chart}
barchart???????? {@link Ext.chart.BarChart}
cartesianchart?? {@link Ext.chart.CartesianChart}
columnchart????? {@link Ext.chart.ColumnChart}
linechart??????? {@link Ext.chart.LineChart}
piechart???????? {@link Ext.chart.PieChart}

Store xtypes
---------------------------------------
arraystore?????? {@link Ext.data.ArrayStore}
directstore????? {@link Ext.data.DirectStore}
groupingstore??? {@link Ext.data.GroupingStore}
jsonstore??????? {@link Ext.data.JsonStore}
simplestore????? {@link Ext.data.SimpleStore}????? (deprecated; use arraystore)
store??????????? {@link Ext.data.Store}
xmlstore???????? {@link Ext.data.XmlStore}

這里舉一個例子：

實際上：

代碼 var?panel?=?new?Ext.Panel({?
????buttonAlign:?'left',?
????width:?300,?
????renderTo:?'panel',?
????title:?"目錄",?
????buttons:?[?
????????????????new?Ext.Button({?text:?'Text1'?}),?
????????????????new?Ext.Button({?text:?'Text2'?})?
????????????]?
});

與

代碼 var?panel?=?new?Ext.Panel({?
????buttonAlign:?'left',?
????width:?300,?
????renderTo:?'panel',?
????title:?"目錄",?
????buttons:?[?
????????????????{?xtype:?'button',?text:?'Text1'?},?
????????????????{?xtype:?'button',?text:?'Text2'?}?
????????????]?
});

是等效的。

Html代碼為

<div?id=”panel”></div>

從這里就可以看出端倪。

轉載于:https://www.cnblogs.com/liping13599168/archive/2011/01/12/1929393.html

總結

以上是生活随笔為你收集整理的ExtJs实践（3）——xtype名称与控件对应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。