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 类定义的4种方法
Sep 12 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
vue2 前端搜索实现示例
2018/02/26 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Django CBV类的用法详解
2019/07/26 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python中Yield的基本用法
2020/10/18 Python
详解python中的异常和文件读写
2021/01/03 Python
中科软测试工程师面试题
2012/06/16 面试题
abstract class和interface有什么区别
2013/08/04 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
幼儿教师自我鉴定
2013/11/02 职场文书
春风行动实施方案
2014/03/28 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
歌舞青春观后感
2015/06/10 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技