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 |
列表视图 |
| 工具栏组件(Toolbar components) |
||
| 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 |
分页工具条,工具栏中的间隔 |
| 菜单组件(Menu components) |
||
| 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 |
|
| 表单及表单域组件(Form components) |
||
| 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 |
仅显示,不校验/不被提交的文本框 |
| 图表组件(Chart components) |
||
| 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 |
|
