ExtJS的应用界面是由很多小部件组合而成的,这些小部件被称作“组件(Component)”,所有组件都是Ext.Component的子类,Ext.Component提供了生命周期管理包括初始化、渲染、大小和尺寸管理、销毁等功能,这使得所有Ext.Component的子类都自动分享了这些能力。ExtJS提供了各式各样丰富的组件,每一个组件都很容易被扩展创建成自定义组件。
每个组件都有一个代称叫做xtype,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。
大的应用中,由于使用的方式有些组件可能根本没有被用到(比如有100个页面的应用,一个用户登录进来只操作了两个页面,这时把其他98个页面的组件全部初始化是不合理的),例如一个用到TabPanel的应用,TabPanel的每个tab只当用户点击它的时候再渲染即可。这就是引入xtype机制的原因,有了xtype可以让一个容器的子组件事先定义好,到真正需要的时候再初始化。
本xtype属性表基于ExtJS-4.0.7
参照http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.Component
基本组件 | ||
xtype | Class | 描述 |
button | Ext.button.Button | 按钮 |
buttongroup | Ext.container.ButtonGroup | 编组按钮 |
splitbutton | Ext.button.Split | 带下拉菜单的按钮 |
cycle | Ext.button.Cycle | 带下拉选项菜单的按钮,一个SplitButton的实用子类,用于在多个item之间切换状态 |
slider | Ext.slider.Single | 滑动条 |
multislider | Ext.slider.Multi | |
progressbar | Ext.ProgressBar | 进度条 |
statusbar | Ext.ux.statusbar.StatusBar | 状态条 |
colorpicker | Ext.picker.Color | 调色板 |
datepicker | Ext.picker.Date | 日期选择面板 |
容器及数据类组件 | ||
xtype | Class | 描述 |
viewport | Ext.container.ViewPort | 视口,视觉窗口,即浏览器的显示区域 |
window | Ext.window.Window | 窗口 |
component | Ext.Component | 组件 |
container | Ext.container.Container | 容器 |
panel | Ext.panel.Panel | 面板 |
tabpanel | Ext.tab.Panel | 选项面板 |
treepanel | Ext.tree.Panel | 树型面板 |
flash | Ext.flash.Component | 显示Flash的组件 |
grid | Ext.grid.Panel | 表格 |
editorgrid | Ext.grid.plugin.Editing | 可编辑的表格 |
propertygrid | Ext.grid.PropertyGrid | 属性表格 |
editor | Ext.Editor | 编辑器 |
dataview | Ext.view.View | 数据显示视图 |
listview | Ext.ListView | 列表视图 |
工具栏组件(Toolbarcomponents) | ||
xtype | Class | 描述 |
toolbar | Ext.toolbar.Toolbar | 工具栏 |
tbfill | Ext.toolbar.Fill | 工具栏填充区 |
tbitem | Ext.toolbar.Item | 工具条项目 |
tbseparator | Ext.toolbar.Separator | 工具栏分隔符 |
tbspacer | Ext.toolbar.Spacer | 工具栏空白 |
tbtext | Ext.toolbar.TextItem | 工具栏文本项 |
pagingtoolbar | Ext.toolbar.Paging | 分页工具条,工具栏中的间隔 |
菜单组件(Menucomponents) | ||
xtype | Class | 描述 |
menu | Ext.menu.Menu | 菜单 |
menucheckitem | Ext.menu.CheckItem | 选项菜单项 |
menuitem | Ext.menu.Item | 菜单项 |
menuseparator | Ext.menu.Separator | 菜单分隔线 |
colormenu | Ext.menu.ColorMenu | 颜色选择菜单 |
datemenu | Ext.menu.DateMenu | 日期选择菜单 |
menubaseitem | BaseItem |
表单及表单域组件(Formcomponents) | ||
xtype | Class | 描述 |
form | Ext.form.Panel | 表单面板 |
checkbox | Ext.form.field.Checkbox | 复选框 |
combo | Ext.form.field.ComboBox | 下拉框 |
datefield | Ext.form.field.Date | 日期选择项 |
timefield | Ext.form.field.Time | 时间录入项 |
field | Ext.form.field.Base | 表单字段 |
fieldset | Ext.form.FieldSet | 表单字段组 |
hidden | Ext.form.field.Hidden | 表单隐藏域 |
htmleditor | Ext.form.field.HtmlEditor | HTML编辑器 |
numberfield | Ext.form.field.Number | 数字编辑器 |
label | Ext.form.Label | 标签 |
radio | Ext.form.field.Radio | 单选按钮 |
radiogroup | Ext.form.RadioGroup | 编组的单选按钮 |
textarea | Ext.form.field.TextArea | 区域文本框 |
textfield | Ext.form.field.Text | 表单文本框 |
trigger | Ext.form.field.Trigger | 触发录入项 |
checkboxgroup | Ext.form.CheckboxGroup | 编组的多选框 |
displayfield | Ext.form.field.DisplayField | 仅显示,不校验/不被提交的文本框 |
图表组件(Chartcomponents) | ||
xtype | Class | 描述 |
chart | Ext.chart.Chart | 图表组件 |
barchart | Ext.chart.series.Bar | 柱状图 |
columnchart | Ext.chart.series.Column | |
linechart | Ext.chart.series.Line | 连线图 |
piechart | Ext.chart.series.Pie | 扇形图 |
cartsianchart | Ext.chart.series.Cartesian |
数据集Store | ||
xtype | Class | 描述 |
store | Ext.data.Store | 数据存储器 |
jsonstore | Ext.data.JsonStore | json |
xmlstore | Ext.data.XmlStore | xml |
arraystore | Ext.data.ArrayStore | array |
directstore | Ext.data.DirectStore |