EXT中xtype的含义分析


Posted in Javascript onJanuary 07, 2010

序言

根据我在论坛上的观察,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); 
}

等价于:
Java代码
return new Ext.ux.MyGrid(config);

然后实例化grid,进行渲染和显示。谨记:需要的时候才实例化。
Javascript 相关文章推荐
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 #Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 #Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 #Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 #Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
详解Vue方法与事件
2017/03/09 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python中的默认参数实例分析
2018/01/29 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
python爬取招聘要求等信息实例
2020/11/20 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
纪检监察建议书
2014/05/19 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
公司庆典主持词
2015/07/04 职场文书
股东出资协议书
2016/03/21 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
box-shadow单边阴影的实现
2023/05/21 HTML / CSS