ExtJs中xtype与组件类的对应表

 xtype            Class

 
-------------    ------------------
 
box              Ext.BoxComponent 具有边框属性的组件
 
button           Ext.Button  按钮
 
colorpalette     Ext.ColorPalette 调色板
 
component        Ext.Component 组件
 
container        Ext.Container 容器
 
cycle            Ext.CycleButton 
 
dataview         Ext.DataView 数据显示视图
 
datepicker       Ext.DatePicker 日期选择面板
 
editor           Ext.Editor 编辑器
 
editorgrid       Ext.grid.EditorGridPanel 可编辑的表格 
 
grid             Ext.grid.GridPanel 表格
 
paging           Ext.PagingToolbar 工具栏中的间隔
 
panel            Ext.Panel 面板
 
progress         Ext.ProgressBar 进度条
 
splitbutton      Ext.SplitButton 可分裂的按钮
 
tabpanel         Ext.TabPanel 选项面板
 
treepanel        Ext.tree.TreePanel 树
 
viewport         Ext.ViewPort 视图
 
window           Ext.Window 窗口
 
工具栏组件有
 
---------------------------------------
 
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 工具栏文本项
 
表单及字段组件包含:
 
--------------  -----------------------
 
form             Ext.FormPanel Form面板 
 
checkbox         Ext.form.Checkbox checkbox录入框
 
combo            Ext.form.ComboBox combo选择项
 
datefield        Ext.form.DateField 日期选择项
 
field            Ext.form.Field 表单字段
 
fieldset         Ext.form.FieldSet 表单字段组
 
hidden           Ext.form.Hidden 表单隐藏域
 
htmleditor       Ext.form.HtmlEditor html编辑器
 
numberfield      Ext.form.NumberField 数字编辑器
 
radio            Ext.form.Radio 单选按钮
 
textarea         Ext.form.TextArea 区域文本框
 
textfield        Ext.form.TextField 表单文本框
 
timefield        Ext.form.TimeField 时间录入项
 
trigger          Ext.form.TriggerField 触发录入项
 
---------------------------------------
 
ExtJS xtype class对照表
 
xtype                  Class            
 
---------------------------------------
基本组件:                                                                 
 
box                    Ext.BoxComponent                      具有边框属性的组件
 
button                Ext.Button                                      按钮
 
colorpalette      Ext.ColorPalette                            调色板
 
component       Ext.Component                            组件
 
container          Ext.Container                                容器
 
cycle                 Ext.CycleButton
 
dataview          Ext.DataView                                数据显示视图
 
datepicker       Ext.DatePicker                              日期选择面板
 
editor                Ext.Editor                                       编辑器
 
editorgrid         Ext.grid.EditorGridPanel              可编辑的表格
 
grid                   Ext.grid.GridPanel                         表格
 
paging              Ext.PagingToolbar                         工具栏中的间隔
 
panel                Ext.Panel                                        面板
 
progress          Ext.ProgressBar                            进度条
 
splitbutton        Ext.SplitButton                               可分裂的按钮
 
tabpanel           Ext.TabPanel                                 选项面板
 
treepanel         Ext.tree.TreePanel                         树
 
viewport           Ext.ViewPort                                  视图
 
window             Ext.Window                                   窗口
 
---------------------------------------
工具栏组件:
 
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                     工具栏文本项
 
---------------------------------------
表单及字段组件:
 
form                  Ext.FormPanel Form                     面板
 
checkbox         Ext.form.Checkbox checkbox       录入框
 
combo             Ext.form.ComboBox combo         选择项
 
datefield          Ext.form.DateField                        日期选择项
 
field                  Ext.form.Field                                 表单字段
 
fieldset            Ext.form.FieldSet                           表单字段组
 
hidden             Ext.form.Hidden                             表单隐藏域
 
htmleditor        Ext.form.HtmlEditor html               编辑器
 
numberfield     Ext.form.NumberField                   数字编辑器
 
radio                Ext.form.Radio                               单选按钮
 
textarea           Ext.form.TextArea                          区域文本框
 
textfield            Ext.form.TextField                          表单文本框
 
timefield           Ext.form.TimeField                         时间录入项
 
trigger              Ext.form.TriggerField                      触发录入项
 
---------------------------------------
基本组件:
 
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 及对应的组件类来。

你可能感兴趣的:(JavaScript,ExtJs)