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的面向对象(二)
Nov 09 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
JS 数字转换研究总结
Dec 26 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery聚合函数实例
May 21 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
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 cookis创建实现代码
2009/03/16 PHP
php的大小写敏感问题整理
2011/12/29 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
JS表格的动态操作完整示例
2020/01/13 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python实现360的字符显示界面
2014/02/21 Python
python flask 多对多表查询功能
2017/06/25 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python实现三次样条插值
2018/12/17 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
门店业绩提升方案
2014/06/08 职场文书
班级读书活动总结
2014/06/30 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
学生检讨书
2015/01/27 职场文书
2015年政风行风工作总结
2015/04/21 职场文书