自定义组件在定义的时候可以通过xtype配置为组件指定xtype短名称,此后创建对象可以通过xtype来创建自定义对象了,示例代码如下:

Ext.define('MyApp.PressMeButton', {
extend: 'Ext.button.Button',
xtype: 'pressmebutton',//指定自定义组件的xtype
text: 'Press Me'
});
基本组件:
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 盒子组件,相当于一个 <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  

另外:关于 ExtJs 如何依据 xtype 创建对应组件这里只简单的说一句,ExtJs 的组件是通过 Ext.ComponentMgr 来管理的,组件类会以 xtype 为 key 注册到 ComponentMgr 中,用 xtype 形式时就通过 ComponentMgr 来创建 xtype 对应的组件。ComponentMgr 如何对组件进行管理下面会进一步深入探究。

假如想要获得 xtype 与组件最完整的列表,有两种办法:

1. ExtJs 运行后,遍历 ComponentMgr 的 types{} 哈稀属性,这个属性是私有的,需改源代使之为公有,存储结构为{button:Ext.Button, cycle:Ext.CycleButton}

2. 用 grep 从 ExtJs 源代码中搜寻出来。在组件的 JS 代码(如 Button.js) 中会用 Ext.reg('button', Ext.Button) 形式注册,所以下面我用移植到 Windows 上的 GNU grep 程序从源代码中扒出所有的 xtype 及对应的组件类来。

from:http://wxg6203.iteye.com/blog/688656

ExtJs xtype类型介绍的更多相关文章

  1. ExtJS 4.2 介绍

    本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...

  2. [转]ExtJs:xtype的含义

    原文地址:http://www.cnblogs.com/timy/archive/2010/08/13/1799111.html 根据我在EXT论坛上的观察,xtype用起来的时候疑惑会比较多.甚至有 ...

  3. HTTP协议的8种请求类型介绍

    HTTP协议的8种请求类型介绍 转自:http://www.cnblogs.com/liangxiaofeng/p/5798607.html HTTP协议的8种请求类型介绍 HTTP协议中共定义了八种 ...

  4. Linux文件类型介绍

    文件类型介绍: Linux系统不同于Windows系统,两者文件类型和文件扩展名也有很大的差异.Linux中的文件类型和Linux文件的文件扩展名所代表的意义和Windows系统完全不同.用户一般通过 ...

  5. Solidity教程系列1 - 类型介绍

    现在的Solidity中文文档,要么翻译的太烂,要么太旧,决定重新翻译下,再加上代码事例讲解. 写在前面 Solidity是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解, 如果 ...

  6. 智能合约语言Solidity教程系列2 - 地址类型介绍

    智能合约语言Solidity教程系列第二篇 - Solidity地址类型介绍. 写在前面 Solidity是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你 ...

  7. 智能合约语言 Solidity 教程系列2 - 地址类型介绍

    Solidity教程系列第二篇 - Solidity地址类型介绍. 写在前面 Solidity是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你先看以太坊是 ...

  8. Python的基本类型介绍和可变不可变

    Python的基本类型介绍 前言 做python有一段时间了,从工作开始就在不断地学习和积累.但是有时候用到一些技术点,甚至是基础知识的时候,总是会遗忘.所以,从今天开始,就在这里记录下来,不仅可以分 ...

  9. loadrunner脚本优化-ParameterList参数类型介绍

    脚本优化-Parameter List参数类型介绍 by:授客 QQ:1033553122 篇幅问题,这里采用网盘下载的方式和大家分享: 百度网盘分享: 链接: http://pan.baidu.co ...

随机推荐

  1. asp.net 性能优化

    在MSDN网络课堂中下载了一些九月份的网络讲座.有很多还是很有意义的.<ASP.NET系列讲座之一:性能与缓存>是由微软开发工具专家王立楠讲授.王先生的讲解非常清晰,课件也很详细,虽然是网 ...

  2. 第四章 电商云化,4.1 17.5W秒级交易峰值下的混合云弹性架构之路(作者:唐三 乐竹 锐晟 潇谦)

    4.1 17.5W秒级交易峰值下的混合云弹性架构之路 前言 每年的双11都是一个全球狂欢的节日,随着每年交易逐年创造奇迹的背后,按照传统的方式,我们的成本也在逐年上升.双11当天的秒级交易峰值平时的近 ...

  3. 10月14日下午MySQL数据库基础

    数据库基础 类型: 1.varchar:字符串,用于姓名班级,地址等,地址一般长50,姓名长20 2.int:整数,用于成绩,序号等 3.float:小数 4.bit:布尔型,用于性别等 5.时间也用 ...

  4. Autofac.Integration.Mvc分析

    Autofac.Integration.Mvc static ILifetimeScope LifetimeScope { get { return (ILifetimeScope)HttpConte ...

  5. Nginx 支持 WAF 防护功能实战

    WAF(Web Application Firewall),中文名称叫做“Web应用防火墙 WAF的定义是这样的:Web应用防火墙是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提 ...

  6. .net3.5后新增的 BeginInvoke EndInvoke 异步操作

    protected void Main() { //首先定义一个方法的封装..后边的LongTimeMethod是被封装的方法.. Func<int> longTimeAction = n ...

  7. Jquery中$.load(),$.get(),$.post(),$.ajax(),$.getJSON()的作用与不同

    这个五个都是获取页面或者数据的方法.. 都是基于Ajax协议的..   $.get(url,[data],[callback])     //描述: 从服务器加载数据,请求方式为GET.  url   ...

  8. Loader Generator---loading图片生成器

    if(公司配有专业的设计师) return; Recommend("http://loadergenerator.com/");

  9. vi和vim区别及命令详解

    vi和vim都是Linux中的编辑器,不同的是vim比较高级,可以视为vi的升级版本.vi使用于文本编辑,但是vim更适用于coding.     现将vim的命令行收集于下: vi有3个模式:插入模 ...

  10. 使用BeanNameAutoProxyCreator实现spring的自动代理

    提到代理,我们可以使用ProxyBeanFactory,并配置proxyInterfaces,target和interceptorNames实现,但如果需要代理的bean很多,无疑会对spring配置 ...