ExtJs:xtype的含义
转自:http://www.cnblogs.com/timy/archive/2010/08/13/1799111.html
ExtJs:xtype的含义
根据我在EXT论坛上的观察,xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。
定义
xtype就是一个代表类(Class)的标识名字。
譬如,你有这个类,名字是Ext.ux.MyGrid
。正常情况下你需要用这个名字来实例化这个类(创建类的对象)。
除了类名外,你还可以这样登记类的xtype:
Ext.reg('mygrid', Ext.ux.MyGrid);
其中xtype是mygrid
而类名的一般形式是Ext.ux.MyGrid
。上面的语句登记了新的xtype,换种说法说,xtype mygrid
与类 Ext.ux.MyGrid
是连在一起的。
到底有什么好处?
试想一下,你手头上的是一个大型的项目,为了响应用户的操作,程序里面包含者大量的对象(windows、forms、grids)。用户点击图标或按钮,就会新建一个窗体,窗体里面又有grid,最终在屏幕上渲染出来。
嗯,我们回到Ext2.x之前的编码,那时候我们实例化所有对象是页面第一次加载后就进行的(程序代码第一次的运行)。在客户端内存中,Ext.ux.MyGrid
类的对象已经存在,等待用户的点击。同样是这个grid,假设你上百个的实例,...是多么浪费宝贵的资源啊!很多grid其实用户未必会点击让它出现。
延时实例化
如果你使用xtype,那么在代码中的仅仅是一个用于配置的对象,像:
{xtype:'mygrid", border:false, width:600, height:400, ...}
消耗没有实例对象来得大。
嗯,用户点击按钮或图标会怎么样呢?Ext会辨认出它是一个准备要渲染的grid但不立刻实例化,Ext在ComponentMgr的帮忙下明白这么一回事:“如果我要实例化xtype mygrid
的对象,我就知道要创建的实际是类Ext.ux.MyGrid
的对象”。即如下列代码:
create : function(config, defaultType){return new types[config.xtype || defaultType](config);
}
等价于:
return new Ext.ux.MyGrid(config);
然后实例化grid,进行渲染和显示。谨记:需要的时候才实例化。
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 | 盒子组件,相当于一个 <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 xtype的使用
xtype可作为Ext控件的简写,都会对应一个Ext控件.当然这里你也可以自定义这个xtype,通过自定义的Ext控件来绑定,主要由Ext.reg方法去注册xtype. 我们还可以直接用 xtype( ...
- ExtJS xtype class对照表
[转]ExtJs中可用的xtype Posted on 2009-04-16 16:36 巴斯光年 阅读(714) 评论(0) 编辑 收藏 所属分类: JS, ExtJS xtype ...
- ExtJs xtype一览
基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...
- extjs xtype 类型
xtype Class 基本组件: box Ext.BoxComponent 具有边框 ...
- SQLserver删除某数据库中所有表 方法 二
方便删除数据库中所有的数据表,清空数据库,有些有约束,不能直接delete,需要先删除库中的约束,代码如下: --删除所有约束DECLARE c1 cursor for select 'alter t ...
- mysql 删除表记录的 存储过程命令_用SQL语句删除一个数据库的所有表和所有存储过程...
如果数据库里有很多表和存储过程,要用手动鼠标右键一个个删除是很麻烦的,用SQL语句来删除就方便很多了 删除所有的表: 如果由于外键约束删除table失败,则先删除所有约束: --/第1步******* ...
- ExtJS4.2学习(11)——高级组件之Grid
大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...
- 日期 html 布局,datepicker
android 的DatePicker怎么取出 年月日的值 这是一个Android原生的控件,一个日期控件,如你所说,有年月日 第一步: 获取DatePicker的控件 DatePicker mDat ...
- ExtJs中的xtype
论坛很多人都在谈论ExtJs的内存泄露的问题,可是我发现在ExtJs官方论坛上这样的讨论很少,不明白其中原因.今天偶然的点击的spket的extension生成模板,注意到了官方推荐的自定义组件的开发 ...
最新文章
- python怎么读文件后删去空格以行为单位进行排序-文件操作
- java access dbq_Java-Access汇总
- 并发和并行的区别简单介绍
- NLP实战-中文命名实体识别
- 目标检测用在《人脸识别》
- Unsupported major.minor version 51.0 jdk版本错误解决方案 eclipse版
- 视觉SLAM——2D-2D:对极几何
- Python中tkinter.filedialog
- OneProxy实现mysql读写分离
- python爬取豆瓣电影top250网络响应_python使用requests+re爬取豆瓣电影top250简单入门爬虫...
- git 工作区、暂存区、版本库(本地)、远程版本库区别
- PHP微信公众号开发之:获得和缓存access_token,原理及代码
- C语言深度剖析——关键字sizeof、整型数据存储深入、数据类型取值范围深入
- vsomeip源码梳理 -- Event订阅流程
- 仿淘宝上拉进入详情页交互的实现
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第32讲:PHP 构造方法、析构方法
- 2011年10月高等教育国际金融全国统一命题考试
- 数据库中的数据类型对应Java数据类型
- Contributing to Eclipse 中文版
- ]C++精华基础贴[水木清华]
热门文章
- 简述计算机噪音解决方法,电脑噪音大如何解决
- 年轻人的第一台智能音箱:小米小爱音箱Play版
- 决战平安京服务器升级维护如何解封,《决战平安京》2020年12月18日维护公告
- 链接远程的mysql一直转圈
- 全网最全毕业论文格式经验文
- 我看微软收购GitHub
- 腾讯云开源业界微服管理框架 Femas
- 怎么把桌面计算机的快捷,快捷键显示桌面怎么操作?快捷键显示桌面操作方法...
- 喜马拉雅单个无版权下载
- 不会被我遗忘的蒋阳,董悦,杨竞凯,万伟平以及其他亲爱的队友们 ...