ExtJs-xtype创建组件
来源:互联网 发布:淘宝网秋装新款毛衣 编辑:程序博客网 时间:2024/06/08 00:21
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 ...)...{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 描述 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
阅读全文
0 0
- ExtJs-xtype创建组件
- Extjs 组件xtype
- ExtJS 6.x 组件xtype一览
- Extjs xtype
- ExtJs Xtype
- Extjs xtype
- extJs xtype
- Extjs xtype
- ExtJs xtype
- ExtJS-xtype
- ExtJs 中 xtype 与组件类的对应表
- ExtJs 中 xtype 与组件类的对应表
- EXTJS使用XType来定义组件及使用方法
- extjs中的xtype
- ExtJS的xtype列表
- extjs中xtype类型
- ExtJS中的xtype类型
- extjs xtype 一览表
- Java中的值传递和引用传递
- 什么是Java语言
- The partial sum problem
- MFC 获得各类指针、句柄的方法
- 深入浅出 消息队列 ActiveMQ
- ExtJs-xtype创建组件
- 在JS 中使用 fetch 初体验
- Redis多机多节点集群实验
- mysql基础语法
- bzoj 4397: [Usaco2015 dec]Breed Counting 前缀和/线段树
- FANUC 机器人文件备份
- [js]01js基础入门
- js小数转换百分数并保留两位小数
- Linux如何创建用户并配置FTP权限