ExtJs 中 xtype 与组件类的对应表

原文地址：http://blog.sina.com.cn/s/blog_514ae3fd0100i36p.html

核心提示：我们在使用 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 相关代码时就更值得推荐。我们来对照如下形式就知道了：

1. items[    
2.   
3. new Ext.form.TextField({fieldLabel:'姓名', id:'name', width:120}),    
4.       
5. new Ext.form.TextField({fieldLabel:'密码', id:'passwd', inputType:'password', width:120}),    
6.       
7. new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})    
8. ]    
9. //替换成用 xtype 写法就如下(似乎只是免去了很多的 new ...)    
10. items[    
11.        
12. {xtype:'textfield', fieldLabel:'姓名', id:'name', width:120},    
13.      
14. {xtype:'textfield', fieldLabel:'密码', id:'passwd', inputType:'password', width:120},    
15.       
16. {xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}    
17. ]  

写 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 及对应的组件类来。

核心代码中的 xtype 组件

E:\Study ExtJS>grep -do Ext.reg\(' extjs3.0\src\*.js
extjs3.0\src\widgets\BoxComponent.js:Ext.reg('box', Ext.BoxComponent);
extjs3.0\src\widgets\BoxComponent.js  Ext.reg('spacer', Ext.Spacer);
extjs3.0\src\widgets\Button.js:Ext.reg('button', Ext.Button);
extjs3.0\src\widgets\ButtonGroup.js:Ext.reg('buttongroup', Ext.ButtonGroup);
extjs3.0\src\widgets\ColorPalette.js:Ext.reg('colorpalette', Ext.ColorPalette);
extjs3.0\src\widgets\Component.js:Ext.reg('component', Ext.Component);
extjs3.0\src\widgets\Container.js:Ext.reg('container', Ext.Container);
extjs3.0\src\widgets\CycleButton.js:Ext.reg('cycle', Ext.CycleButton);
extjs3.0\src\widgets\DataView.js:Ext.reg('dataview', Ext.DataView);
extjs3.0\src\widgets\DatePicker.js:Ext.reg('datepicker', Ext.DatePicker);
extjs3.0\src\widgets\Editor.js:Ext.reg('editor', Ext.Editor);
extjs3.0\src\widgets\PagingToolbar.js:Ext.reg('paging', Ext.PagingToolbar);
extjs3.0\src\widgets\Panel.js:Ext.reg('panel', Ext.Panel);
extjs3.0\src\widgets\ProgressBar.js:Ext.reg('progress', Ext.ProgressBar);
extjs3.0\src\widgets\Slider.js:Ext.reg('slider', Ext.Slider);
extjs3.0\src\widgets\SplitButton.js:Ext.reg('splitbutton', Ext.SplitButton);
extjs3.0\src\widgets\TabPanel.js:Ext.reg('tabpanel', Ext.TabPanel);
extjs3.0\src\widgets\Toolbar.js:Ext.reg('toolbar', Ext.Toolbar);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbitem', T.Item);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbseparator', T.Separator);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbspacer', T.Spacer);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbfill', T.Fill);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbtext', T.TextItem);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbbutton', T.Button);
extjs3.0\src\widgets\Toolbar.js  Ext.reg('tbsplit', T.SplitButton);
extjs3.0\src\widgets\Viewport.js:Ext.reg('viewport', Ext.Viewport);
extjs3.0\src\widgets\Window.js:Ext.reg('window', Ext.Window);
extjs3.0\src\widgets\tree\TreePanel.js:Ext.reg('treepanel', Ext.tree.TreePanel);
extjs3.0\src\widgets\menu\BaseItem.js:Ext.reg('menubaseitem', Ext.menu.BaseItem);
extjs3.0\src\widgets\menu\CheckItem.js:Ext.reg('menucheckitem', Ext.menu.CheckItem);
extjs3.0\src\widgets\menu\ColorMenu.js:Ext.reg('colormenu', Ext.menu.ColorMenu);
extjs3.0\src\widgets\menu\DateMenu.js: Ext.reg('datemenu', Ext.menu.DateMenu);
extjs3.0\src\widgets\menu\Item.js:Ext.reg('menuitem', Ext.menu.Item);
extjs3.0\src\widgets\menu\Menu.js:Ext.reg('menu', Ext.menu.Menu);
extjs3.0\src\widgets\menu\Separator.js:Ext.reg('menuseparator', Ext.menu.Separator);
extjs3.0\src\widgets\menu\TextItem.js:Ext.reg('menutextitem', Ext.menu.TextItem);
extjs3.0\src\widgets\list\ListView.js:Ext.reg('listview', Ext.ListView);
extjs3.0\src\widgets\grid\EditorGrid.js:Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
extjs3.0\src\widgets\grid\GridPanel.js:Ext.reg('grid', Ext.grid.GridPanel);
extjs3.0\src\widgets\form\Checkbox.js:Ext.reg('checkbox', Ext.form.Checkbox);
extjs3.0\src\widgets\form\CheckboxGroup.js:Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);
extjs3.0\src\widgets\form\Combo.js:Ext.reg('combo', Ext.form.ComboBox);
extjs3.0\src\widgets\form\DateField.js:Ext.reg('datefield', Ext.form.DateField);
extjs3.0\src\widgets\form\DisplayField.js:Ext.reg('displayfield', Ext.form.DisplayField);
extjs3.0\src\widgets\form\Field.js:Ext.reg('field', Ext.form.Field);
extjs3.0\src\widgets\form\FieldSet.js:Ext.reg('fieldset', Ext.form.FieldSet);
extjs3.0\src\widgets\form\Form.js:Ext.reg('form', Ext.FormPanel);
extjs3.0\src\widgets\form\Hidden.js:Ext.reg('hidden', Ext.form.Hidden);
extjs3.0\src\widgets\form\HtmlEditor.js:Ext.reg('htmleditor', Ext.form.HtmlEditor);
extjs3.0\src\widgets\form\Label.js:Ext.reg('label', Ext.form.Label);
extjs3.0\src\widgets\form\NumberField.js:Ext.reg('numberfield', Ext.form.NumberField);
extjs3.0\src\widgets\form\Radio.js:Ext.reg('radio', Ext.form.Radio);
extjs3.0\src\widgets\form\RadioGroup.js:Ext.reg('radiogroup', Ext.form.RadioGroup);
extjs3.0\src\widgets\form\TextArea.js:Ext.reg('textarea', Ext.form.TextArea);
extjs3.0\src\widgets\form\TextField.js:Ext.reg('textfield', Ext.form.TextField);
extjs3.0\src\widgets\form\TimeField.js:Ext.reg('timefield', Ext.form.TimeField);
extjs3.0\src\widgets\form\TriggerField.js:Ext.reg('trigger', Ext.form.TriggerField);
extjs3.0\src\widgets\chart\Chart.js:Ext.reg('chart', Ext.chart.Chart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('piechart', Ext.chart.PieChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('cartesianchart', Ext.chart.CartesianChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('linechart', Ext.chart.LineChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('columnchart', Ext.chart.ColumnChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('barchart', Ext.chart.BarChart);
extjs3.0\src\widgets\chart\Chart.js  Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);
extjs3.0\src\widgets\chart\FlashComponent.js:Ext.reg('flash', Ext.FlashComponent);
extjs3.0\src\data\ArrayStore.js:Ext.reg('arraystore', Ext.data.ArrayStore);
extjs3.0\src\data\ArrayStore.js  Ext.reg('simplestore', Ext.data.SimpleStore);
extjs3.0\src\data\DirectStore.js:Ext.reg('directstore', Ext.data.DirectStore);
extjs3.0\src\data\GroupingStore.js:Ext.reg('groupingstore', Ext.data.GroupingStore);
extjs3.0\src\data\JsonStore.js:Ext.reg('jsonstore', Ext.data.JsonStore);
extjs3.0\src\data\Store.js:Ext.reg('store', Ext.data.Store);
extjs3.0\src\data\XmlStore.js:Ext.reg('xmlstore', Ext.data.XmlStore);

example 中有如  Ext.ux 样的 xtype 组件

E:\Study ExtJS>grep -do Ext.reg\(' extjs3.0\examples\*.js
extjs3.0\examples\init.js:Ext.reg('samplespanel', Ext.samples.SamplePanel);
extjs3.0\examples\ux\ColumnNodeUI.js:Ext.reg('columntree', Ext.ux.tree.ColumnTree);
extjs3.0\examples\ux\FileUploadField.js:Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
extjs3.0\examples\ux\GMapPanel.js:Ext.reg('gmappanel', Ext.ux.GMapPanel);
extjs3.0\examples\ux\GroupTab.js:Ext.reg('grouptab', Ext.ux.GroupTab);
extjs3.0\examples\ux\GroupTabPanel.js:Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
extjs3.0\examples\ux\ItemSelector.js:Ext.reg('itemselector', Ext.ux.form.ItemSelector);
extjs3.0\examples\ux\MultiSelect.js:Ext.reg('multiselect', Ext.ux.form.MultiSelect);
extjs3.0\examples\ux\Portal.js:Ext.reg('portal', Ext.ux.Portal);
extjs3.0\examples\ux\PortalColumn.js:Ext.reg('portalcolumn', Ext.ux.PortalColumn);
extjs3.0\examples\ux\Portlet.js:Ext.reg('portlet', Ext.ux.Portlet);
extjs3.0\examples\ux\SelectBox.js:Ext.reg('selectbox', Ext.ux.form.SelectBox);
extjs3.0\examples\ux\SpinnerField.js:Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
extjs3.0\examples\ux\StatusBar.js:Ext.reg('statusbar', Ext.ux.StatusBar);
extjs3.0\examples\ux\ux-all-debug.js:Ext.reg('columntree', Ext.ux.tree.ColumnTree);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.ns('Ext.ux.grid');
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('grouptab', Ext.ux.GroupTab);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('itemselector', Ext.ux.form.ItemSelector);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('multiselect', Ext.ux.form.MultiSelect);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('portal', Ext.ux.Portal);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('portalcolumn', Ext.ux.PortalColumn);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('portlet', Ext.ux.Portlet);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('selectbox', Ext.ux.form.SelectBox);
extjs3.0\examples\ux\ux-all-debug.js  Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
extjs3.0\examples\ux\ux-all.js: grep: input lines truncated - result questionable
extjs3.0\examples\key-feed-viewer\FeedGrid.js:Ext.reg('appfeedgrid', FeedGrid);
extjs3.0\examples\key-feed-viewer\FeedPanel.js:Ext.reg('appfeedpanel', FeedPanel);
extjs3.0\examples\key-feed-viewer\MainPanel.js:Ext.reg('appmainpanel', MainPanel);
extjs3.0\examples\image-organizer\imgorg\AlbumsPanel.js:Ext.reg('img-albumspanel', Imgorg.AlbumsPanel);
extjs3.0\examples\image-organizer\imgorg\AlbumsPanel.js  Ext.reg('img-album', Imgorg.Album);
extjs3.0\examples\image-organizer\imgorg\AlbumTree.js:Ext.reg('img-albumtree', Imgorg.AlbumTree);
extjs3.0\examples\image-organizer\imgorg\DirectCombo.js:Ext.reg('img-tagcombo', Imgorg.TagCombo);
extjs3.0\examples\image-organizer\imgorg\DirectCombo.js  Ext.reg('img-tagmulticombo', Imgorg.TagMultiCombo);
extjs3.0\examples\image-organizer\imgorg\DirectCombo.js  Ext.reg('img-albumcombo', Imgorg.AlbumCombo);
extjs3.0\examples\image-organizer\imgorg\ImageDv.js:Ext.reg('img-dv', Imgorg.ImageDv);
extjs3.0\examples\image-organizer\imgorg\ImagePanel.js:Ext.reg('img-panel',Imgorg.ImagePanel);
extjs3.0\examples\image-organizer\imgorg\ImageThumbPanel.js:Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);
extjs3.0\examples\image-organizer\imgorg\MultiCombo.js:Ext.reg('multicombo', Ext.ux.MultiCombo);
extjs3.0\examples\image-organizer\imgorg\UploadQueue.js:Ext.reg('img-uploadqueue', Imgorg.UploadQueue);
extjs3.0\examples\grid\binding-with-classes.js:Ext.reg('bookgrid', App.BookGrid);
extjs3.0\examples\grid\binding-with-classes.js  Ext.reg('bookdetail', App.BookDetail);
extjs3.0\examples\grid\binding-with-classes.js  Ext.reg('bookmasterdetail', App.BookMasterDetail);
extjs3.0\examples\feed-viewer\FeedGrid.js:Ext.reg('appfeedgrid', FeedGrid);
extjs3.0\examples\feed-viewer\FeedPanel.js:Ext.reg('appfeedpanel', FeedPanel);
extjs3.0\examples\feed-viewer\MainPanel.js:Ext.reg('appmainpanel', MainPanel);