可以直接用xtype(比如TextFiled对应的xtype是textfield)的对象形式来创建组件,比如在面板的items属性中,尤其是多个组件或需要写许多的extljs相关代码时就更值得推荐
两种形式写法如下:
items[
new Ext.form.TextField({fieldLabel:'姓名',id:'name',width:120}),
new Ext.form.TextField({fieldLabel:'密码', id:'passwd', inputType:'password', width:120}),
new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})
]
//替换成用xtype写法就如下(似乎只是免去了很多的new...)
items[
{xtype:'textfield',fieldLabel:'姓名',id:'name',width:120},
{xtype:'textfield',fieldLabel:'密码',id:'passwod',inputType:'password',width:120},
{xtype:'datefield',fieldLabel:'生日',id:'birth',format:'Y年m月d日',width:120}
]
基本组件 | ||
---|---|---|
xtype | class | 描述 |
button | Ext.Button | 按钮 |
splitbutton | Ext.SplitButton | 带下拉菜单的按钮 |
cycle | Ext.CycleButton | 带下拉选项菜单的按钮 |
buttongroup | Ext.ButtonGroup | 编组按钮 |
slider | Ext.Slider | 滑动条 |
progress | Ext.progressBar | 进度条 |
statusbar | Ext.StatusBar | 状态条 |
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的组件 |
grid | Ext.grid.GridPanel | 表格 |
editorgird | Ext.grid.EditorGridPanel | 可编辑的表格 |
prototypegrid | Ext.grid.PrototypeGrid | 属性表格 |
editor | Ext.Editor | 编辑器 |
dataview | Ext.DataView | 数据显示视图 |
listview | Ext.ListView | 列表视图 |
工具栏组件:
xtype | class | 描述 |
paging | Ext.PagingToolbar | 分页工具条 |
toolbar | Ext.Toobar | 工具栏 |
tbbutton | Ext.Toolbar.Button | 工具栏按钮 |
tbfill | Ext.Toolbar.Fill | 工具栏填充区 |
tbitem | Ext.Toolbar.Item | 工具条项目 |
tbsepatator | 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 | 颜色选择菜单 |
datamenu | 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.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 | 标签 |
numnerfiled | Ext.form.NumberField | 数字编辑器 |
radio | Ext.form.Radio | 单选按钮 |
textarea | Ext.form.TextArea | 多行文本框 |
textfield | Ext.form.TextField | 表单文本框 |
trigger | Ext.form.TriggerField | 触发录入项 |
checkboxgroup | Ext.form.CheckboxGroup | 编组的多选框 |
displayfield | Ext.form.DisplayField | 仅显示。不校验 |
radiogroup | Ext.form.RadioGroup | 编组的单选按钮 |
图表组件:
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.DirecStore | |
groupingstore | Ext.data.GroupingStore | |
jsonstore | Ext.data.JsonStore | |
simplestore | Ext.data.SimpleStore | |
store | Ext.data.Store | |
xmlstore | Ext.data.XmlStore |