ExtJS xtype class对照表

[转]ExtJs中可用的xtype

Posted on 2009-04-16 16:36 巴斯光年 阅读(714) 评论(0)  编辑 收藏 所属分类: JS, ExtJS  

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