extjs xtype的使用
类别:Web前端 浏览量:18211
时间:2013-9-27 extjs xtype的使用
extjs xtype的使用
我们在使用 ExtJs 创建组件时最容易理解的当然是用
new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120});
我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件,比如在面板的 items 属性中,尤其是多个组件或需要写许多的 ExtJs 相关代码时就更值得推荐。
两种形式的写法如下:
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:'passwd', inputType:'password', width:120},
{xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}
]
下面介绍下ExtJs xtype 与 组件 的一一对应关系
基本组件: | ||
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 | 盒子组件,相当于一个 <li> |
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 Border边框布局
- Extjs中FieldSet的收缩和展开
- extjs XTemplate的实例
- extjs radiogroup赋值和取值
- extjs中treepanel例子
- Extjs msgTarget 提示位置
- extjs中apply和applyIf的用法
- extjs column列布局
- extjs实现树形下拉框
- ExtJs中怎么上传文件
- extjs card卡片式布局
- Extjs menu菜单的简单用法
- extjs table布局
- Extjs updateProgress进度条的应用
- extjs checkboxGroup 复选框的用法
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
热门推荐
- dedecms无缩略图怎么设置(DEDECMS转移data目录后 验证码不显示解决办法)
- sqlserver数据类型和长度(SqlServer 数据库 三大 范式)
- LocalStorage用法
- python列表中的数组(Python3.4学习笔记之列表、数组操作示例)
- html5复制修改(HTML5实现无刷新修改URL的方法)
- web服务器架构(常用的WEB服务器简介)
- sql表更新关联语句(SQL update 多表关联更新的实现代码)
- python导出数据到mysql(python定时按日期备份MySQL数据并压缩)
- 以双斜杠//开头的URL的含义
- js解除网页屏蔽(js检测标题与描述中的关键词发现就替换或跳转到别的页面)